Font atom

Atomic Components

This atom describes all characteristics of a font, such as the font family, color, and size. It contributes to the legibility and visual appearance of an app.

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