Skip to main content Design tokens Components Style utilities
Skip to table of contents

    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 tokenDefault valueExample
    --pc-font-sans"Quicksand", 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", serifSphinx of black quartz, judge my vow.
    --pc-font-mono"JetBrains Mono", "Source Code Pro", "IBM Plex Mono", "Consolas", "Menlo", monospaceSphinx of black quartz, judge my vow.

    Font size

    Font sizes use rem units so they scale with the base font size. The px values displayed are based on a 16px root font size.

    Design tokenDefault valueExample
    --pc-font-size-xxs0.625rem (10px)Aa
    --pc-font-size-xs0.75rem (12px)Aa
    --pc-font-size-s0.875rem (14px)Aa
    --pc-font-size-m1rem (16px)Aa
    --pc-font-size-l1.25rem (20px)Aa
    --pc-font-size-xl1.5rem (24px)Aa
    --pc-font-size-xxl2rem (32px)Aa
    --pc-font-size-xxxl2.5rem (40px)Aa
    --pc-font-size-xxxxl4rem (64px)Aa

    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.

    Design tokenDefault valueExample
    --pc-font-weight-light300Sphinx of black quartz, judge my vow.
    --pc-font-weight-normal400Sphinx of black quartz, judge my vow.
    --pc-font-weight-medium500Sphinx of black quartz, judge my vow.
    --pc-font-weight-semibold600Sphinx of black quartz, judge my vow.
    --pc-font-weight-bold700Sphinx of black quartz, judge my vow.

    Letter spacing

    Letter spacing is set to enhance readability and balance, adjusting naturally across different font sizes and weights.

    Design tokenDefault valueExample
    --pc-letter-spacing-denser−0.03emSphinx of black quartz, judge my vow.
    --pc-letter-spacing-dense−0.015emSphinx of black quartz, judge my vow.
    --pc-letter-spacing-normalnormalSphinx of black quartz, judge my vow.
    --pc-letter-spacing-loose0.075emSphinx of black quartz, judge my vow.
    --pc-letter-spacing-looser0.15emSphinx of black quartz, judge my vow.

    Line height

    Line heights improve text flow and legibility, adapting smoothly to different font sizes for a comfortable reading experience.

    Design tokenDefault valueExample
    --pc-line-height-denser1
    Sphinx of black quartz, judge my vow.
    Voix ambiguë d’un cœur qui au zéphyr préfère les jattes de kiwis.
    Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich.
    --pc-line-height-dense1.4
    Sphinx of black quartz, judge my vow.
    Voix ambiguë d’un cœur qui au zéphyr préfère les jattes de kiwis.
    Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich.
    --pc-line-height-normal1.8
    Sphinx of black quartz, judge my vow.
    Voix ambiguë d’un cœur qui au zéphyr préfère les jattes de kiwis.
    Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich.
    --pc-line-height-loose2.2
    Sphinx of black quartz, judge my vow.
    Voix ambiguë d’un cœur qui au zéphyr préfère les jattes de kiwis.
    Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich.
    --pc-line-height-looser2.6
    Sphinx of black quartz, judge my vow.
    Voix ambiguë d’un cœur qui au zéphyr préfère les jattes de kiwis.
    Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich.