This is not a strict scale for h1-h5 but rather suggested combinations of font family, size and line height. Different sizes and font types can be applied based on context/component e.g. a h2 could use text-5xl or text-3xl, or you may apply text-3xl at mobile and text-5xl at desktop (text-3xl lg:text-5xl)
|
text-15xl - (128px)
Tailwind size: text-15xl
Tailwind font: font-heading (Soleil)
|
Display normal |
Display Bold |
|
text-14xl - (112px)
Tailwind size: text-14xl
Tailwind font: font-heading (Soleil)
|
Display normal |
Display Bold |
|
text-13xl - (96px)
Tailwind size: text-13xl
Tailwind font: font-heading (Soleil)
|
Display normal |
Display Bold |
|
text-12xl - (88px)
Tailwind size: text-12xl
Tailwind font: font-heading (Soleil)
|
Display normal |
Display Bold |
|
text-11xl - (80px)
Tailwind size: text-11xl
Tailwind font: font-heading (Soleil)
|
Display normal |
Display Bold |
|
text-10xl - (72px)
Tailwind size: text-10xl
Tailwind font: font-heading (Soleil)
|
Display normal |
Display Bold |
|
text-9xl - (64px)
Tailwind size: text-9xl
Tailwind font: font-heading (Soleil)
|
Display normal |
Display Bold |
|
text-8xl - (56px)
Tailwind size: text-8xl
Tailwind font: font-heading (Soleil)
|
Display normal |
Display Bold |
|
text-7xl - (48px)
Tailwind size: text-7xl
Tailwind font: font-heading (Soleil)
|
Display normal |
Display Bold |
|
text-6xl - (40px)
Tailwind size: text-6xl
Tailwind font: font-heading (Soleil)
|
Display normal |
Display Bold |
|
text-5xl - (36px)
Tailwind size: text-5xl
Tailwind font: font-heading (Soleil)
|
Display normal |
Display Bold |
|
text-4xl - (32px)
Tailwind size: text-4xl
Tailwind font: font-heading (Soleil)
|
Display normal |
Display Bold |
|
text-3xl - (28px)
Tailwind size: text-3xl
Tailwind font: font-heading (Soleil)
|
Display normal |
Display Bold |
|
text-2xl - (24px)
Tailwind size: text-2xl
Tailwind font: font-heading (Soleil)
|
Display normal |
Display Bold |
|
text-xl - (20px)
Tailwind size: text-xl
Tailwind font: font-heading (Soleil)
|
Display normal |
Display Bold |
|
text-lg - (18px)
Tailwind size: text-lg
Tailwind font: font-body (Soleil)
|
Display normal |
Display Bold |
|
text-base - (16px)
Tailwind size: text-base
Tailwind font: font-body (Soleil)
|
Display normal |
Display Bold |
|
text-sm - (14px)
Tailwind size: text-sm
Tailwind font: font-body (Soleil)
|
Display normal |
Display Bold |
|
text-xs - (12px)
Tailwind size: text-xs
Tailwind font: font-body (Soleil)
|
Display normal |
Display Bold |