Typo

    How to use typography

    Typography should be used to structure information within their importance. This can be done by using different font sizes or weights. Keep in mind to use the font styling consistent through the interface and not by styling, for example, the paragraph element twice in a different way.


    Main Typeface

    Inter
    .demo-font-base / var(--font-family-base)
    Font regular
    .demo-font-regular / var(--font-regular)
    Font medium
    .demo-font-medium / var(--font-medium)
    Font bold
    .demo-font-bold / var(--font-bold)

    Headings

    Heading style 01
    .demo-font-h1 / var(--font-h1)
    Heading style 02
    .demo-font-h2 / var(--font-h2)
    Heading style 03
    .demo-font-h3 / var(--font-h3)
    Heading style 04
    .demo-font-h4 / var(--font-h4)
    Heading style 05
    .demo-font-h5 / var(--font-h5)
    Heading style 06
    .demo-font-h6 / var(--font-h6)