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.

On this page

Preview typography/font_size The live demo is not available for this example. font_size.dart View source

dart

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:

dart

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:

text

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

Class	REM	Default px	Description
`text-xs`	0.75	12px	Extra small
`text-sm`	0.875	14px	Small
`text-base`	1.0	16px	Base size
`text-lg`	1.125	18px	Large
`text-xl`	1.25	20px	Extra large
`text-2xl`	1.5	24px	Very large
`text-3xl`	1.875	30px	Extra extra large
`text-4xl`	2.25	36px	Huge
`text-5xl`	3.0	48px	Massive
`text-6xl`	4.0	64px	Gigantic

Responsive Design#

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

dart

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:

dart

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):

dart

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.

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.