Line Height
Control the vertical spacing between lines of text. Line heights can also be customized in the theme.
On this page
typography/line_height
The live demo is not available for this example.
line_height.dart
View source
WText('Comfortable spacing', className: 'text-lg leading-6');
WText('Custom spacing', className: 'text-lg leading-[1.3]');
Basic Usage#
In Flutter, line height is a multiplier applied to the font size. A value of 1.5 on a 16px font produces 24px of line height. Apply it with the leading- prefix:
WText(
'Body paragraph text with comfortable line height.',
className: 'text-base leading-normal text-gray-800 dark:text-gray-200',
);
Quick Reference#
| Class | Multiplier | Description |
|---|---|---|
leading-3 |
0.75 | Compact |
leading-4 |
1.0 | Standard compact |
leading-5 |
1.25 | Slightly expanded |
leading-6 |
1.5 | Comfortable |
leading-7 |
1.75 | Spacious |
leading-8 |
2.0 | Very spacious |
leading-9 |
2.25 | Extra spacious |
leading-10 |
2.5 | Maximum spaciousness |
leading-none |
1.0 | No extra spacing |
leading-tight |
1.25 | Tight spacing |
leading-snug |
1.375 | Snug spacing |
leading-normal |
1.5 | Normal spacing |
leading-relaxed |
1.625 | Relaxed spacing |
leading-loose |
2.0 | Loose spacing |
Responsive Design#
Combine with breakpoint prefixes to adjust line height per screen size:
WText('Body', className: 'leading-snug md:leading-normal lg:leading-relaxed');
Arbitrary Values#
Use bracket notation to set a precise multiplier not in the predefined scale:
WText('Custom line height', className: 'text-base leading-[1.3]');
// 16px * 1.3 = 20.8px line height
Customizing Theme#
Add or override line height keys with WindTheme.setLineHeight(key, multiplier):
WindTheme.setLineHeight('comfortable', 1.6);
WText('Custom leading', className: 'leading-comfortable');
See Customizing Line Height for full details.
Related Documentation#
- Font Size — set text size.
- Letter Spacing — spacing between characters.
- Customizing Line Height — override the default scale.