Customizing Font Sizes

Manage the typographic scale through WindTheme: pre-defined sizes, arbitrary values, and programmatic customization.

WindTheme.setFontSize('custom', 1.2);
double size = WindTheme.getFontSize('xl'); // 1.25

Font sizes are applied with the text-* utility (e.g. text-xl); the font-* prefix is reserved for font weight.

Default Font Sizes

WindTheme ships a set of pre-defined font sizes. Sizes are stored in rem units and scaled by the rem factor (pixel factor × 4 = 16 by default).

Key	Value (rem)	Calculated px (rem factor 16)	Description
`xs`	`0.75`	`12px`	Extra small
`sm`	`0.875`	`14px`	Small
`base`	`1`	`16px`	Base size
`lg`	`1.125`	`18px`	Large
`xl`	`1.25`	`20px`	Extra large
`2xl`	`1.5`	`24px`	Very large
`3xl`	`1.875`	`30px`	Extra extra large
`4xl`	`2.25`	`36px`	Huge
`5xl`	`3`	`48px`	Massive
`6xl`	`4`	`64px`	Gigantic

For example:

For sizes outside the scale, use the text-[value] syntax, where value is the desired size in px.

WindTheme provides methods to check, retrieve, add, and remove font sizes at runtime.

// Check whether a font size exists
bool exists = WindTheme.hasFontSize('lg');
print(exists); // Output: true

// Retrieve a font size value
double size = WindTheme.getFontSize('xl');
print(size); // Output: 1.25

// Add a custom font size
WindTheme.setFontSize('custom', 1.2);

// Update an existing font size
WindTheme.setFontSize('lg', 1.0);

// Remove a font size
WindTheme.removeFontSize('custom');