Typography
Typography helps establish hierarchy by presenting clear visual patterns for different functions. The NCI Design System supports three 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 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: