Letter Spacing

Adjust the spacing between characters using predefined named scales or arbitrary pixel values. Letter spacings can also be customized in the theme.

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

WText('Wide letter spacing', className: 'tracking-wide text-lg text-gray-700 dark:text-gray-300');
WText('Custom spacing', className: 'tracking-[0.13] text-base text-blue-500 dark:text-blue-300');

Basic Usage

Apply letter spacing with the tracking- prefix followed by a named key:

WText('Compact label', className: 'tracking-tighter text-sm');
WText('Spacious heading', className: 'tracking-wider text-2xl font-semibold');

Quick Reference

Values are defined in em units and multiplied by the Pixel Factor (default: 4) to produce a pixel value.

Responsive Design

Combine with breakpoint prefixes for viewport-dependent letter spacing:

WText('Heading', className: 'tracking-normal md:tracking-wide lg:tracking-wider');

Arbitrary Values

Use bracket notation to set a precise pixel value not in the predefined scale:

WText('Custom tracking', className: 'tracking-[0.13]');
WText('Negative tracking', className: 'tracking-[-0.03]');

Customizing Theme

Add or override letter spacing keys with WindTheme.setLetterSpacing(key, emValue):

WindTheme.setLetterSpacing('loose', 0.15);
// tracking-loose = 0.15 * 4 (pixel factor) = 0.6px
WText('Loose tracking', className: 'tracking-loose');

See Customizing Letter Spacing for full details.

Related Documentation

• Font Size — set text size.
• Line Height — spacing between lines.
• Customizing Letter Spacing — override the default scale.
• Pixel Factor — how em values translate to pixels.