Line Height

Control the vertical spacing between lines of text. Line heights can also be customized in the theme.

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

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

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.