Typography

Typography is used to maintain a consistent set of font styles throughout your app.

The default font stack is simple and elegant, and has a lot of fallbacks if the main font isn’t available.

Our font size system uses the major second ratio ($\text{r}=\mathrm{1,125}$): smaller sizes scale down linearly by $r$, while larger sizes scale up by the squared ratio ($r^2$) 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.

You can also use these two custom properties to make any font size proportionately smaller or larger to its parent.

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.

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.

Together with --pc-color-link, these tokens add text decoration to <a> elements to signal their role as hyperlinks.