Typography
Use typography to create hierarchy, readability, and make content clear.
Custom Font Sizes
Font sizes implemented using TWCSS
Class Name
Font Size
Line Height
text-base
16px
1.4
text-xs
12px
1.3
text-sm
14px
1.4
text-md
15px
1.4
text-lg
18px
1.5
text-xl
20px
1.6
text-2xl
24px
1.3
text-3xl
30px
1.3
text-4xl
30px
1.2
text-5xl
36px
1.3
Custom Typography
H1
Ivy Presto
Mobile 30px
Desktop 36px
Mobile 1.2
Desktop 1.2
font-normal
h1 / class="h1" / class="text-4xl md:text-5xl"H2
Ivy Presto
Mobile 24px
Desktop 27px
Mobile 1.3
Desktop 1.3
font-normal
h2 / class="h2" /class="text-2xl md:text-3xl"H3
Ivy Presto
Mobile 20px
Desktop 24px
Mobile 1.3
Desktop 1.6
font-normal
h3 / class="h3" /class="text-xl md:text-2xl"H4
Karla
Mobile 15px
Desktop 18px
Mobile 1.4
Desktop 1.5
font-semibold
h4 / class="h4" / class="text-md md:text-lg"body
Karla
Mobile 14px
Desktop 16px
Mobile 1.2
Desktop 1.25
font-normal
p / class="text-sm md:text-md"