Letter Spacing
Adjust the spacing between characters using predefined named scales or arbitrary pixel values. Letter spacings can also be customized in the theme.
On this page
typography/letter_spacing
The live demo is not available for this example.
letter_spacing.dart
View source
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.
| Class | em value | Default px | Description |
|---|---|---|---|
tracking-tighter |
-0.05 | -0.2px | Very tight spacing |
tracking-tight |
-0.025 | -0.1px | Tight spacing |
tracking-normal |
0 | 0px | Default spacing |
tracking-wide |
0.025 | 0.1px | Wide spacing |
tracking-wider |
0.05 | 0.2px | Very wide spacing |
tracking-widest |
0.1 | 0.4px | Extremely wide spacing |
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.