Visual design · Beginner · 30 min

Create a type scale

Build a small, consistent type scale for a blog and apply it to a real article page.

Context

A travel blog uses eleven different font sizes chosen by eye over the years. Headings sometimes look smaller than body text on mobile, and line lengths on desktop run past 120 characters.

Your prompt

Define a type scale of five to seven sizes with line heights, and apply it to one article page on mobile and desktop.

Instructions

Choose a base body size (16 to 18px is common for reading) and a line height around 1.5 to 1.7.
Choose a ratio (for example 1.2 or 1.25) and calculate five to seven sizes up and one down from the base. Round to whole pixels.
Name each step by role: caption, body, lead, h3, h2, h1.
Set a maximum line length of roughly 60 to 75 characters for body text.
Apply the scale to a real article with a title, intro, two subheadings, body text and a caption.
Check the page on a phone-sized frame and adjust the largest sizes down if needed.

Expected deliverables

A type scale table (role, size, line height, weight)
An article page on mobile and desktop using only those styles

Completion checklist

My scale has seven sizes or fewer.
Every text element on the page uses a scale style.
Body line length is within about 60 to 75 characters on desktop.
Headings are clearly larger than body text on mobile.

4 items

Evaluation criteria

Consistent ratio or clear reasoning for exceptions.
Readable body text with comfortable line height.
Hierarchy is obvious from size and weight alone.

Hints and an illustrative solution

Show hints

With a 16px base and a 1.25 ratio: 13, 16, 20, 25, 31, 39.
Large headings need tighter line height (around 1.1 to 1.25) than body text.

Show one possible solution

This is one reasonable answer, not the only one. Compare reasoning, not pixels.

One scale: caption 13/18, body 17/28, lead 20/30, h3 21/28 semibold, h2 27/32 medium, h1 34/40 on mobile and 44/48 on desktop. The body column is limited to about 38em (roughly 70 characters). The intro uses the lead style in a muted colour; captions use the caption style. Only two weights are used: regular and medium, plus semibold for h3 because it is close to body size and needs weight to stand out.

Back to the practice library