Line Heights
Chassis CSS assigns a distinct line height to every font size, set by designers in Chassis Tokens — never derived from a single ratio or an algorithm.
Most CSS frameworks assign one line height to all body text, another to headings, or scale the value algorithmically — either way, the values are out of the designer's hands. Chassis CSS does it differently. Every font size has its own line-height token, set by the designer in Chassis Tokens and pushed straight to CSS.
This matters for two reasons:
- Larger text needs tighter line spacing. A
1.5ratio that reads well at16pxlooks awkward at32px; a1.2ratio that suits a 32-pixel heading turns small body text into a wall. - Pixel alignment with Figma. Percentage-based or unitless line heights cause Figma layers to misalign and separators to land on sub-pixel boundaries, breaking the pixel-perfect match between design and code.
With per-size line-height tokens, designers control the exact value for each size, each font-family variant, and each platform — and the CSS reflects those decisions without any developer intervention.
The example below shows the token-driven heading next to a heading forced to the typical 1.5em ratio. Notice how the latter looks loose and breaks the visual rhythm:
This is a long heading text with a specific line-height value comes from design tokens.
The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element.
This is a long heading text with a standard 1.5em line-height of most design systems.
The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element.
Overriding with utilities
Token-driven line heights are the right default, but you can still override them on a per-element basis with the lh-* utilities:
The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element.
The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element.
The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element.
The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element.
<p class="lh-1">The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element.</p>
<p class="lh-small">The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element.</p>
<p class="lh-base">The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element.</p>
<p class="lh-large">The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element.</p>See also
- Typography — global settings, headings, body text, lists, and the full type scale.
- Design Tokens — how typography tokens are defined and exposed.