July 27, 2026 / Web Design
Website typography: how to choose and use type online
Website typography: how to choose and use type online
A client once asked me to rebuild a homepage whose body text was set at 11 pixels in a delicate display face. On her laptop the lines looked elegant. On a phone in bright sunlight they disappeared, and two paragraphs of mission copy became the most-skipped text on the page. The fix was not a new color or a louder headline. It was a calmer, more deliberate approach to website typography, and it changed how the rest of the layout was planned.
Website typography is the system of typefaces, sizes, spacing, and rendering decisions that control how words read on a screen. It is one of the first things a visitor evaluates, often before they understand a single sentence, and it quietly influences trust, readability, and how long someone stays on a page. This guide walks through how to choose type, set a clear scale, build a hierarchy, and keep the result accessible across devices.
What website typography actually controls
Typography on the web is not a single decision. It is a chain of small choices that determine how text looks, how it loads, and how it behaves when the reader changes the page. The main variables are typeface selection, size, line height, line length, color, weight, spacing, and the technical settings that govern how fonts are delivered to the browser.
Readers experience these variables together. A bold headline in a thin display face can feel out of place next to a quiet, well-spaced body. A great typeface in the wrong size can feel like a chore to read. Good website typography keeps the chain coherent, so the page reads the way the designer intended on a small phone and on a large desktop monitor alike.
Set the intent before you set the font
Type is a voice. Before picking a face, decide what the page is trying to say. A long-form essay site needs a calm, durable body face. A product page with short, punchy labels needs a more assertive headline voice. A documentation site needs clear monospaced code and crisp headings that survive nested lists. Editorial intent guides almost every later choice.
Once the intent is clear, translate it into three practical filters:
- Reading distance. Will the page be read close, on a laptop on a desk, or far, on a wall-mounted display? Distance changes the minimum body size and the contrast tolerance.
- Reading duration. A 200-word product description can carry a more decorative face than a 2,000-word article, which has to remain comfortable for ten minutes at a time.
- Brand mood. A heritage brand reads differently in a classical serif than in a geometric sans. Mood is not decoration; it sets expectations for tone.
Pick typefaces that work together
Most reliable website typography uses one or two typefaces across an entire site. A single family with several weights is often the safest choice. Two families work well when one is reserved for display and one for body, and the two are visually distinct without fighting.
The pairing question is really a question of contrast and shared rhythm. Two typefaces can differ in shape, proportion, or style, but they should agree on the way letters sit on a line. If their x-heights, terminals, and stress feel unrelated, the page will look like two different magazines glued together.
Practical pairing patterns
Three patterns tend to hold up across projects:
- One family, many weights. A modern sans like Inter, a humanist sans like Source Sans, or a workhorse serif like Source Serif carries the whole site. Headings, body, captions, and navigation differ through weight, size, and case, not through a second face.
- Serif body, sans display. A readable serif handles long paragraphs while a clean sans carries short headings, buttons, and labels. This is a common pattern for editorial and brand sites.
- Sans body, serif display. Useful when headings need a more literary, distinctive voice but the body needs to stay highly scannable, such as on a marketing page for a heritage service.
When pairing, watch the punctuation and numerals as much as the letters. If one family uses oldstyle figures and the other uses lining figures, the page will look subtly inconsistent in prices, dates, and lists.
Build a type scale, not a pile of sizes
Most typography problems on the web come from having too many sizes. A page with 8 different font sizes usually means the designer set each one by eye. A page with a small, consistent scale reads as a system.
A type scale is a short, named set of sizes that the whole site draws from. The exact numbers matter less than the relationships between them. The most common approach is a modular scale, where each step is a fixed ratio larger than the previous one. A ratio of about 1.2 gives a tight scale for utility interfaces, while 1.25 or 1.333 produces a comfortable range for content-heavy pages.
A workable type scale
The following example shows a small scale suitable for a content site with a 16-pixel root size. It is a starting point, not a rule.
| Step | Use | Size (rem) | Size (px at 16px root) |
|---|---|---|---|
| body | Paragraphs, lists, long text | 1 | 16 |
| small | Captions, helper text, footers | 0.875 | 14 |
| lead | Article intro, emphasised paragraph | 1.125 | 18 |
| h3 | Section heading inside a page | 1.25 | 20 |
| h2 | Major page section | 1.5 | 24 |
| h1 | Page or article title | 2 | 32 |
| display | Hero, marketing headline | 2.5 to 3 | 40 to 48 |
Using rem units rather than fixed pixel sizes means the entire scale responds when the user changes the browser’s base font size. This is one of the most important habits in accessible website typography.
Set line length, line height, and spacing with care
Even a beautiful typeface reads badly if the lines are too long, too tight, or too loose. The shape of the text block is as important as the shape of the letters.
Line length
Line length is the horizontal measure of a text block, often expressed in characters per line. The widely cited comfortable range is about 50 to 75 characters, with 66 frequently offered as a working middle. Lines shorter than 40 characters feel choppy on a desktop. Lines longer than 90 characters force the eye to travel too far between breaks, which slows reading and increases the chance of jumping to the wrong line.
On mobile, the constraint is usually the viewport rather than a chosen measure. Aim for paragraphs that break naturally at the end of a phrase and headings that can sit on one line where possible.
Line height
Line height is the vertical space between baselines. For body text, a line height between about 1.4 and 1.6 of the font size usually reads well. Smaller sizes need more line height, not less, because each line carries less context. Headlines can sit closer, around 1.1 to 1.25, because the words are short and the eye reads them as shapes.
Letter spacing and paragraph spacing
Most body type reads best with default or slightly tightened letter spacing. Display headings often benefit from a small amount of negative tracking, especially in large geometric sans, where very tight spacing can hurt legibility. Paragraph spacing should be visible. A paragraph block where each new paragraph is only distinguished by an indent can disappear on a phone screen; a small space below the paragraph, combined with a subtle indent or no indent, tends to read more clearly.
Spacing reference
| Element | Recommended range | Notes |
|---|---|---|
| Body line height | 1.4 to 1.6 of font size | Larger for very small text |
| Heading line height | 1.1 to 1.25 | Tighter for short display lines |
| Body line length | 50 to 75 characters | Around 66 is a common target |
| Paragraph spacing | 0.5em to 1em below each paragraph | Consistent across the site |
| Heading top spacing | 1.5em to 2em above | More space above than below |
Build a clear visual hierarchy
Hierarchy is the order in which the reader sees things. On a well-built page, the heading is the loudest element, the lead paragraph is the second, the body is calm and even, and small labels are quiet. The reader does not need to think about this. They just feel that the page has a clear shape.
Hierarchy is built from a small toolkit: size, weight, color, spacing, and case. Used together, they let a reader scan the page in a few seconds and find the right section.
Three checks for a clean hierarchy
- Can you tell at a glance which element is the page title? If not, the largest size on the page is probably not the H1, or several elements are competing for that role.
- Do the section headings all look like the same kind of thing? Mixing H2 and H3 sizes, or giving some sections a tagline and others a plain title, breaks the rhythm.
- Do links look like links? Underlines, color shifts, or a clear weight change help readers identify interactive text without effort.
A useful test is to look at the page from across the room. If the shape of the text blocks still suggests the structure of the content, the hierarchy is doing its job.
Choose type that works on a screen
A typeface that looks beautiful in a printed specimen can fall apart at 16 pixels on a low-resolution display. Screen typography rewards designs that were drawn with screens in mind, with open counters, distinct letterforms, and generous proportions.
When evaluating a typeface for website typography, check a few things in real conditions:
- Read at body size. Open the family in a browser, set it to your body size, and write three paragraphs of realistic content. Read it without zooming.
- Check the difficult characters. Look at the lowercase a, e, s, and the digits 1, 0, and the figure 1. Ambiguous pairs are a common source of friction.
- Test italics and bold. Some families have a true italic; others fake it with a slant. Both can work, but a true italic usually looks better in body text.
- Try a long URL or email address. A typeface that breaks these awkwardly will cause layout problems on contact pages and reference lists.
It is also worth looking at a typeface in a language you do not read. If the unfamiliar glyphs still feel consistent in shape and spacing, the family has been drawn with care.
Load fonts in a way that respects performance
Type affects performance as well as appearance. A slow-loading font can delay the moment a reader can start reading, which is a quiet but real loss. The technical side of website typography is therefore part of the design.
Two practical rules for font loading
- Load as few files as possible. A single family in two weights, regular and semibold, covers most sites. Add italics and a third weight only when the design needs them.
- Use the modern font formats. The WOFF2 format compresses well and is supported by current browsers. Older formats add weight for little gain on modern devices.
For most projects, a system font stack is a valid first choice, especially for utility interfaces and content sites that value speed. System fonts render instantly, look native on the user’s device, and free the design to spend its typographic budget on the page’s primary content face.
Color, contrast, and accessibility
Type that cannot be read is not really typography. Color choices and contrast ratios decide whether the page is usable for readers with low vision, in bright sunlight, or on aging screens.
Body text should aim for a contrast ratio of at least 4.5 to 1 against its background, with 7 to 1 a stronger target for long reading. Large display text can sit closer to 3 to 1, but very light text on a light background remains a common cause of complaint, even when it technically passes a test.
Beyond contrast, a few habits help most readers:
- Reserve color for meaning. If body links are blue and headings are blue, the page looks unified but readers have to guess which blue is interactive. Reserve accent colors for actions.
- Avoid pure black on pure white. Very dark gray on a slightly warm off-white is easier on the eye for long reading and still gives strong contrast.
- Test with a reader mode. Browser reader modes strip styling. If the page still reads well there, the type is doing most of the work.
Accessibility is closely tied to inclusive design, and a useful foundation is the thinking behind a practical guide to inclusive design. Many of the same principles, such as clear hierarchy, sufficient contrast, and respect for user settings, also produce stronger website typography.
Responsive type, not just responsive layout
Pages that look right on a laptop often feel cramped on a phone, or oversized on a wide monitor. The fix is responsive type, where sizes, line lengths, and sometimes even the choice of typeface shift with the viewport.
The simplest approach is to use rem units for sizes and a slightly larger root size at wider viewports. A more fluid approach uses clamp() to interpolate between a minimum and maximum size based on the viewport width. Both are reasonable; the second reduces the number of breakpoints the design has to maintain.
A worked example
For a body size that reads as 16 pixels on a phone and 18 pixels on a wide desktop, a single clamp declaration can replace two media queries. The values below are a starting point and should be tested against real reading distances.
| Element | Mobile target | Desktop target | Simple approach |
|---|---|---|---|
| Body | 16px | 18px | 1rem on small screens, 1.125rem above 64em |
| H2 | 1.5rem | 1.875rem | clamp() with a viewport-based middle step |
| H1 | 2rem | 2.5rem | clamp() with a 2.5vw middle step |
| Display | 2.25rem | 3.5rem | clamp() with a wider middle range |
Whatever the technique, the rule is the same: test the page on a phone, a laptop, and a wide monitor, and make sure the type reads well on each without zooming.
Common website typography mistakes
Most typography problems fall into a familiar set of patterns. Recognising them early saves redesign work later.
- Too many sizes. A page with twelve font sizes is hard to maintain. Bring the system back to a small scale and reuse it.
- Body text set too small. A 14-pixel body in a thin face is a common culprit. Anything below 16 pixels on a phone often forces readers to zoom.
- Lines that run across the whole screen. Full-width paragraphs on a wide monitor are tiring. A sensible measure matters more than any other layout decision.
- Two faces that fight. A decorative display face and a quirky body face can look like two designers worked independently. Pick pairs that share rhythm.
- Color-only links. A link that is only distinguished by color can be hard to find. An underline, weight change, or both gives a stronger cue.
- Forced justify on small text. Justified text on a phone produces uneven word spacing and visible rivers. For most website typography, left-aligned text reads better.
- Custom fonts loaded late. When the page first paints in a fallback font and then swaps, the layout can shift. Reserve space and preload critical files to reduce visible movement.
These are the kinds of issues that show up in a careful website accessibility checklist, where type and reading experience sit alongside other practical checks.
A short workflow for new projects
When a new site begins, a calm sequence of decisions helps avoid the trial-and-error loop. A workable order is:
- Define intent. One sentence describing what the page is for and how readers will use it.
- Choose one or two families. Test them in realistic paragraphs, in headings, and in the smallest label size.
- Build a small scale. Five to seven named sizes, expressed in rem, that the rest of the design draws from.
- Set measure and line height. Choose a target line length for body text and apply it to every long-form surface.
- Define hierarchy rules. Which elements use which step, which weight, which case. Make the rules explicit.
- Test on three devices. A phone, a laptop, and a wider screen. Read real content on each, not Lorem Ipsum.
- Refine spacing and color. Set paragraph spacing, heading rhythm, and color tokens that respect contrast.
This is the same kind of structured thinking that supports a practical web design process, and it is why typography is usually the first subsystem a careful team pins down.
Website typography in context
Type does not stand alone. It interacts with the brand’s color palette, the imagery, the grid, and the way the site moves. A useful exercise is to remove the photos and color from a layout and look at the type alone. If the structure is still clear, the typography is doing real work. If the page collapses, the design was leaning on decoration to hold the hierarchy together.
This is also where a typographic system pays off over time. Once a small set of rules is in place, new pages can be added without inventing new sizes or weights. The site reads as one publication, even as the content shifts.
Frequently asked questions
What is the most important rule in website typography?
Make body text large enough and well-spaced enough that readers do not have to work to read it. A clear body size, a sensible line length, and enough line height do more for a page than any headline treatment.
How many typefaces should a website use?
One typeface in a few weights is often enough. Two typefaces can work well when one is reserved for display and one for body, and the two share a clear visual relationship. Using three or more usually produces visual noise unless the site has a very specific editorial need.
What is a good body font size for a website?
A 16-pixel body is a reliable starting point for most projects. Some sites push to 17 or 18 pixels for long reading. Anything below 16 pixels tends to push readers to zoom on phones, and the trade-off is rarely worth the extra space.
What line length should I aim for?
A common target is around 50 to 75 characters per line, with 66 often used as a working middle. On a phone the viewport sets the line length, so the design should make sure paragraphs break naturally at phrase boundaries.
Should I use a serif or a sans serif for body text?
Both can work. A well-drawn serif often reads comfortably for long-form text, while a clean sans reads quickly for utility pages and product descriptions. Choose based on the reading duration, the brand voice, and how the typeface behaves at body size on a screen.
What is a modular type scale?
A modular type scale is a set of font sizes where each step is a fixed ratio larger than the previous one, such as 1.2 or 1.25. The scale gives the site a small, named set of sizes to draw from, which keeps the design consistent as it grows.
How does typography affect accessibility?
Type affects accessibility through size, contrast, spacing, and respect for user settings. Using rem units, keeping contrast ratios strong, and allowing enough space around text all help readers with low vision or reading difficulties. These are the same habits that produce a stronger, calmer design for everyone.
Should I use system fonts or a custom font?
System fonts load instantly and feel native on the user’s device, which is a strong advantage for utility pages. A custom font gives the site a more distinctive voice and is often worth the small performance cost on content sites. The choice is a balance between brand expression, performance budget, and how the typeface behaves at body size.
How do I prevent layout shift when fonts load?
Use font-display settings that show text quickly, preload the most important font files, and reserve enough space for the text while the font is loading. Where possible, choose a fallback font with similar metrics so the page does not jump when the custom face arrives.
What is the difference between typography and font choice?
Font choice is one part of typography. Typography also includes the size, weight, spacing, color, hierarchy, and technical settings that decide how a font behaves on a page. A good font with poor settings will still read badly, while a simple font with careful settings can read beautifully.