Type sizes, scale and line spacing for screens. Two rules do most of the work: headings ride on tight leading, and body copy is set for comfortable reading at 16 px or more. Sizes are given for mobile and desktop, because type should grow with the viewport.
This is TEA's house web scale. Built for reading on screens and tuned so a page has clear hierarchy without shouting. It flexes with the brand and typeface, but this is where we start.
Headings: tight leading. The bigger the heading, the tighter it goes: hero and H1 at 1.0–1.1, smaller headings at 1.15–1.25. Loose leading makes a two-line heading fall apart. Body: 16–18 px with a line-height of 1.5–1.6, never below 16 px, and a line length around 60–75 characters. The lead is a paragraph, not a heading: it sits just above body (18 px) and is set apart by weight and colour, so headings always stay a clear step larger.
Built on a 16 px body (up to 18 px on desktop). Set sizes in rem so they respect the reader's browser settings, and scale headings fluidly between the mobile and desktop values with clamp().
| Element | Role | Mobile | Desktop | Line-height | Notes |
|---|---|---|---|---|---|
| Display / hero | Landing headline | 38 px | 60–72 px | 1.0–1.05 | A poster moment. Tighter tracking, very tight leading. |
| H1 | Page title | 30 px | 44–48 px | 1.05–1.1 | One H1 per page. Bold; tight leading. |
| H2 | Section heading | 24 px | 32–36 px | 1.1 | The main wayfinding layer. |
| H3 | Sub-section | 20 px | 26–28 px | 1.15–1.2 | Clearly a heading, well above the lead. |
| H4 | Minor heading | 18 px | 22–24 px | 1.2 | A heading, not a big lead: kept a step above the intro size. |
| Eyebrow / kicker | Label above a heading | 11 px | 12–13 px | 1.2 | Uppercase, letter-spaced 6–12%. |
| Lead / intro | Standfirst paragraph | 17 px | 18–20 px | 1.4 | A touch bigger than body; a little more open. |
| Body copy | Main reading text | 16 px | 16–18 px | 1.5–1.6 | The anchor and the floor: 16 px on mobile, up to 18 on desktop. |
| Small / meta | Captions, dates, meta | 13 px | 14–15 px | 1.4–1.45 | Secondary, but keep it legible. |
| Caption / fine print | Legal, footnotes | 12 px | 13–14 px | 1.4 | The smallest on-screen text. Don't go below ~12 px. |
| Pull quote | Feature quotation | 22 px | 28–32 px | 1.15–1.2 | A display element; keep it short. |
| Button / UI label | Buttons, tabs, nav | 15 px | 16 px | 1.0 | Single line; leading is irrelevant, spacing is padding. |
Type scales down on mobile, with the big headings shrinking most and the body holding near its 16 px floor. Use clamp() with the min (mobile) and max (desktop) in rem to move smoothly between the two.
The same two-line heading at three leadings, so you can judge it by eye. This is the one that matters most on the web: loose leading makes a multi-line heading read as two separate lines, not one thought. Tight leading locks the lines together.
Design and technology that people actually use
Design and technology that people actually use
Design and technology that people actually use
The same body paragraph (16 px) at three leadings. Body is the opposite of headings: it needs room to breathe. Too tight and the lines crowd; too loose and they stop feeling connected. 1.5–1.6 is the reading sweet spot, and 1.5 is also the accessibility floor readers can expect.
Body copy carries the reading, so it has to stay comfortable for paragraphs at a time. Too little line spacing and the eye struggles to find the start of the next line, and long passages become tiring to read on screen.
Body copy carries the reading, so it has to stay comfortable for paragraphs at a time. At around 1.5 to 1.6 the lines have room to breathe, the eye tracks easily from one to the next, and the text stays inviting even in long passages.
Body copy carries the reading, so it has to stay comfortable for paragraphs at a time. Push the leading too far and the lines drift apart, the paragraph stops reading as a single block, and vertical rhythm across the page suffers.
Every element at its recommended desktop size, with the house leading. Headings are set long enough to wrap to two lines, so the tight leading is visible.
Design & technology studio
A sub-section heading that also wraps onto a second line
A minor heading, kept a clear step above the lead
A standfirst introduces the section in a sentence or two, set a little larger and more open than the body.
Body copy is the anchor of the scale. Set it at 16 to 18 pixels with a line-height around 1.5 to 1.6 and a measure of roughly 60 to 75 characters. Everything else on the page is sized in relation to this: headings a step larger with tighter leading, meta and captions a step smaller. Use rem units so the reader's own browser settings are respected, and let the text reflow and zoom rather than fixing it in place.
“Tighten the headings, open up the body.”
5 min read · Updated August 2026 · Design systems
On the web, the typeface is also a performance decision. A slow or badly loaded font hurts speed, layout stability and the carbon footprint of the page. The house rules:
WOFF2 is the modern format (best compression, ~97% support). Subset to the characters and the two or three weights the design actually uses. Aim for a total font payload under ~100 KB across 2–4 files.
One variable file can replace several static weights, cutting requests. Only include the axes and range you need.
Show fallback text immediately, then swap in the web font, so text is never invisible while loading. Use optional when you are chasing the best layout-stability scores.
Preload only the fonts used above the fold (usually the body and one heading weight). Preloading everything competes with the CSS and slows the page.
Give the fallback font size-adjust and the override descriptors so the swap doesn't jump. This is the single biggest win for Cumulative Layout Shift.
Behind every web font sits a system stack, so the page is readable instantly and if the font ever fails: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif.
The web is judged on resizing, not a fixed size. Under WCAG 2.1 AA, text must be resizable to 200% and reflow, and body line-height must be able to reach 1.5 without breaking the layout. So set type in rem, keep body at 16 px or more, never disable zoom, and hold contrast at 4.5:1 for body text.
Sizing in rem means the reader's own browser font-size setting is respected. Reserve px for hairlines and fixed UI details.
Use clamp() with the min and max in rem (only the middle value in vw), so text still scales when the user zooms. A viewport-only size can fail the 200% resize test.
16 px is the practical minimum for body copy. Smaller "for style" is the most common accessibility miss on marketing sites.
No maximum-scale or user-scalable=no in the viewport tag. Let people pinch-zoom.
Set the body size, then size headings, leads and meta in relation to it. On screen the body is 16–18 px; report and print bodies run smaller.
The bigger the type, the tighter the leading: display and H1 at 1.0–1.1. The smaller and longer the text, the more open: body at 1.5–1.6.
Type should grow between mobile and desktop, not sit at one fixed size. Fluid clamp() does this in one line.
Cap body text with a max-width in ch or rem so lines don't run the full width of a large screen.
One family, or one for headings and one for body. More than that and the page loses coherence and loads slower.
Two fonts at the same size look different. Use these numbers as a start, then adjust until the hierarchy reads cleanly.
The scale is TEA's house standard for screen. For the underlying principles, performance and accessibility rules, these are the references we rate.
For print and PDF reports (which read smaller), see the Report typography page.