Typography
Please take a moment to rate the overall quality of our framework. Your feedback helps us prioritize improvements and better meet developer needs. Typography gives the brand its voice. The choice of fonts and their hierarchy help express personality. Whether bold or calm. This section shows how to use type clearly and consistently.
Primary typeface
12 styles
Font family
Urbanist family
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789
Thin
Light
Regular
Medium
Semibold
Extra bold
Thin Italic
Light Italic
Italic
Medium Italic
Bold
Black
Secondary typeface
1 style
Aa
Font
Saleho
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Typescale
9 styles
Saleho
84px
Letter spacing
0px
Line height
140%
Saleho
64px
Letter spacing
0px
Line height
130%
Saleho
44px
Letter spacing
0px
Line height
130%
Urbanist Semi bold
36px
Letter spacing
0px
Line height
140%
Title screen
Urbanist Semi bold
24px
Letter spacing
0px
Line height
132%
Title section
For dividing your screen into sections. It pairs with large body.
Urbanist Semi bold
20px
Letter spacing
0px
Line height
128%
Title subsection
For sections within sections to increase the information hierarchy.
Urbanist Medium
18px
Letter spacing
0px
Line height
150%
Title body
For large amounts of content. Pairs with large body and default body
Urbanist Regular
16px
Letter spacing
0px
Line height
150%
Body large
For paragraphs. Pairs with screen title and section title.
Urbanist Regular
14px
Letter spacing
0px
Line height
140%
Body large
For paragraphs. Pairs with screen title and section title.