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