Font Size

Control text size with predefined named scales or arbitrary pixel values. Font sizes can also be customized in the theme for maximum flexibility.

• Basic Usage
• Quick Reference
• Responsive Design
• Arbitrary Values
• Customizing Theme
• Related Documentation

WText('Extra Small Text', className: 'text-xs');   // 12px
WText('Base Text', className: 'text-base');         // 16px
WText('Large Text', className: 'text-lg');          // 18px
WText('Gigantic Text', className: 'text-6xl');      // 64px

Basic Usage

Apply font sizes using the text- prefix followed by a named size key:

WText('Small label', className: 'text-sm');
WText('Body text', className: 'text-base');
WText('Section heading', className: 'text-2xl font-bold');

Quick Reference

Predefined sizes are stored in rem units and resolved against the REM factor (WindTheme.getRemFactor(), which is pixel factor × 4 = 16 by default). The final size is calculated as:

Size (rem) × REM factor (16 by default) = Final size in px

Responsive Design

Combine size classes with breakpoint prefixes to adjust text size per screen width:

WText('Responsive heading', className: 'text-base md:text-xl lg:text-3xl');

Arbitrary Values

Use bracket notation to set any pixel size not in the predefined scale. The value is treated as raw pixels:

WText('Custom 22px text', className: 'text-[22]');
WText('Tiny 8px label', className: 'text-[8]');

Customizing Theme

Add or override font size keys with WindTheme.setFontSize(key, remValue):

WindTheme.setFontSize('giant', 5);
// Now text-giant = 5 × 16 (rem factor) = 80px at the default factor
WText('Giant text', className: 'text-giant');

See Customizing Font Sizes for full details.

Related Documentation

• Font Weight — control text thickness.
• Font Style — italic and normal styles.
• Line Height — spacing between lines.
• Customizing Font Sizes — override the default scale.
• Pixel Factor — how rem values translate to pixels.