Typography

5 min read

When working with typography on the web, careful consideration of type choices can have a significant impact on readability, aesthetics, and performance. These are the major points I focus on to ensure typography is clean, accessible, and effective for any project.

Choose Web-Safe Fonts, Local hosted, or Use Reliable Font Delivery

While custom fonts can enhance the design, one should also weigh performance and compatibility. Web-safe fonts like Arial, Helvetica, and Georgia are reliable, but if I use custom fonts, I stick to trusted services like Google Fonts or Adobe Fonts. These platforms ensure fonts render properly across devices and browsers.

To avoid potential issues with Google Fonts’ EULA, I recommend self-hosting Google Fonts. Download the font files directly from Google Fonts, serve them from your server, and declare them in your CSS using @font-face. This method ensures you’re not relying on third-party services, which can also improve performance and avoid any legal complications with font loading.

Example setup for self-hosting:

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto-regular.woff2') format('woff2'),
       url('/fonts/roboto-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

Limit the Number of Fonts

I limit the number of typefaces to two or three at most. Too many fonts can create visual clutter and slow down load times. A good pairing between a heading font, body font, and possibly an accent font helps create a consistent design.

Establish a Typography Scale

One of the best ways to ensure consistent and harmonious typography is by using a typographic scale. A scale establishes ratios between font sizes that can be applied to headings, body text, and smaller elements like captions. I often start with a 1.25 ratio (Major Third), meaning each level up the hierarchy is 1.25 times the size of the one below. This approach creates a logical rhythm throughout the design. This website is using the Major Third scale, which was calculated using the free generator tool typescale.com. Another good one is precise-type.com.

Here’s some recommended readings on the subject:

Accessibility Considerations

Set a Base Font Size for Accessibility

Readability is key, so I aim for a minimum base font size of 16px for body text. This size works well on most devices, and I make sure the design allows users to resize text without breaking the layout, improving accessibility for everyone.

Use Relative Units for Font Sizing

I use relative units like for scalable font sizing. This method adapts better across different screen sizes and devices, improving responsiveness. A base size set in rem allows for easy scaling throughout the design, which is super important when a user has adjusted their own browser base size because of visual impairments.

Leveraging System Fonts for Enhanced Accessibility

For site’s with a very large user base, or those working in the public sector, I try to use system fonts for Using a user’s system default fonts can be a valuable accessibility consideration, particularly for individuals with vision impairments or dyslexia. When we rely on system fonts, we respect the user’s customized settings, allowing them to engage with text in a way that suits their specific needs. For example, someone with dyslexia might have set their device to use a font like OpenDyslexic, which they find easier to read, even though research on its effectiveness shows disappointing results. By allowing these preferences to persist, we create a more inclusive web experience that adapts to each person’s unique requirements, enhancing comfort and usability.

Prioritize Readability Over Style

While custom fonts and stylish typefaces can make a site visually appealing, I prioritize readability. For body text, I stick to sans-serif or serif fonts that are easy to read across devices. Decorative fonts can be used for accents, but they should never compromise the clarity of the main content.

Take Advantage of Variable Fonts

Variable fonts offer a huge advantage for performance and flexibility. Instead of loading multiple font weights or styles, you load a single font file that adjusts dynamically. This reduces the number of font files loaded on your site, improving performance, and provides more flexibility in design. For example, instead of loading regular, bold, and italic versions separately, you load one variable font and manipulate its weight, slant, or width with CSS.

h1 {
  font-variation-settings: 'wght' 700, 'wdth' 100;
}
p {
  font-variation-settings: 'wght' 400;
}

Google fonts is a great resource to find free variable fonts, and they have a knowledge base of articles as well:

Adjust Line Height and Letter Spacing

Spacing is crucial for readability. I use a line height of 1.5 for body text to create breathing room, ensuring that text doesn’t feel cramped. For headings, adjusting letter spacing (tracking) can give text a cleaner, more refined look, especially at larger sizes.

Optimize Font Loading for Performance

Fonts can significantly affect load times, so I optimize their loading with techniques like font-display: swap in CSS. This allows fallback fonts to be displayed while custom fonts load in the background, avoiding the Flash of Invisible Text (FOIT) issue that can disrupt the user experience.

In Sum

By following these best practices, I can ensure that typography on the web not only enhances the aesthetic of a site but also improves its readability, performance, and accessibility. Thoughtful choices in font usage, scaling, and optimization create a seamless experience for users.