Line Height

Line height controls the vertical space between lines of text. It is one of the most important typography utilities for readable, balanced, and polished interfaces.

FrontAlign provides a focused set of line height utilities for display headings, section titles, body copy, documentation pages, dashboards, and long-form editorial layouts.

It is a pure CSS utility. No JavaScript is required.

Overview

Class	Value	Recommended use
`leading-none`	`line-height: 1;`	Large display headings that need a compact vertical rhythm.
`leading-tight`	`line-height: 1.25;`	Hero titles and compact headings.
`leading-snug`	`line-height: 1.375;`	Section headings and dense title blocks.
`leading-normal`	`line-height: 1.5;`	Default body text and most interface content.
`leading-relaxed`	`line-height: 1.625;`	Documentation pages, articles, and longer reading sections.
`leading-loose`	`line-height: 2;`	Editorial layouts and spacious reading experiences.

Why use line height?

Good typography is not only about font size. The spacing between lines has a major impact on readability, scanning, visual hierarchy, and overall reading comfort.

A line height that is too small can feel cramped, while excessive spacing can make content difficult to scan. FrontAlign keeps the scale small and practical so your typography stays consistent across the design system.

Basic usage

Use a leading-* utility directly on headings, paragraphs, article wrappers, cards, or any element that contains text.

<p class="leading-normal">
  FrontAlign provides a modern utility and component system for production interfaces.
</p>

FrontAlign provides a modern utility and component system for production interfaces.

Compact display heading

Use leading-none only when a large heading needs a tighter visual lockup.

<h1 class="leading-none">
  Build modern interfaces without framework chaos.
</h1>

Build modern interfaces without framework chaos.

Hero heading

Use leading-tight for hero titles and large marketing headings.

<h1 class="leading-tight">
  One engine.
  Every interface.
</h1>

One engine. Every interface.

Section heading

Use leading-snug for section titles that should feel compact but still readable.

<h2 class="leading-snug">
  Components built for production.
</h2>

Components built for production.

Comfortable reading

Use leading-relaxed for documentation and long-form content where reading comfort matters more than density.

<p class="leading-relaxed">
  Long-form content benefits from increased line spacing because it improves readability and reduces visual fatigue.
</p>

Long-form content benefits from increased line spacing because it improves readability and reduces visual fatigue.

Editorial layout

Use leading-loose when you intentionally want a more spacious reading rhythm.

<p class="leading-loose">
  Magazine-style layouts sometimes benefit from generous spacing between lines.
</p>

Magazine-style layouts sometimes benefit from generous spacing between lines.

Applied examples

Documentation page

Apply line height to the article wrapper when the whole content area should share the same reading rhythm.

<article class="leading-relaxed">
  <h2>Getting Started</h2>

  <p>
    FrontAlign helps you build modern interfaces faster.
  </p>

  <p>
    The framework includes utilities, components, runtime behavior, and semantic tokens.
  </p>
</article>

Getting Started

FrontAlign helps you build modern interfaces faster.

The framework includes utilities, components, runtime behavior, and semantic tokens.

Dashboard card

Use a tighter heading with normal body text inside dashboard cards.

<div class="border rounded-4">
  <h3 class="leading-tight">
    Monthly Revenue
  </h3>

  <p class="leading-normal">
    Revenue increased significantly compared to the previous month.
  </p>
</div>

Monthly Revenue

Revenue increased significantly compared to the previous month.

Combining utilities

Line height utilities work best when paired with font weight, font size, line clamp, and width utilities.

<!-- Font weight + line height -->
<h2 class="font-bold leading-tight">
  Runtime Intelligence
</h2>

<!-- Line clamp + line height -->
<h2 class="line-clamp-2 leading-tight">
  Build modern interfaces without framework chaos.
</h2>

<!-- Relaxed leading + readable width -->
<article class="leading-relaxed max-w-700">
  Long-form content benefits from a constrained reading width paired with relaxed line spacing.
</article>

Runtime Intelligence

Build modern interfaces without framework chaos.

Long-form content benefits from a constrained reading width paired with relaxed line spacing.

Recommended usage

Content type	Recommended utility	Reason
Hero headings	`leading-none` or `leading-tight`	Keeps large type visually compact and strong.
Section headings	`leading-snug`	Creates a clean title rhythm without excessive vertical space.
Body text	`leading-normal`	Works well for regular interface text and short paragraphs.
Documentation	`leading-relaxed`	Improves readability for longer explanations and guides.
Editorial content	`leading-loose`	Creates a more open, spacious reading experience.

Usage notes

Do	Avoid
Use `leading-tight` for large headings and hero titles.	Using `leading-none` on long paragraphs.
Use `leading-normal` for most interface text.	Changing line height randomly from one section to another.
Use `leading-relaxed` for documentation and long-form reading.	Letting wide article text use a cramped line height.
Combine line height utilities with typography and width utilities.	Using line height as a replacement for margin, padding, or layout spacing.
Keep the scale consistent across your design system.	Adding too many custom line-height values for small visual differences.