A Web Designer’s Guide to Line Height

What Is a Type Scale?

A type scale is a system where font sizes grow by a consistent ratio. This structure helps maintain visual hierarchy, harmony, and consistency across your designs.

With a 1.250 Major Third ratio using a base size of 16px, your font sizes flow like this:

Element	Font Size	Ratio	Line Height
H1	50px	×1.250⁴	100%
H2	40px	×1.250³	100%
H3	32px	×1.250²	100%
H4	25.6px	×1.250	100%
H5	20.5px	Base ×1.250	100%
H6	16.4px	Base	100%
Paragraph	16px	Base	150%
Small	12.8px	÷1.250	160%
Legal	10.2px	÷1.250²	170%

This gives a coherent typographic system: headings stay tight and bold, while body and small text get the breathing space they need.

---

Why Headings Use 100% Line Height

Headings are often just one or two lines, so they don’t benefit from extra vertical spacing. Keeping them at 100% line-height ensures they feel compact, crisp, and aligned when stacked. It also simplifies your system because every heading just uses the same line-height.

---

Responsive CSS Using clamp()

Let’s translate this into CSS that adapts fluidly across screen sizes. We’ll use clamp() so typography scales automatically with no media queries, no hard breakpoints.

:root {
  --font-base: 16px;
  --scale: 1.25;
}

/* Headings — always 100% line-height */
h1 {
  font-size: clamp(2.5rem, 5vw + 1rem, 4.883rem); /* ~40px to ~78px */
  line-height: 100%;
}

h2 {
  font-size: clamp(2rem, 4vw + 1rem, 3.906rem);
  line-height: 100%;
}

h3 {
  font-size: clamp(1.6rem, 3vw + 0.5rem, 3.125rem);
  line-height: 100%;
}

h4 {
  font-size: clamp(1.28rem, 2vw + 0.5rem, 2.5rem);
  line-height: 100%;
}

h5 {
  font-size: clamp(1rem, 1.5vw + 0.5rem, 2rem);
  line-height: 100%;
}

h6 {
  font-size: clamp(1rem, 1vw + 0.25rem, 1.6rem);
  line-height: 100%;
}

/* Body, small, legal text */
p {
  font-size: clamp(1rem, 0.75vw + 0.5rem, 1.125rem);
  line-height: 150%;
}

small {
  font-size: clamp(0.8rem, 0.5vw + 0.5rem, 0.9rem);
  line-height: 160%;
}

.legal {
  font-size: clamp(0.64rem, 0.4vw + 0.4rem, 0.75rem);
  line-height: 170%;
}

How It Works

clamp() ensures every font smoothly scales from a minimum to a maximum size, depending on viewport width.

Headings at 100% line-height keep your titles tight and consistent.

Percent-based line-heights mirror your Figma setup, making it easier to translate designs to code.

The 1.250 Major Third ratio keeps every level of typography mathematically linked and visually cohesive.

Why the Major Third Scale Is a Strong Choice

The Major Third (1.250) ratio balances subtle growth with clear distinction. It avoids overly large jumps between headings while still emphasising hierarchy. For digital design, it’s clean, composable, and works well on any screen.

Access the Figma System

You can duplicate and use my Figma file directly in your own work:
👉 Open & Duplicate in Figma

It includes:

H1–H6, Paragraph, Small, Legal text styles
Line-heights set to 100% for headings
Font sizes following the Major Third scale
Easy mapping to the CSS system above.

Final Thoughts

Good typography is invisible — but it has a huge impact on how your design feels. By locking in a type scale and line-height system, you eliminate guesswork and give yourself a consistent foundation you can trust.


Use the Figma file, copy the CSS, and let your typography do the work. Your designs will look cleaner, feel more balanced, and read more comfortably all because you got the spacing right.