Web Typography That Feels Considered (Not Just Picked from Google Fonts)
Type is the most under-leveraged design surface in most Sydney small business websites. Here's how to choose, pair, and set type so the site reads as premium - without paying premium prices.
Type is 95% of every website. We notice colour and imagery first, but we read type. It carries more of the brand impression than almost any other design decision.
Yet on most small business sites in Sydney, type is the most neglected design surface. Default Bootstrap or Tailwind sans-serif. A Google Font picked in five minutes. Line height too tight. Sizes that don’t have a system. Headlines that feel generic at a glance.
Here’s how to set type so a site reads as considered, without spending a fortune on custom fonts.
The two-typeface system
The strongest small-business sites we work with use two typefaces. Almost never one (too monotone), almost never three (too busy unless deliberate).
The classic pairing is one display face for headlines and one body face for everything else. Each does what it’s best at.
What makes a good display face
- Strong, opinionated character - it should look like something, not nothing
- Works well at large sizes (60–120px on hero headlines)
- Has personality that aligns with the brand
- Renders well in regular and bold weights
Common display choices that work in 2026: Instrument Serif, Cormorant Garamond, PP Editorial, Migra, GT Sectra, Inter Display, Geist Mono (for tech brands).
What makes a good body face
- Excellent legibility at 16–18px
- Multiple weights (400 / 500 / 600 / 700 minimum)
- Solid character set (multilingual, all punctuation)
- Subtle personality that doesn’t fight the display face
- Decent at small sizes (12–14px for captions)
Common body choices that work: Inter, Geist, General Sans, Plus Jakarta Sans, IBM Plex Sans, Söhne.
Pairing principles
The pairings that work tend to follow one of three patterns:
Contrast pairing
A serif display + a sans body. The contrast is the point - formal and friendly, traditional and modern.
Examples: Instrument Serif + Inter. PP Editorial + Geist. Cormorant Garamond + Plus Jakarta Sans.
Sibling pairing
Both faces from the same family, or by the same foundry. They share design DNA but have different roles.
Examples: Inter + Inter Display. General Sans + GT Walsheim. Söhne + Söhne Display.
Editorial pairing
A serif body with a sans display (the inverse of contrast). Reads like a magazine. Rare but striking when done well.
Examples: Inter + Source Serif. Geist + GT Sectra Display.
What free fonts can do (and where they stop)
Google Fonts in 2026 has dramatically better quality than 5 years ago. The bar for what’s possible for free is high:
- Inter is excellent. Used by Vercel, Linear, hundreds of premium sites.
- Geist (by Vercel) is one of the best free families currently available.
- Plus Jakarta Sans has elegant character, especially in display weights.
- Instrument Serif brings real editorial character.
- Manrope, Public Sans, IBM Plex - all reliable workhorses.
What free fonts often lack:
- Character set depth. Some lack proper alternates, ligatures, small caps, true italic.
- Variable font versions for the lighter weights or mono variants.
- Display vs. text versions. A face optimised for both 14px and 80px is hard to find for free.
For most Sydney small businesses, Google Fonts can deliver a polished, premium-feeling site if chosen carefully. Foundry licenses become relevant for premium brands ($300–$1,500 for a quality desktop+web license), and even then often only for the display face.
Sizing systems
Most sites have type sizes scattered randomly through the design. A system makes type feel intentional.
The simplest working system:
| Token | Size | Use |
|---|---|---|
xs | 12px / 0.75rem | metadata, labels |
sm | 14px / 0.875rem | secondary text, captions |
base | 16px / 1rem | body text |
lg | 18px / 1.125rem | emphasised body, lede |
xl | 20–24px | small headings |
2xl | 28–32px | H4, prominent statements |
3xl | 40–48px | H3 |
4xl | 56–64px | H2 |
5xl | 72–96px | H1, hero headlines |
A fluid type scale using clamp() adapts these to viewport size automatically. CSS variables make swapping the whole scale a one-line change.
Line height that breathes
Line height has more impact on readability than font choice does. Defaults are usually wrong:
- Body text: 1.6–1.75 (not the browser default 1.2)
- Headlines: 1.0–1.15
- Captions and small text: 1.4–1.5
Tight headlines and loose body text is the standard pattern. The eye needs room to scan between body lines but wants headlines to feel like a unit.
Measure: the unsung hero
“Measure” is the typographer’s word for line length. Optimal measure for English body text is 45–75 characters per line. Most websites blow this out - full-width paragraphs at 1200px wide are 120–140 characters, which is exhausting to read.
Set a max-width: 70ch on body content. Or set article columns to ~700–760px wide. Long lines kill comprehension and engagement.
Font loading without flashing
Web fonts that swap from a fallback font to the web font cause layout shift unless handled carefully. The modern approach:
Use font-display: swap
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-display: swap;
}The text is visible immediately in the fallback font, then swaps when the web font loads. No invisible-text-then-flash.
Preload critical fonts
<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>This tells the browser to load the font early, before discovering it in the stylesheet.
Match fallback metrics
Modern CSS lets you tune the fallback font’s metrics to match the web font, so the swap doesn’t cause layout shift:
@font-face {
font-family: 'Inter Fallback';
src: local('Arial');
size-adjust: 107%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}Tools like Capsize (capsizecss.com) compute these values for you.
Display fonts as actual differentiators
The clearest, easiest way to make a site feel premium is one bold typographic choice. Some patterns:
- A large italic serif for the headline, paired with restrained sans body. (See: most modern editorial-feel sites.)
- A wide, geometric display sans for hero copy, paired with a humanist sans body. (See: tech brand sites like Linear, Vercel.)
- A mono display font for tech/dev brands. (See: developer tool brands.)
- Mixed case + small caps for elegant sections. (See: many B2B premium sites.)
The choice itself doesn’t matter as much as the consistency. Pick a system and apply it everywhere.
Common mistakes we see weekly
- All-caps body text. Hurts readability badly. Use for short labels only.
- Tracking on body text. Letters spaced out look “elegant” but read worse. Reserve for headlines or labels.
- Italics for emphasis in display. Italicising 80px Helvetica looks like a bug. Use a serif italic display face deliberately, or skip italics in headlines.
- Too many weights loaded. Loading 8 weights of a single family adds 300KB+ for no usability benefit. Load 2–3 weights, max.
- Decorative fonts for body. Hand-drawn or script faces are not body type. Use them as accents only.
- The wrong x-height. Some fonts (Garamond, Caslon) have small x-heights and need bigger sizes for the same readability. Others (Inter, Avenir) have large x-heights and feel right at smaller sizes.
A quick audit you can do today
Open your current site. For 90 seconds, just look at the type.
- Does the headline have presence, or does it feel generic?
- Is the body easy on the eye at the default size?
- Are line lengths comfortable, or do they sprawl across the screen?
- Is there a sense of hierarchy, or does everything blur into one weight?
- Does the overall typographic voice match the brand?
If two or more of those answers are unflattering, type is the highest-leverage thing you could fix on the site. Often a 4-hour typography refinement pass makes a bigger difference than a full visual redesign.
Want a free typography audit of your site? Send us your URL - we’ll send back specific font pairings and sizing recommendations for your business.