Typography

Typographical selections intended to meet the highest standards of usability and accessibility, while setting a consistent look and feel in order to convey credibility.

Typography tokens and styles

We have defined a set of typography styles to guide designers in selecting appropriate type treatments for clinical applications. These styles help ensure consistency, readability, and hierarchy across products. All styles are available in the clinical design system UI Kit

For developers, semantic typography tokens and complex tokens are currently available to implement these styles.

Fonts

For clinical applications, we recommend using only sans-serif fonts to ensure optimal readability.

Source Sans Pro

Source Sans Pro is an open-source sans serif typeface created for legibility in UI design. With a variety of weights that read easily at all sizes, Source Sans Pro provides clear headers as well as highly-readable body text.

Inspired by twentieth-century American gothic typeface design, its slender but open letters offer a clean and friendly simplicity. Advanced hinting allows Source Sans Pro to render well on Windows systems which run Cleartype, and across browsers and devices. Moreover, it supports a variety of languages and alphabets, including Western and European language, Vietnamese, pinyin Romanization of Chinese, and Navajo.

Complex tokens

Complex typography tokens exist to bridge design and code, making it easier to apply consistent type styles without manually combining multiple semantic tokens. They are delivered as CSS classes and SASS mixins that bundle values such as font family, size, weight, and line height into a single reference. Each token is named to match the corresponding style in Figma, ensuring design and implementation stay aligned.

For designers: Use the Figma styles directly when creating layouts. These styles map one-to-one with the complex tokens so your designs remain consistent with production.

For developers: Apply tokens either as CSS classes in markup or as SASS mixins in stylesheets. This ensures that styles match what is defined in Figma while keeping implementation flexible.

About font styles

Our font styles were developed in collaboration with product designers working on applications that support clinical staff across the VHA. The styles are designed to establish a clear typographic hierarchy, with a range that includes smaller font sizes to accommodate various interface needs without sacrificing clarity or consistency.

Our design system uses a base font size of 16px (1rem). This ensures consistency in typography and layout across all applications. Custom base font sizes are not supported. By maintaining a fixed base size, we help ensure predictable calculations, alignment, and accessibility throughout clinical environments.

An xs font size is available for cases where content must be smaller than the sm style, but it should be used sparingly and only when absolutely necessary.

Examples

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body lg
Body md
Body emphasized
Body
Body sm emphasized
Body sm
Body xs emphasized
Body xs

Semantic tokens

Semantic typography tokens define the individual building blocks of type—such as font size, weight, and line height—that make up our system. While these tokens remain available, we recommend using complex typography tokens whenever possible, since they map directly to Figma styles and provide a complete, consistent type treatment out of the box. Semantic tokens should only be used in edge cases where your application has a need that is not met by the defined complex tokens. In these situations, semantic tokens give you the flexibility to apply or adjust specific properties while still staying within the boundaries of our design system.

For designers: Continue to rely on Figma styles, which are aligned to complex tokens. Avoid designing with semantic tokens directly unless you are working through a unique use case that cannot be covered by the defined styles.

For developers: Use semantic typography tokens only when defined as needed by design. Apply complex tokens through CSS classes or SASS mixins to ensure alignment with the design system.

Using semantic font tokens

Font tokens can be imported in your code as follows:

Source file location: ./dist/core/tokens/fonts

Example usage:

@use '@department-of-veterans-affairs/clinical-design-system/dist/core/tokens/fonts' as fonts;

.selector {
  font-family: fonts.$vacds-font-family-heading;
}

Font family tokens

A serif font token, $font-family-serif, is available in the system for legacy support, but it is not recommended for use in clinical applications due to readability concerns.

Font size tokens - Headings

Font size tokens - Body

Line heights

To ensure readability at larger sizes, our heading and body styles use distinct line heights.

Deprecated tokens

Note: The font family tokens below are legacy tokens and will be deprecated in a future release (date to be determined). Designers and developers should use the current semantic typography tokens moving forward to ensure consistency across products.