Fonts shape how we read, trust, and remember information. A sharp font can lift a brand or help a form make sense at a glance. A clumsy one can slow people down. This guide explains what a font is, how it works on screen and in print, the main types you’ll see, and how to choose the right one for Aotearoa New Zealand—especially when you need macrons for te reo Māori, fast-loading web pages, and clear accessibility.
What is
A font is a specific digital file that draws letters, numbers, and symbols. It includes shapes (glyphs), spacing, and sometimes features like ligatures. A typeface is the broader design (for example, the Helvetica family). Fonts are the files within that design (for example, Helvetica Regular, Helvetica Bold Italic).
- Typography is the craft of arranging type—size, spacing, alignment, and hierarchy.
- Font family is the set of related fonts (weights, styles, widths) under one typeface.
- Character set is the range of supported characters, such as macrons ā, ē, ī, ō, ū used in te reo Māori.
When people say “font,” they often mean the whole typeface. In practice, that’s fine—just know the difference when you compare files, licences, and features.
How it works
Inside a font file
- Glyphs are vector outlines that scale cleanly at any size.
- Metrics control spacing: kerning pairs, side bearings, and line height.
- OpenType features add smarts: oldstyle numerals, tabular figures, ligatures, small caps, and stylistic sets.
- Hinting gives the rasteriser clues for crisp rendering at small sizes.
Common font formats
- TTF/OTF: desktop-friendly, widely supported, good for print and design apps.
- WOFF/WOFF2: web-first formats; WOFF2 compresses best for fast loading.
- Variable font (often .ttf or .woff2): a single file with axes like weight (wght) and width (wdth), replacing dozens of static files.
How a web font loads
- Your CSS declares @font-face with sources (WOFF2 first), weight ranges, and unicode-range if you subset.
- The browser downloads the font file, draws fallback text instantly (ideally), then swaps to the custom font when ready.
- Settings like font-display: swap help avoid “invisible text.”
Performance matters in New Zealand as much as anywhere: rural and remote connections can be patchy. Optimised web font delivery keeps pages fast across the motu.
Types / examples
Serif
Serifs have small strokes at the ends of letters. They’re steady, bookish, and strong for long reads.
- Examples: Georgia, Garamond, EB Garamond, Noto Serif.
- Good for: reports, print, editorial sites.
Sans-serif
Sans-serifs have clean ends and a modern feel. They’re workhorses for UI and responsive layouts.
- Examples: Inter, Source Sans 3, Roboto, Helvetica, Noto Sans.
- Good for: apps, dashboards, forms, signage.
Monospace
Every character takes the same width. Great for code and data alignment.
- Examples: Fira Code, JetBrains Mono, Consolas.
- Good for: code blocks, terminal-style branding, technical docs.
Script and display
Lively, expressive fonts for headlines and short bursts. Use sparingly for impact.
- Examples: Pacifico (script), Oswald (display), Playfair Display (high-contrast serif display).
- Good for: campaigns, posters, hero banners.
Variable font
One file, many styles. Adjust weight and width fluidly to match screens and layouts.
- Examples: Inter Variable, Source Serif Variable, Roboto Flex.
- Good for: performance, responsive design, fine-tuning hierarchy.
Emoji and colour fonts
These include colourful glyphs like 🇳🇿 or 😀. Browser support varies, so test before relying on them.
Pros and cons
By category
- Serif
- Pros: traditional tone, comfortable for long text, strong word shapes.
- Cons: can look busy in small UI elements; quality varies on low-res screens.
- Sans-serif
- Pros: clean, legible at small sizes, versatile for interfaces.
- Cons: can feel bland if poorly paired; some designs have narrow character sets.
- Monospace
- Pros: aligns numbers and code, technical clarity.
- Cons: slower reading for paragraphs; bulky in dense layouts.
- Display/script
- Pros: personality and impact for headlines.
- Cons: poor for body text; risks accessibility issues at small sizes.
- Variable fonts
- Pros: flexible styles in one file, fewer requests, granular control.
- Cons: needs careful setup; legacy browser fallbacks required.
Hosting and format comparison
| Option | Best for | Pros | Cons |
|---|---|---|---|
| System font stack | Maximum speed | No downloads; native feel; great performance | Less brand control; looks different across platforms |
| Self-hosted web font (WOFF2) | Brand control + speed | Fast when optimised; full control over caching and subsetting | Setup work; handle licences and updates yourself |
| Google Fonts | Open-source simplicity | Free; large library; easy to integrate; broad character support | Third-party request; may need subsetting for performance |
| Adobe Fonts | Premium libraries | High-quality options; automatic hosting | Subscription required; third-party dependency |
Web font formats compared
| Format | Use case | Support | Notes |
|---|---|---|---|
| WOFF2 | Modern web | All modern browsers | Smallest files; prefer this for speed |
| WOFF | Fallback for older browsers | Wide | Larger than WOFF2; include if needed |
| OTF/TTF | Desktop/print | Universal on OS | Not ideal to serve directly on web |
| Variable WOFF2 | Responsive web with one file | Modern browsers | Control weight/width axes; test fallbacks |
How to use or choose
Step-by-step: choosing a font for NZ audiences
- Define the job. Is it a government form, a school newsletter, a mobile app, or a brand refresh? Tone and tasks drive the choice.
- List the characters you need. Include macrons for Māori kupu (ā, ē, ī, ō, ū), currency symbols ($), and smart quotes.
- Start with the reading context. For dense text, favour a calm serif or humanist sans-serif. For UI, pick a clean sans with a tall x-height.
- Check legibility at small sizes. Test 14–18 px on mobile and desktop. Try headings, body, and buttons with real copy from your site.
- Inspect numerals. Choose tabular figures for tables, prices, and forms so numbers line up.
- Evaluate OpenType features. Look for macron support, proper diacritics, ligatures, and language settings.
- Plan performance. Prefer WOFF2, subset character sets if appropriate, and set font-display: swap to avoid invisible text.
- Confirm licensing. Open-source (for example, Google Fonts) is simple. For commercial fonts, read the webfont licence limits (page views, domains, apps).
- Prototype and test. Try two or three candidates, pair headings with body, and gather feedback from real users—including those using assistive tech.
- Document and implement. Record the chosen font family, sizes, line-height, spacing, and fallbacks, then add them to your design system.
Practical tips for New Zealand content
- Support te reo Māori properly. Pick a font with macrons that render clearly at text sizes.
- Aim for readable defaults: base size around 16 px or larger, line-height 1.4–1.7, and 45–90 characters per line.
- Use clear colour contrast between text and background to meet WCAG 2.1 AA or better.
- Fallbacks matter. If Inter fails to load, a system stack like -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif keeps the page usable.
- Consider bandwidth. Self-hosting WOFF2 with good caching helps regional users on slower links.
- Avoid using display or script fonts for long paragraphs. Keep them for short headings.
Implementing a web font well
- Serve WOFF2 first, then WOFF only if you truly need legacy coverage.
- Subset the font to required ranges (for example, Latin plus macrons) to shrink files.
- Use unicode-range to split files (core, extended, icons) so browsers download only what they need.
- Preload critical fonts for hero text, but avoid preloading too many weights.
- Prefer a variable font when you need many weights or widths—it can reduce total file size and requests.
FAQ
What is the difference between a font and a typeface?
A typeface is the design family (for example, Noto Sans). A font is a specific file within it (for example, Noto Sans Regular Italic). In casual speech, people often say “font” for both.
Which font is best for a CV in New Zealand?
Use a clear, professional font: Calibri, Georgia, Arial, Inter, or Source Sans 3. Keep body text around 11–12 pt (or 14–16 px) and use bold for headings, not all caps.
How big should body text be on the web?
Start at 16 px for body text and adjust by testing on real devices. Ensure enough line-height (1.4–1.7) and good contrast.
Do I need a font with macrons for te reo Māori?
Yes. Pick a font that includes macrons and renders them clearly. Test words like Māori, Ōtautahi, and Tāmaki Makaurau in headings and body sizes.
Are Google Fonts free for commercial use?
Yes. Google Fonts are open-source and free for personal and commercial projects. Always review the specific licence, but they are typically permissive.
Are variable fonts supported in modern browsers?
Yes. Current versions of major browsers support variable fonts. Provide sensible fallbacks for older browsers.
How can I make web fonts load faster?
Use WOFF2, subset character sets, set font-display: swap, cache fonts long-term, and limit the number of weights you load. Consider a system font stack if speed is the top priority.
Which fonts are best for accessibility?
Pick a clean, well-hinted serif or sans-serif with clear letterforms and wide character support. Maintain generous size, spacing, and contrast. Avoid long passages in all caps or light weights. Meet or exceed WCAG 2.1 AA.
Can I embed any desktop font on my website?
Not necessarily. Check the licence. Some desktop licences don’t allow web embedding. You may need a separate webfont licence or an open-source alternative.
What is a good fallback stack for a sans-serif web font?
Use a system stack such as: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif. It keeps text readable if your custom font fails.
Key takeaways
- Choose a font that fits the job, supports macrons, and stays clear at small sizes.
- For the web, prefer WOFF2 or a variable font, use font-display: swap, and keep weights to a minimum.
- Test with real NZ content and devices, and check licences before you ship.