Typography

See brand colors

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

Tag
Typeface
Font Size
Line-height
Font Weight
Use Case
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"