Font Size and Family

Set the font size and the font family together.

NCIDS Fonts

To use the following Google fonts in your site, add the follow block into your HEAD

Recommended Way to Use Fonts

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
    href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;
    0,600;1,300;1,400;1,600&family=Poppins:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600
    &family=Roboto+Mono:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap"
    rel="stylesheet"
/>

The NCIDS/U.S. Web Design System (USWDS) provides design tokens and utilities to set font styles.

To download fonts, refer to the Typography page.

Font Family Tokens

The NCIDS uses the same font family tokens from the USWDS and contains Type and role-based tokens.

Type-based tokens are based on the available fonts, e.g. poppins or open-sans.

Role-based tokens use the type-based tokens and are based on the role the text will play. For example, button and other input text should use the ui role; web page content should use the body role.

Role-based tokens should be used whenever possible. The idea is to group like elements so that if the font family is changed, all those elements of that role change. This helps prevent scenarios where you want to change all heading items, for example, and need to find and change all header instances in your code. It’s likely that you will miss some headings if you are manually finding and updating all instances.

Type-based Tokens

NOTE: NCIDS does not use all USWDS type-based tokens.

Role-based tokens

Custom NCIDS Type Scale

Using utilities mixins

• Use single-quoted strings in utility mixins. Do not quote numbers or px values, with the exception of half (05) values like '05', '105', and '205' which should be treated as strings.
• String tokens for half values (05) and negative values (like neg-1)may also be written with their unquoted number token equivalent: 0.5, 1.5, 2.5, 2.5, -1, -1.5, etc
• If multiple utilities share the same prefix (ex: .text- or .flex-) or a single utility accepts multiple kinds of values (ex: .border accepts both border weight and border color), their shared mixin can accept multiple comma-separated values: u-text('primary-darkest', 'no-underline', 'bold') or u-border-top(2px, 'accent-warm').
• Output any utility mixin as !important by appending !important to the mixin’s argument list: u-bg('red-warm-50v', !important) Set the font weight using the u-text mixin or the font-weight function.

To set font size and family in Figma, refer to the section “Using Our Tokens and Utilities” in our Figma Guide.

Utility Modules