Typography cheat sheet

Font sizing, hierarchy, line height and responsive type guidance.

SGDSGOV.UKWCAGMaterial5 rules, updated 7 Oct 2026Verified 7 Oct 2026

Viewport: All

Viewport references are useful starting points. Design breakpoints should respond to the content, not specific device models. Choosing a viewport changes what is emphasised; nothing is hidden.

In 30 seconds

Body text 14–16 px, and it barely changes with screen size
Titles step down on small screens: 24–32 mobile, 32–48 desktop
Line height around 1.4–1.6 for reading text
Keep reading lines to about 45–75 characters
A handful of sizes is enough

Shortcut's summary of this sheet. The detail, the reasoning and the sources are below.

Sizes

Safe starting point

14–16 px

Body text size

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to Mobile to large desktop

The size most of your text is set in. It should not scale up much because the screen is larger: people sit about as far from a large monitor as from a laptop.

12Send the invoice before Friday.
14Send the invoice before Friday.
16Send the invoice before Friday.
20Send the invoice before Friday.
24Send the invoice before Friday.
32Send the invoice before Friday.

The same sentence at each size, in px. Body text usually sits at 14 or 16.

Mobile: 14–16 px
Tablet: 14–16 px
Laptop: 14–16 pxSame as desktop
Desktop: 14–16 px
Large desktop: 14–18 px

Depends on reading or scanning, viewing distance, density. A starting point, not a correct value.

Common range 14 in dense product UI, 16 for reading, 12–14 for supporting text

Why?

16 px is the browser default and comfortable for sustained reading. Product UI often drops to 14 to fit more on screen.

When to deviate. Use 16 or more for anything people read at length, and on mobile. Keep 12 for captions and metadata only.

Common mistakes (2)

12 px used for body text to make a dense screen fit.
Supporting text made both small and pale, so it fails twice.

Official guidanceSGDSGOV.UKWCAG

SGDS
Body text is 16 px.
SGDS, Typography(opens in a new tab)Design-system convention
GOV.UK
Body text is 19 px with a 25 px line height.
GOV.UK Design System, Type scale(opens in a new tab)Design-system convention
WCAG
Text must be resizable to 200 percent without loss of content or function.
WCAG 2.2, SC 1.4.4 Resize Text(opens in a new tab)Standard requirement

Safe starting point

32–48 px

Page title size

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to Mobile to large desktop

The largest text on a product screen.

Mobile: 24–32 px
Tablet: 28–36 px
Laptop: 32–48 pxSame as desktop
Desktop: 32–48 px
Large desktop: 36–56 px

Depends on product ui or marketing page, length of the title, what the title competes with. A starting point, not a correct value.

Common range 20–28 in tools, 32–48 on content pages, larger on marketing pages

Why?

A title needs to be clearly the largest thing, but in a tool it competes with the content people came for.

When to deviate. Marketing and editorial pages go far larger. Dense application screens sit at the bottom of each range or below it.

Common mistakes (2)

A marketing-size heading inside a dense application because the viewport is large.
A desktop title carried onto mobile, where it wraps to four lines.

AI-look warning. A very large heading inside a product screen is a common mark of generated UI.

Official guidanceSGDS

SGDS
Type scale runs 14, 16, 20, 24, 28, 32, 40, 48, 56 px.
SGDS, Typography(opens in a new tab)Design-system convention

How many sizes do you need?

Craft guidanceShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

Count your font families, weights, sizes, line heights and text colours. Most product screens work with one family, two or three weights and four to six sizes.

Why?

Every extra size is another level the reader has to decode. Hierarchy comes from contrast between a few levels, not from having many.

When to use it

Before adding a size, try weight.
Then try spacing.
Then try colour.
Add a size only if those fail.

Common mistakes (2)

Sizes one or two pixels apart, which read as a mistake.
A different grey for every piece of secondary text.

Senior designer note“More font sizes does not automatically create stronger hierarchy.”

Official guidanceSGDSMaterial

SGDS
For contrast, skip one size, weight or colour step.
SGDS, Typography(opens in a new tab)Design-system convention
Material
Five type roles, each in large, medium and small.
Android Developers, Material Design 3 in Compose(opens in a new tab)Design-system convention

Line height and length

Safe starting point

1.4–1.6

Body line height

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

The distance between lines, as a multiple of font size.

1.2
Most of what people do in a product is read. A comfortable size, a little air between lines and a line that is not too long do more for an interface than any typeface.
1.4
Most of what people do in a product is read. A comfortable size, a little air between lines and a line that is not too long do more for an interface than any typeface.
1.6
Most of what people do in a product is read. A comfortable size, a little air between lines and a line that is not too long do more for an interface than any typeface.

The same paragraph at 15 px, at three line heights.

Common range 1.4–1.6 for body, 1.1–1.3 for headings

Why?

Body text needs room for the eye to find the next line. Large headings need less, or their lines drift apart.

When to deviate. Tighten for short UI labels and large display text. Loosen for long lines or small text.

Official guidanceSGDSWCAG

SGDS
1.5 for body, labels and captions; 1.2 for displays, headings and subtitles.
SGDS, Typography(opens in a new tab)Design-system convention
WCAG
Nothing may break when users set line height to at least 1.5 times the font size.
WCAG 2.2, SC 1.4.12 Text Spacing(opens in a new tab)Standard requirement

Safe starting point

45–75 characters

Reading line length

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

How wide a block of reading text should be. It is independent of screen width: a wider monitor does not mean text should stretch across it. Set a maximum width on reading content.

Short about 30 characters
Most of what people do in a product is read. A comfortable size, a little air between lines and a line that is not too long do more for an interface than any typeface.
Comfortable about 65 characters
Most of what people do in a product is read. A comfortable size, a little air between lines and a line that is not too long do more for an interface than any typeface.
Too wide as wide as the container
Most of what people do in a product is read. A comfortable size, a little air between lines and a line that is not too long do more for an interface than any typeface. Most of what people do in a product is read. A comfortable size, a little air between lines and a line that is not too long do more for an interface than any typeface.

The same paragraph at three widths. On a narrow screen all three end up the width of the screen, which is the point: the limit only matters when there is room to exceed it.

Common range 45–75 for body text, shorter for captions

Why?

Long lines make it hard to find the start of the next line; very short lines break phrases apart.

When to deviate. Tables, code and UI labels are not reading text and do not need the limit.

Common mistakes (1)

Paragraphs stretched to the full width of a wide container.

Official guidanceSGDS

SGDS
Keep long body text to 40 to 60 characters per line, and short text to 20 to 40.
SGDS, Typography(opens in a new tab)Design-system convention

In 30 seconds

Body text 14–16 px, and it barely changes with screen size

Titles step down on small screens: 24–32 mobile, 32–48 desktop

Line height around 1.4–1.6 for reading text

Keep reading lines to about 45–75 characters

A handful of sizes is enough

Shortcut's summary of this sheet. The detail, the reasoning and the sources are below.

Sizes

Safe starting point

14–16 px

Body text size

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to Mobile to large desktop

The size most of your text is set in. It should not scale up much because the screen is larger: people sit about as far from a large monitor as from a laptop.

12Send the invoice before Friday.
14Send the invoice before Friday.
16Send the invoice before Friday.
20Send the invoice before Friday.
24Send the invoice before Friday.
32Send the invoice before Friday.

The same sentence at each size, in px. Body text usually sits at 14 or 16.

Mobile: 14–16 px
Tablet: 14–16 px
Laptop: 14–16 pxSame as desktop
Desktop: 14–16 px
Large desktop: 14–18 px

Depends on reading or scanning, viewing distance, density. A starting point, not a correct value.

Common range 14 in dense product UI, 16 for reading, 12–14 for supporting text

Why?

16 px is the browser default and comfortable for sustained reading. Product UI often drops to 14 to fit more on screen.

When to deviate. Use 16 or more for anything people read at length, and on mobile. Keep 12 for captions and metadata only.

Common mistakes (2)

12 px used for body text to make a dense screen fit.
Supporting text made both small and pale, so it fails twice.

Official guidanceSGDSGOV.UKWCAG

SGDS
Body text is 16 px.
SGDS, Typography(opens in a new tab)Design-system convention
GOV.UK
Body text is 19 px with a 25 px line height.
GOV.UK Design System, Type scale(opens in a new tab)Design-system convention
WCAG
Text must be resizable to 200 percent without loss of content or function.
WCAG 2.2, SC 1.4.4 Resize Text(opens in a new tab)Standard requirement

Safe starting point

32–48 px

Page title size

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to Mobile to large desktop

The largest text on a product screen.

Mobile: 24–32 px
Tablet: 28–36 px
Laptop: 32–48 pxSame as desktop
Desktop: 32–48 px
Large desktop: 36–56 px

Depends on product ui or marketing page, length of the title, what the title competes with. A starting point, not a correct value.

Common range 20–28 in tools, 32–48 on content pages, larger on marketing pages

Why?

A title needs to be clearly the largest thing, but in a tool it competes with the content people came for.

When to deviate. Marketing and editorial pages go far larger. Dense application screens sit at the bottom of each range or below it.

Common mistakes (2)

A marketing-size heading inside a dense application because the viewport is large.
A desktop title carried onto mobile, where it wraps to four lines.

AI-look warning. A very large heading inside a product screen is a common mark of generated UI.

Official guidanceSGDS

SGDS
Type scale runs 14, 16, 20, 24, 28, 32, 40, 48, 56 px.
SGDS, Typography(opens in a new tab)Design-system convention

How many sizes do you need?

Craft guidanceShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

Count your font families, weights, sizes, line heights and text colours. Most product screens work with one family, two or three weights and four to six sizes.

Why?

Every extra size is another level the reader has to decode. Hierarchy comes from contrast between a few levels, not from having many.

When to use it

Before adding a size, try weight.
Then try spacing.
Then try colour.
Add a size only if those fail.

Common mistakes (2)

Sizes one or two pixels apart, which read as a mistake.
A different grey for every piece of secondary text.

Senior designer note“More font sizes does not automatically create stronger hierarchy.”

Official guidanceSGDSMaterial

SGDS
For contrast, skip one size, weight or colour step.
SGDS, Typography(opens in a new tab)Design-system convention
Material
Five type roles, each in large, medium and small.
Android Developers, Material Design 3 in Compose(opens in a new tab)Design-system convention

Line height and length

Safe starting point

1.4–1.6

Body line height

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

The distance between lines, as a multiple of font size.

1.2
Most of what people do in a product is read. A comfortable size, a little air between lines and a line that is not too long do more for an interface than any typeface.
1.4
Most of what people do in a product is read. A comfortable size, a little air between lines and a line that is not too long do more for an interface than any typeface.
1.6
Most of what people do in a product is read. A comfortable size, a little air between lines and a line that is not too long do more for an interface than any typeface.

The same paragraph at 15 px, at three line heights.

Common range 1.4–1.6 for body, 1.1–1.3 for headings

Why?

Body text needs room for the eye to find the next line. Large headings need less, or their lines drift apart.

When to deviate. Tighten for short UI labels and large display text. Loosen for long lines or small text.

Official guidanceSGDSWCAG

SGDS
1.5 for body, labels and captions; 1.2 for displays, headings and subtitles.
SGDS, Typography(opens in a new tab)Design-system convention
WCAG
Nothing may break when users set line height to at least 1.5 times the font size.
WCAG 2.2, SC 1.4.12 Text Spacing(opens in a new tab)Standard requirement

Safe starting point

45–75 characters

Reading line length

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

How wide a block of reading text should be. It is independent of screen width: a wider monitor does not mean text should stretch across it. Set a maximum width on reading content.

Short about 30 characters
Most of what people do in a product is read. A comfortable size, a little air between lines and a line that is not too long do more for an interface than any typeface.
Comfortable about 65 characters
Most of what people do in a product is read. A comfortable size, a little air between lines and a line that is not too long do more for an interface than any typeface.
Too wide as wide as the container
Most of what people do in a product is read. A comfortable size, a little air between lines and a line that is not too long do more for an interface than any typeface. Most of what people do in a product is read. A comfortable size, a little air between lines and a line that is not too long do more for an interface than any typeface.

The same paragraph at three widths. On a narrow screen all three end up the width of the screen, which is the point: the limit only matters when there is room to exceed it.

Common range 45–75 for body text, shorter for captions

Why?

Long lines make it hard to find the start of the next line; very short lines break phrases apart.

When to deviate. Tables, code and UI labels are not reading text and do not need the limit.

Common mistakes (1)

Paragraphs stretched to the full width of a wide container.

Official guidanceSGDS

SGDS
Keep long body text to 40 to 60 characters per line, and short text to 20 to 40.
SGDS, Typography(opens in a new tab)Design-system convention

Typography cheat sheet

Filters

In 30 seconds

Sizes

Body text size

Page title size

How many sizes do you need?

When to use it

Line height and length

Body line height

Reading line length

Typography cheat sheet

Filters

In 30 seconds

Sizes

Body text size

Page title size

How many sizes do you need?

When to use it

Line height and length

Body line height

Reading line length