---
title: Fonts and Typography
tags: Site Settings
---

# Typography

[Primary Typography](https://www.figma.com/file/K7ejO2iz7kbjQuRitcI52O/?node-id=16%3A218)

## Web Fonts

The Design System is built to use [Google Web Fonts](https://fonts.google.com/). The system also uses the `font-family` CSS property, which specifies a list of fonts, from highest priority to lowest.

Font selection is done one character at a time, so that if an available font does not have a glyph for a needed character, the other fonts are tried. When a font is only available in some styles, variants, or sizes, those properties may also influence which font family is chosen.

* The Design System’s primary font is fixed to [Poppins](https://fonts.google.com/specimen/Poppins).
* The Brand typeface is declared Font-Family Secondary.

Custom fonts are not allowed in the system.

### Typography Tokens

[Typography Tokens](https://www.figma.com/file/K7ejO2iz7kbjQuRitcI52O/?node-id=16%3A218)

Typography tokens are used to maintain a consistent set of font styles throughout websites. Below you can see how tokens are used to manage font size, weight, line height, letter spacing and more.

**Font Size**


**Font Weight**


**Line Height**


**Letter Spacing**


**Style**


**Alignment**


**Font-Family**


### Brand Font Chart

Character styles are assigned to components using font-family secondary. The full list of all the character styles which change to the selected brand Google font.


**Size options for each character styles**

| Style | XXS | XS | SM | MD | LG | XL & XXL |
| ----- | --- | -- | -- | -- | -- | -------- |
| nav-menu_link-active |  |  |  |  |  |  |
| nav-menu_link-hover |  |  |  |  |  |  |
| nav-menu_link-sub-link |  |  |  |  |  |  |
| top-link_regular |  |  |  |  |  |  |
| Top-link_medium |  |  |  |  |  |  |
| Top-link_underline |  |  |  |  |  |  |
| toggle-link |  |  |  |  |  |  |
| jumplink_bold |  |  |  |  |  |  |
| jumplink_regular |  |  |  |  |  |  |
| list-number |  |  |  |  |  |  |
| footer_regular |  |  |  |  |  |  |
| footer_regular-underline |  |  |  |  |  |  |
| footer_bold |  |  |  |  |  |  |
| isi-body_regular |  |  |  |  |  |  |
| isi-body_bold |  |  |  |  |  |  |
| isi-header_CAPS |  |  |  |  |  |  |
| isi-header_regular |  |  |  |  |  |  |
| display_number |  |  |  |  |  |  |
| display_percentage |  |  |  |  |  |  |