varTools - CSS Framework Generator

BETA

Generators

Configuration

Set your viewport, scale, and naming parameters

Responsive Range

Min Viewport

Max Viewport

Base Size - Min

Base Size - Max

Scale Foundation

Root Font Size

Scale Ratio

Naming Configuration

Step Naming Pattern

Variable Prefix

Preview

Locked items keep their custom names

text-xstext-stext-mtext-ltext-xltext-2xltext-3xltext-4xl

Scale Generation

Number of Steps

Base Step

Rounding Mode

Font Sizes

Drag to reorder, customize your typography scale

No Font Sizes Yet

Configure your viewport, base font size, and scale settings above, then click "Generate Scale" to create your fluid typography system.

No font sizes defined. Click "Add Size" to create one or "Generate Scale" to create a harmonious set.

Generated CSS