---
# System prepended metadata

title: Fonts and Typography
tags: [Site Settings]

---

---
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**

![](https://hackmd.io/_uploads/rkMJZBuLq.png)

**Font Weight**

![](https://hackmd.io/_uploads/ryLReSd8q.png)

**Line Height**

![](https://hackmd.io/_uploads/B1C6eHuUc.png)

**Letter Spacing**

![](https://hackmd.io/_uploads/rkSTgB_Ic.png)

**Style**

![](https://hackmd.io/_uploads/HkMhlr_Uq.png)

**Alignment**

![](https://hackmd.io/_uploads/BJIsgBuL5.png)

**Font-Family**

![](https://hackmd.io/_uploads/rk_qlBOLq.png)

### 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.

![](https://hackmd.io/_uploads/BJDhcAGv5.png)

**Size options for each character styles**

| Style | XXS | XS | SM | MD | LG | XL & XXL |
| ----- | --- | -- | -- | -- | -- | -------- |
| nav-menu_link-active | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) |
| nav-menu_link-hover | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) |
| nav-menu_link-sub-link | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) |
| top-link_regular | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) |
| Top-link_medium | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) |
| Top-link_underline | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) |
| toggle-link | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) |
| jumplink_bold | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) |
| jumplink_regular | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) |
| list-number | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) |
| footer_regular | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) |
| footer_regular-underline | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) |
| footer_bold | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) |
| isi-body_regular | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) |
| isi-body_bold | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) |
| isi-header_CAPS | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) |
| isi-header_regular | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) |
| display_number | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) |
| display_percentage | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![no](https://hackmd.io/_uploads/SkSZJB_Uc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) | ![yes](https://hackmd.io/_uploads/SJ1GJBuIc.png) |
