Strip the photos and colour from a typical business website and most of what’s left is text: service descriptions, headings, prices, form labels and buttons. Visitors spend their time with that text, so web typography shapes how credible and usable a site feels more than almost any other design decision.
Good type rarely comes from a clever font. It comes from a few decisions about typefaces, sizes, spacing and loading, made once and set as rules that every page inherits.
The short answer
Good web typography for a business website comes down to a handful of defaults:
- One or two type families, with three or four weights and styles between them.
- Typefaces that cover every language and script you publish in, tested with real content.
- Body text of at least 16px on phones, often 17–20px on desktop, set in
rem. - Lines of roughly 45–75 characters with a body line height of about 1.5, and tighter headings.
- A consistent type scale, so each heading level is clearly distinct.
- Self-hosted WOFF2 files with
font-displayset, so text appears quickly and doesn’t jump.
Why web typography does most of the design work
A manufacturer’s capability page or a clinic’s treatment guide is read, not looked at. Visitors are scanning for an answer, and typography decides how quickly they find it. It also carries tone: the same sentence in a geometric sans-serif and a traditional serif says different things about the business.
Typography is where design, UX, accessibility, performance and content meet, which is why it belongs among the ingredients of what makes a good website and deserves a deliberate decision, not whatever the theme shipped with.
How to choose a typeface for a business website
Start with the job
Most sites need reading type for body copy, navigation, forms and buttons, and display type for headlines, where personality matters more than stamina. Choose the body face first: it appears on every page and does the harder work.
Match the brand, not the trend
Typeface styles carry broad associations, useful for a brief:
| Style | Tends to suggest | Watch for |
|---|---|---|
| Humanist sans-serif | Warm, approachable, clear | Can feel informal in conservative sectors |
| Neo-grotesque sans-serif | Neutral, modern, efficient | Looking like everyone else |
| Geometric sans-serif | Contemporary, precise | Small x-heights and look-alike round letters |
| Serif | Established, editorial | Fine details that fade at small sizes |
If you have brand guidelines, start with the brand typeface, provided it works on screens and its licence covers web use. Our guide to brand guidelines for websites covers what to ask for at handover.
Test legibility before you commit
Specimen pages flatter typefaces. Test in your visitors’ conditions:
What are the best fonts for websites?
There isn’t a single best one. The right font fits your brand, passes the checks above, covers your languages and is licensed for how you’ll use it. Inter, Source Sans 3, IBM Plex and Noto are well-made starting points, all free for commercial use under the SIL Open Font License.
Check every language and script you publish in
Glyph coverage
A typeface only includes the characters its designers drew. When a page needs one it lacks, the browser borrows it from another font, so one line mixes two fonts, or shows an empty box, often called “tofu”. Google’s Noto family, built to cover a very wide range of writing systems, is named after the goal of “no more tofu”.
Check it yourself. Paste real content from every language into the font’s online tester, including accented letters, currency symbols and customer names. A “supports hundreds of languages” claim is not a test.
Different scripts need different settings
Some writing systems stack marks above and below the letters and need more line height, or they get clipped in buttons and fixed-height boxes. Several have no capital letters and some have no tradition of italics, so hierarchy built on uppercase labels or italic emphasis won’t carry across. Some don’t put spaces between words, which changes how lines break.
- Declare the language. Set the
langattribute on every page and on any passage in another language, then use the CSS:lang()selector to adjust fonts and line height per language. Right-to-left scripts such as Arabic and Hebrew also needdir="rtl". - Find a companion. Where the brand typeface has no version for a script, choose one with a similar weight and tone.
- Watch file size. Scripts with thousands of characters make very large font files, so split them by character range (
unicode-range) or use system fonts. - Test real translations in headings, menus and buttons: they rarely match the original’s length.
Launch languages, translation and switchers are covered in planning a multilingual website.
Font pairing: one family or two?
A well-designed family with several weights can handle everything alone, building hierarchy from size, weight and space, and it loads fewer files.
A second family earns its place when it gives headings a distinct voice. Pairings that work usually have:
- Clear contrast in style, such as serif headings with sans-serif body text, or the reverse.
- Similar proportions, particularly x-height, so the two sit comfortably together.
- A shared mood. A formal serif and a playful rounded sans-serif pull in opposite directions.
Superfamilies with matching sans-serif and serif versions, such as IBM Plex Sans and Serif, Source Sans and Source Serif, or Noto Sans and Noto Serif, make font pairing easy. Avoid two similar sans-serifs (it looks like a mistake), decorative faces in body text or buttons, and a third family for “special” sections.
Setting size, line length and line height
Website font size
Most browsers default to 16px, a sensible minimum for body text on phones; 17–20px often reads better on desktop, depending on the typeface’s x-height. Set sizes in rem rather than pixels so text respects each visitor’s browser settings. Keep form fields at 16px or more too, because on iPhones the browser zooms in when someone taps a field with smaller text.
A type scale for headings
A type scale grows sizes by a consistent ratio, so heading levels feel related. Phones suit a gentle ratio such as 1.2; larger screens can take 1.25 or 1.333. As a starting point, not a rule:
| Role | Phone | Desktop | Line height |
|---|---|---|---|
| Body text | 16–18px | 17–20px | 1.5–1.7 |
| Small text | 14px or more | 14–16px | 1.4–1.5 |
| H3 | 20–22px | 24–28px | 1.25–1.35 |
| H2 | 24–28px | 32–40px | 1.15–1.25 |
| H1 | 30–36px | 44–60px | 1.05–1.15 |
The CSS clamp() function lets each size grow smoothly from phone to desktop. Mix a rem value into the middle term, as in clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem): with viewport units alone, text barely grows when someone zooms in. For whole layouts, see mobile-first vs responsive design.
Line length and line height
Long lines make it hard to find the next one; short lines chop sentences into fragments. The classic guideline, from Robert Bringhurst’s The Elements of Typographic Style, is 45 to 75 characters per line. WCAG’s Level AAA Visual Presentation criterion (1.4.8) uses 80 characters as its upper limit (40 for Chinese, Japanese and Korean). A maximum width of around 60ch to 70ch usually lands in range, but check with real text: ch is the width of a zero, not an average letter.
Body text needs a line height of about 1.5 (the minimum that same WCAG criterion uses within paragraphs), a little more for long lines or tall scripts. Headings need less, usually 1.1–1.3, or a two-line heading reads as two separate lines. Use unitless values (1.5, not 24px) so line height scales with the text.
Headings that build hierarchy
- Space belongs to what follows. Put more space above a heading than below, so it attaches to its section.
- Steps must be obvious. An H2 should never be mistaken for an H3.
- Sentence case, aligned to the start. Keep capitals for short labels, and align paragraphs to the left (the right in right-to-left languages), not justified or centred.
- Structure first, style second. Pick heading levels for the page outline, then style them. An H4 chosen because it “looks the right size” breaks the outline that screen reader users navigate by and search engines read.
For the wider principles of guiding the eye, see visual hierarchy in web design. Contrast ratios, text resizing and spacing overrides are covered in colour contrast and accessible typography.
Loading web fonts without slowing the site
Handled carelessly, web fonts delay readable text and make the page jump as they swap in, which can show up in Core Web Vitals as a slower Largest Contentful Paint or as layout shift.
Load fewer files
Each weight and style is usually a separate file, and most business sites need three or four: regular, italic, bold and perhaps a heading weight. A variable font packs many weights into one file but can be heavier than two static ones, so compare sizes. If a page asks for bold or italic and you haven’t loaded it, browsers fake it by thickening or slanting the regular style, which rarely looks good.
Self-host WOFF2
WOFF2 is the compressed format every current browser supports, and the only one most sites need. Self-hosting saves a connection to another server and keeps visitors’ IP addresses away from third parties. The old argument for shared font services, that visitors already have the file cached, no longer holds: browsers now keep a separate cache for each site. Subsetting removes unused characters, but on multilingual sites check that nothing you publish needs them.
Control what visitors see while fonts load
The font-display descriptor in your @font-face rules sets this:
swapshows text straight away in a fallback font, then swaps in the web font. A good default.optionaluses the web font only if it is available almost immediately, for example from the cache. Best when stability matters more than the exact font on a first visit.
Preload only the one or two files needed at the top of the page. To shrink the jump when fonts swap, choose a fallback with similar proportions and tune it with size-adjust and the related @font-face descriptors.
System fonts are a valid choice
A system font stack, starting with system-ui, uses the typeface already on each device, so there is nothing to download and script coverage is usually broad. The trade-off is control: text appears in each platform’s own typeface, such as San Francisco on Apple devices and Segoe UI on Windows, so the brand has to speak through layout, weight and colour.
Check the licence
Desktop and web licences are usually separate, and web licences are often priced by page views or domains. Some subscription services serve fonts only from their own servers and tie web use to an active subscription. Confirm in writing that your licence covers every domain and language version, self-hosting and subsetting.
What to do next
Use the short answer as a checklist for your current site, then run three quick tests:
Then lock the result into global styles in your theme or page builder, so editors pick “Heading 2” rather than 27px bold. That is the seed of a design system.
Planning a new site or a refresh? Settle type early: every template inherits it. In our website design and development work, typography is part of the design in your brand that you approve before anything is built. If heavy font files or cramped text on phones may be holding your site back, a free website audit reviews its speed and mobile experience and shows what to fix first.