Fonts on the Web
Summary:
Fonts play a significant role in the presentation, readability, accessibility, branding, and performance of modern websites. This article explores the various types of fonts available to web developers, how and when to use them, compatibility considerations across different browsers and devices, and the legal implications of using commercial and open-source typefaces on the web.
Context
Typography is one of the most influential aspects of web design. While content remains the primary reason visitors access a website, the selection and implementation of fonts directly affect how easily that content can be consumed.
Early websites were limited to a small collection of fonts commonly installed on operating systems. Advances in browser technology and web standards introduced downloadable web fonts, allowing designers to establish stronger branding and greater visual consistency across different devices.
Today, fonts are not only a design consideration but also a technical, accessibility, performance, and licensing concern.
Understanding Font Categories
Serif Fonts
Serif fonts include small decorative strokes, known as serifs, at the ends of characters.
Examples include:
- Times New Roman
- Georgia
- Baskerville
- Canela
Characteristics:
- Traditional appearance
- Professional and authoritative
- Often associated with books, newspapers, and luxury brands
Common uses:
- Editorial websites
- Long-form reading
- Branding
- Headlines and hero banners
Sans-Serif Fonts
Sans-serif fonts omit decorative strokes and generally provide a cleaner appearance on screens.
Examples include:
- Arial
- Helvetica
- IBM Plex Sans
- Inter
- Verdana
Characteristics:
- Modern appearance
- Highly legible
- Excellent for user interfaces
Common uses:
- Application interfaces
- Navigation systems
- Forms
- General website content
Monospace Fonts
Monospace fonts allocate equal horizontal space to every character.
Examples include:
- IBM Plex Mono
- Consolas
- Courier New
Characteristics:
- Predictable character positioning
- Improved readability for code and technical data
Common uses:
- Source code examples
- Terminal output
- Configuration files
- Technical documentation
Display Fonts
Display fonts are designed to attract attention and are most effective at larger sizes.
Examples include:
- Canela
- Playfair Display
- Bodoni
Characteristics:
- Distinctive styling
- Strong visual impact
- Branding focused
Common uses:
- Headlines
- Advertising
- Brand identities
- Marketing campaigns
Display fonts should generally be avoided for large blocks of body text.
Script and Handwritten Fonts
These fonts emulate handwriting, calligraphy, or penmanship.
Characteristics:
- Decorative
- Informal
- Highly expressive
Common uses:
- Invitations
- Event websites
- Creative portfolios
Due to readability concerns, script fonts should be used sparingly.
Choosing the Right Font
Consider the Purpose of the Website
Different types of websites benefit from different typography choices.
| Website Type | Typical Font Choice |
|---|---|
| Corporate | Sans-serif |
| Technical Documentation | Sans-serif and Monospace |
| Luxury Brand | Serif and Sans-serif combination |
| News and Editorial | Serif |
| Web Applications | Sans-serif |
Establish a Font Hierarchy
A clear hierarchy improves readability and helps users identify content structure.
Example:
Brand Headings : Canela Body Content : IBM Plex Sans Code Examples : IBM Plex Mono
A consistent hierarchy improves both usability and maintainability.
Use Fonts Consistently
Limiting a website to a small number of complementary fonts creates a more professional appearance.
Most websites can achieve excellent results using:
- One branding font
- One body font
- One monospace font
Web Font Technologies
System Fonts
System fonts are already installed on a user's device.
Example:
font-family: Arial, Helvetica, sans-serif;
Advantages:
- Fast loading
- No external dependencies
- Excellent compatibility
Disadvantages:
- Limited branding opportunities
- Inconsistent appearance between operating systems
Web Fonts
Web fonts are downloaded by the browser when required.
Common formats include:
- WOFF2
- WOFF
- TTF
- OTF
WOFF2 is currently the preferred format because it provides excellent compression and browser support.
Self-Hosted Fonts
Self-hosting allows organizations to serve font files from their own infrastructure.
Advantages:
- Full control
- Reduced third-party dependencies
- Enhanced privacy
- Predictable availability
Disadvantages:
- Requires management and maintenance
- Licensing obligations remain the responsibility of the website owner
Third-Party Font Services
Examples include:
- Google Fonts
- Adobe Fonts
Advantages:
- Simple deployment
- Managed updates
- Wide font selection
Disadvantages:
- External dependency
- Potential privacy implications
- Service availability outside the organization's control
Performance Considerations
Fonts Are Downloadable Assets
Font files contribute to overall page weight.
Common mistakes include:
- Loading excessive font families
- Loading unnecessary weights
- Loading italic variants that are never used
Only load resources that provide genuine value.
Provide Meaningful Fallbacks
A fallback stack allows content to remain readable while a font is loading or when a font is unavailable.
Example:
font-family: 'Canela', 'Playfair Display', Georgia, serif;
This approach ensures graceful degradation when custom fonts cannot be loaded.
Use font-display
The font-display property controls how browsers display text while web fonts load.
Example:
@font-face {
font-family: 'Canela';
src: url('/fonts/canela.woff2') format('woff2');
font-display: swap;
}
Using swap allows text to be displayed immediately using fallback fonts and replaced when the preferred font becomes available.
Progressive Enhancement
A useful approach is:
- Deliver readable content using fallback fonts.
- Detect enhanced browser capabilities.
- Apply enhancement classes when appropriate.
- Allow CSS to control presentation.
For example:
document.documentElement.classList.add('fonts-loaded');
.fonts-loaded .brand {
font-family: 'Canela', serif;
}
This approach separates capability detection from presentation concerns.
Accessibility Considerations
Prioritise Readability
The primary purpose of text is communication.
Fonts should remain readable across:
- Desktop systems
- Mobile devices
- High-resolution displays
- Older hardware
Avoid Decorative Body Fonts
Many display and script fonts become difficult to read when used extensively.
Decorative fonts should generally be reserved for:
- Headers
- Pull quotes
- Branding elements
Character Recognition
Some typefaces make it difficult to distinguish between:
I l 1
or:
O 0
This is particularly important in technical documentation and software interfaces.
Respect User Preferences
Users may:
- Increase font sizes
- Override fonts
- Apply high-contrast modes
- Use custom stylesheets
Websites should continue to function correctly under these conditions.
Browser and Compatibility Considerations
Older Browsers
Not all browsers support:
- WOFF2
- Variable fonts
- Advanced OpenType features
Fallbacks should always be provided.
Variable Fonts
Variable fonts store multiple font weights and styles within a single file.
Advantages:
- Reduced network requests
- Flexible typography
- Simplified management
Disadvantages:
- Potential compatibility concerns on older platforms
Graceful Degradation
A website should remain readable when:
- Fonts fail to load
- JavaScript is unavailable
- Network conditions are poor
Typography should enhance content rather than become a requirement for accessing it.
Legal and Licensing Considerations
Fonts Are Software
Many developers overlook the fact that fonts are licensed software.
A font licence may define:
- Installation limits
- Distribution rights
- Modification rights
- Embedding permissions
- Web usage restrictions
Failure to comply with licence terms may result in legal liability.
Desktop Licences
A desktop licence typically permits the installation of a font on a specified number of computers.
Common uses include:
- Business cards
- Stationery
- Printed brochures
- PDF generation
Web Licences
Many commercial foundries require a separate licence for website usage.
Web licences may be based upon:
- Monthly visitors
- Page views
- Domain names
- Organisation size
It is common for a font to require both a desktop licence and a separate web font licence.
Open Source Fonts
Examples include:
- IBM Plex
- Inter
- Source Sans
- Source Serif
Advantages:
- No visitor limits
- Easy self-hosting
- Flexible redistribution terms
Developers should still review the relevant licence terms.
Verify Font Sources
Not every website offering "free fonts" distributes them legally.
Before using a font:
- Verify the source.
- Review the licence.
- Confirm commercial usage rights.
- Obtain fonts directly from the foundry whenever possible.
Design and Architecture Considerations
Build a Typography System
Rather than selecting fonts on a page-by-page basis, define clear roles.
Example:
Brand Font UI Font Body Font Code Font
This approach improves consistency and maintainability.
Use Typography to Reinforce Brand Identity
Fonts communicate personality.
A luxury brand may favour:
- Canela
- Baskerville
- Garamond
A technical platform may favour:
- IBM Plex Sans
- Inter
- Source Sans
The chosen typography should support the message and audience.
Separation of Concerns
A useful architectural principle is:
JavaScript determines capability. CSS determines presentation.
For example, JavaScript may identify browser capabilities and apply a CSS class, while CSS determines how the page should be rendered.
This creates a clean separation between behaviour and presentation.
Common Pitfalls
- Loading too many fonts
- Using display fonts as body text
- Failing to provide fallbacks
- Ignoring licensing requirements
- Relying entirely on third-party font services
- Blocking page rendering with font downloads
- Prioritising aesthetics over readability
Design Philosophy
The primary objective of a website is to deliver information and functionality. Typography should enhance that experience rather than obstruct it.
A well-designed website:
- Remains usable without custom fonts
- Loads quickly
- Provides meaningful fallbacks
- Respects accessibility requirements
- Uses typography consistently
- Enhances capable browsers through progressive improvement
Good typography is not merely decoration; it is a component of information architecture.
Conclusion
Fonts affect far more than visual appearance. They influence readability, accessibility, branding, performance, compatibility, and legal compliance.
Successful web typography balances aesthetics with practicality by selecting appropriate typefaces, implementing fallbacks, respecting user preferences, optimising performance, and complying with licensing requirements.
By treating custom fonts as enhancements rather than dependencies, developers can create websites that remain both attractive and resilient across a wide range of devices and environments.
