Design System

Font atom

This atom describes a font. It has a color, a type (font family) and a size depending on the device on which it is displayed.

For more information on the use of typography in templates and text levels, see: Foundation Font section.

JSON

Here’s the JSON format of this object:

{
"color": COLOR OBJECT,
"desktopSize": INT, // Size of the font on desktop devices, default value is size prop
"fontType": STRING, // Name of the font
"size": "16", // Size of the font
"tabletSize": "18", // Size of the font on tablet devices, default value is size prop
"urlFont": URL // Url to download the font, optional if the font is already in the project,
"localFont": URL // Url to download the font, used by Android platform
}

urlFont & localFont urls are preloaded by the compiler.

Documentation

Font Level Classification
DH1Display Heading 1NH1Navbar Heading 1
H1Heading 1NH2Navbar Heading 2
H2Heading 2NH3Navbar Heading 3
B1Body 1NB1Navbar Body 1
B2Body 2BT1Button 1
SB1Small Body 1BT2Button 1
SB2Small Body 2BT3Button 3
SBT1Badges
Font Size Reference Table

The table below references all font sizes used for all templates.

Example : B2 TM (Body 2 / Tablet / Medium text size) = 15 pt — Line spacing 18,75