Skip to main content
An official website of the United States government

Typography

Typography helps establish hierarchy which functions to present content clearly and efficiently to users by creating clear visual patterns. NCIDS supports 3 Google fonts, which are easy for designers to embed into Figma and developers to utilize in code.

You can download these fonts from Google Fonts:

These fonts and their properties have passed readability from user testing. Stakeholder workshops and user testing demonstrated a greater preference for sans-serif fonts. Poppins was selected for its welcoming and approachable design, while Open Sans was chosen as the body font due to its friendly appearance and legibility across various screen sizes and devices.

Poppins

Poppins is used for component Paragraph Styles and headings.

Open Sans

Open Sans is used for body text, descriptive text, buttons, and in other various component labels.

Roboto Mono

Roboto Mono is only used in code for any place that uses the mono style

For more information about font and text styles and how to change the appearance of text, please refer to the following pages: