Version: Next

Typography

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.

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

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-1