An introduction to typography

Understand how and why to use type to improve user experience

What is typography?

Typography is the art of arranging type to make content easy to read and visually appealing. Typography is not just about choosing a font; it involves selecting typefaces, adjusting spacing, and organizing text to communicate your message.

By following typography best practices, you can ensure your website’s content is accessible and easy to find and understand.

Why focus on typography?

Effective typography improves user experience by seamlessly guiding users through content.

When choosing fonts, be sure to use one that is both aesthetically pleasing and functional in terms of size, spacing, and contrast.

Clear fonts help users quickly navigate and scan information on your website. For example, using larger font sizes for headings helps users quickly identify sections of content. And consistent spacing between lines improves readability.

Focusing on typography helps users engage with your content and take action, leading to increased satisfaction and retention rates.

How to select typography

A clean and clear visual presentation helps everyone make sense of your website's content and functionality.

When selecting typography, consider these essential elements:

  • Font size: Use a large enough font size for body text so that people can comfortably read. 
  • Line length: Maintain a line length that promotes comfortable reading.
  • Color contrast: Ensure there is sufficient contrast between the text color and the background color to help improve readability and accessibility.
  • Typefaces: Test typefaces in various contexts to ensure similar letterforms (such as “i” and “L”) are easily distinguishable for users.
  • Screen sizes and resolutions: Most interfaces require text elements (such as buttons, field labels, and section headers) of various sizes. Ensure the typefaces work well in multiple sizes and weights to maintain usability and readability across all screen sizes and resolutions.

Check out our accessibility recommendations for visual designers for more detailed information on these elements. 

Accessibility requirements

The Americans with Disabilities Act accessibility standards state, “Characters on the screen must be in a sans-serif font, at least 3/16 inch (4.8 mm) high based on the uppercase letter “I” and contrast with the background.” §707.7.2 Characters [on certain display screens]

The Section 508 Standards further state, “At least one mode of characters displayed on the screen shall be in a sans serif font. Where [technology] does not provide a screen enlargement feature, characters shall be 3/16 inch (4.8 mm) high minimum based on the uppercase letter “I”. Characters shall contrast with their background with either light characters on a dark background or dark characters on a light background.” §402.4 Characters on Display Screens [for ICT with closed functionality]

Visit Section508.gov to learn more about accessible fonts and typography.

What can I do next?

Explore the U.S. Web Design System to learn more about the relationship between font family, font size, and line height.

Note

The U.S. Web Design System ships with Public Sans: a simple, neutral typeface.

Public Sans — adapted from Libre Franklin — was designed by the Design System team. While it is no longer maintained, the source font files are available in the Public Sans GitHub repository under the SIL Open Font License.