Typography
Typography is used to maintain a consistent set of font styles throughout your app.
Font family#
The default font stack is simple and elegant, and has a lot of fallbacks if the main font isn’t available.
| Design token | Default value | Example |
|---|---|---|
--pc-font-sans | "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", "Roboto", "Open Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | Sphinx of black quartz, judge my vow. |
--pc-font-serif | "Playfair Display", "Georgia", "Times New Roman", serif | Sphinx of black quartz, judge my vow. |
--pc-font-mono | "JetBrains Mono", "Source Code Pro", "IBM Plex Mono", "Consolas", "Menlo", monospace | Sphinx of black quartz, judge my vow. |
--pc-font-math | "STIX Two Math", "Cambria Math", "Times New Roman", serif |
Font size#
Our font size system uses the major second ratio (): smaller sizes scale down linearly by , while larger sizes scale up by the squared ratio () to maximise visual impact.
Each value uses rem units and is rounded to the nearest whole pixel when rendered with round().
You can use --pc-font-size-scale to increase or decrease all font sizes at once. By default, this multiplier is 1.
| Custom property | Default value | Example |
|---|---|---|
--pc-font-size-xxs | round(calc(var(--pc-font-size-xs) / 1.125), 1px) (11 px) | AaBb |
--pc-font-size-xs | round(calc(var(--pc-font-size-s) / 1.125), 1px) (12 px) | AaBb |
--pc-font-size-s | round(calc(var(--pc-font-size-m) / 1.125), 1px) (14 px) | AaBb |
--pc-font-size-m | round(calc(1rem * var(--pc-font-size-scale)), 1px) (16 px) | AaBb |
--pc-font-size-l | round(calc(var(--pc-font-size-m) * 1.125 * 1.125), 1px) (20 px) | AaBb |
--pc-font-size-xl | round(calc(var(--pc-font-size-l) * 1.125 * 1.125), 1px) (25 px) | AaBb |
--pc-font-size-xxl | round(calc(var(--pc-font-size-xl) * 1.125 * 1.125), 1px) (32 px) | AaBb |
--pc-font-size-xxxl | round(calc(var(--pc-font-size-xxl) * 1.125 * 1.125), 1px) (41 px) | AaBb |
--pc-font-size-xxxxl | round(calc(var(--pc-font-size-xxxl) * 1.125 * 1.125), 1px) (52 px) | AaBb |
You can also use these two custom properties to make any font size proportionately smaller or larger to its parent.
| Custom property | Default value |
|---|---|
--pc-font-size-smaller | round(calc(1em / 1.125), 1px) |
--pc-font-size-larger | round(calc(1em * 1.125 * 1.125), 1px) |
Font weights#
Font weights range from 300 (Light) to 700 (Bold), letting you fine‐tune emphasis. Our default variable fonts support any value in this range, while other non‐variable fallbacks may use standard weight tokens.
| Custom property | Default value | Example |
|---|---|---|
--pc-font-weight-light | 300 | Sphinx of black quartz, judge my vow. |
--pc-font-weight-normal | 400 | Sphinx of black quartz, judge my vow. |
--pc-font-weight-medium | 500 | Sphinx of black quartz, judge my vow. |
--pc-font-weight-semibold | 600 | Sphinx of black quartz, judge my vow. |
--pc-font-weight-bold | 700 | Sphinx of black quartz, judge my vow. |
Line height#
Line heights control the distance between lines of text and are unitless to scale proportionately with the font size. For readability, --pc-line-height-normal, recommended for paragraphs, should be 1.6 or greater.
| Custom property | Default value | Example |
|---|---|---|
--pc-line-height-denser | 1 | Sphinx of black quartz, judge my vow. Voix, jugez, ce vieux kip ! Wha ? Prix du blond. Prüft Hähnchen‐Xylofonmusik: Quark, Vögel, Jazz‐Blues, Nacht, Wurst. |
--pc-line-height-dense | 1.4 | Sphinx of black quartz, judge my vow. Voix, jugez, ce vieux kip ! Wha ? Prix du blond. Prüft Hähnchen‐Xylofonmusik: Quark, Vögel, Jazz‐Blues, Nacht, Wurst. |
--pc-line-height-normal | 1.8 | Sphinx of black quartz, judge my vow. Voix, jugez, ce vieux kip ! Wha ? Prix du blond. Prüft Hähnchen‐Xylofonmusik: Quark, Vögel, Jazz‐Blues, Nacht, Wurst. |
--pc-line-height-loose | 2.2 | Sphinx of black quartz, judge my vow. Voix, jugez, ce vieux kip ! Wha ? Prix du blond. Prüft Hähnchen‐Xylofonmusik: Quark, Vögel, Jazz‐Blues, Nacht, Wurst. |
--pc-line-height-looser | 2.6 | Sphinx of black quartz, judge my vow. Voix, jugez, ce vieux kip ! Wha ? Prix du blond. Prüft Hähnchen‐Xylofonmusik: Quark, Vögel, Jazz‐Blues, Nacht, Wurst. |
Links#
Together with --pc-color-link, these tokens add text decoration to <a> elements to signal their role as hyperlinks.
| Custom property | Default value |
|---|---|
--pc-link-decoration-default | underline dotted currentColor |
--pc-link-decoration-hover | underline solid currentColor |
--pc-link-decoration-active | underline solid currentColor |