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


DH1	Display Heading 1	NH1	Navbar Heading 1
H1	Heading 1	NH2	Navbar Heading 2
H2	Heading 2	NH3	Navbar Heading 3
B1	Body 1	NB1	Navbar Body 1
B2	Body 2	BT1	Button 1
SB1	Small Body 1	BT2	Button 1
SB2	Small Body 2	BT3	Button 3
		SBT1	Badges

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

Design System

Font atom

JSON

Documentation

Font Level Classification

Font Size Reference Table