Skip to main content
🏠ComponentsTypographyVersion: 2.0.0-beta.6

Typography

Set font size and font unit conversion

The font size unit of Quantum is REM(the root em size). The conversion is rem = px / base font (modern browser base font is 16)

You can use below table to help you find the correct

font size value to use in your class.

Read more about Font Size

font size valuerempixel
13rem48px
22.5rem40px
32rem32px
41.5rem24px
51.25rem20px
61rem16px
70.875rem14px
80.75rem12px
90.625rem10px
100.5rem8px

Change font weight

The chart helps you to find the correct font weight value to use in your class.

Read more on Font Weight

font weight valueNumerical value
thin100
light300
regular400
medium500
bold700
black900

Classes

Here are the available predefined typography classes you can use.

The format of the Class is qtm-{title|subtitle|body|caption|overline|code}-{size}.

  • Class
    Properties
  • qtm-title-1

    font-family: Roboto;

    font-size: 3rem;

    line-height: 4.5rem;

    font-weight: 700;

  • qtm-title-2

    font-family: Roboto;

    font-size: 2.5rem;

    line-height: 3.75rem;

    font-weight: 700;

  • qtm-title-3

    font-family: Roboto;

    font-size: 2rem;

    line-height: 3rem;

    font-weight: 700;

  • qtm-subtitle-1

    font-family: Roboto;

    font-size: 1.5rem;

    line-height: 2.25rem;

    font-weight: 500;

  • qtm-subtitle-2

    font-family: Roboto;

    font-size: 1.25rem;

    line-height: 2rem;

    font-weight: 500;

  • qtm-body-1

    font-family: Roboto;

    font-size: 1rem;

    line-height: 1.5rem;

    font-weight: 400;

  • qtm-body-2

    font-family: Roboto;

    font-size: 0.875rem;

    line-height: 1.25rem;

    font-weight: 400;

  • qtm-caption-1

    font-family: Roboto;

    font-size: 0.75rem;

    line-height: 1rem;

    font-weight: 400;

  • qtm-caption-2

    font-family: Roboto;

    font-size: 0.625rem;

    line-height: 1rem;

    font-weight: 400;

  • qtm-overline

    font-family: Roboto;

    font-size: 0.625rem;

    line-height: 1rem;

    font-weight: 400;

    text-transform: uppercase;

  • qtm-code-1

    font-family: Roboto Mono;

    font-size: 1rem;

    line-height: 1.5rem;

    font-weight: 400;

  • qtm-code-2

    font-family: Roboto Mono;

    font-size: 0.875rem;

    line-height: 1.25rem;

    font-weight: 400;

qtm-title-1The quick brown fox jumped over the lazy dog.
qtm-title-2The quick brown fox jumped over the lazy dog.
qtm-title-3The quick brown fox jumped over the lazy dog.
qtm-subtitle-1The quick brown fox jumped over the lazy dog.
qtm-subtitle-2The quick brown fox jumped over the lazy dog.
qtm-body-1The quick brown fox jumped over the lazy dog.
qtm-body-2The quick brown fox jumped over the lazy dog.
qtm-caption-1The quick brown fox jumped over the lazy dog.
qtm-caption-2The quick brown fox jumped over the lazy dog.
qtm-code-1The quick brown fox jumped over the lazy dog.
qtm-code-2The quick brown fox jumped over the lazy dog.
qtm-overlineThe quick brown fox jumped over the lazy dog.

Code
<div class="qtm-title-2">This is title-2</div>
Result
This is title-2