Typography
We created a fluid typographic scale to be used across all web projects.
The typographic scale has been mapped into Tailwind, enabling text content to be styled using CSS classes. As the global CSS sets most of the default text styles, it is rarely necessary to overwrite these. Use the utility classes listed below for specific edge cases.
Text sizes
Text sizes follow a fluid scale, meaning that text scales based on the size of the viewport and follows a sizing ratio.
Usage
| Utility Class | CSS Custom Property |
|---|---|
.text-sm | var(--text-sm) |
.text-base | var(--text-base) |
.text-lg | var(--text-lg) |
.text-xl | var(--text-xl) |
.text-2xl | var(--text-2xl) |
.text-3xl | var(--text-3xl) |
.text-4xl | var(--text-4xl) |
.text-5xl | var(--text-5xl) |
.text-6xl | var(--text-6xl) |
.text-7xl | var(--text-7xl) |
.text-8xl | var(--text-8xl) |
Leading
Usage
| Utility Class | CSS Custom Property |
|---|---|
.leading-flat | var(--leading-flat) |
.leading-fine | var(--leading-fine) |
.leading-standard | var(--leading-standard) |
.leading-loose | var(--leading-loose) |
.leading-fluid | var(--leading-fluid) |
Font weights
Usage
| Utility Class | CSS Custom Property |
|---|---|
.font-light | var(--font-light) |
.font-normal | var(--font-normal) |
.font-medium | var(--font-medium) |
.font-semibold | var(--font-semibold) |
.font-bold | var(--font-bold) |
.font-extrabold | var(--font-extrabold) |
.font-black | var(--font-black) |
Fonts
Usage
| Utility Class | CSS Custom Property |
|---|---|
.font-display | var(--font-display) |
.font-base | var(--font-base) |
.font-serif | var(--font-serif) |
.font-mono | var(--font-mono) |