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

Typography

Use qtm-typography component to present your design and content as clearly and efficiently as possible.

Component

qtm-typography component has pre-built styles using the component attribute.

We provide a list of component value to use.

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

Code
<qtm-typography component="title-2">This is title-2</qtm-typography>
Result
This is title-2

Customization

The qtm-typography has a default set of attributes to allow more customization.

Attribute
Type
classes
string
component
body-1 - body-2 - caption-1 - caption-2 - code-1 - code-2 - overline - subtitle-1 - subtitle-2 - title-1 - title-2 - title-3
fontFamily
roboto - roboto-mono
fontSize
1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10
fontWeight
black - bold - light - medium - normal - thin
tag
string

Override font families

Quantum uses Roboto and Roboto mono. Font family. You can overide the default font family by using attribute: fontFamily

Set font size and font unit conversion

Setting the fontSize attribute allows you to set customized size of the qtm-typography component.
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

fontSize

Read more about Font Size

fontSize valuerempixel
13rem48px
22.5rem40px
32rem32px
41.5rem24px
51.25rem20px
61rem16px
70.875rem14px
80.75rem12px
90.625rem10px
100.5rem8px
Code
<qtm-typography component="title-1" fontSize="5" classes="text-primary-500">
This is title-1 with fontSize 5 and text-primary-500
</qtm-typography>
Result
This is title-1 with fontSize 5 and text-primary-500

Change font weight

Setting the fontWeight attribute allows you to set customized weight of the qtm-typography component.

Read more on Font Weight

fontWeight valueNumerical value
thin100
light300
regular400
medium500
bold700
black900
Code
<qtm-typography component="title-1" fontWeight="light">
This is title-1 with fontWeight light
</qtm-typography>
Result
This is title-1 with fontWeight light

API

qtm-typography

PropertyTypeDefaultDescription
classesstringlist of classes to override or extend the styles applied to the component. You can use available utility classes by importing
component"body-1" | "body-2" | "caption-1" | "caption-2" | "code-1" | "code-2" | "overline" | "subtitle-1" | "subtitle-2" | "title-1" | "title-2" | "title-3"apply the theme typography styles
fontFamily"roboto" | "roboto-mono"set the font-family for text
fontSize1 | 10 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9set the font-size for text
fontWeight"black" | "bold" | "light" | "medium" | "normal" | "thin"set the weight (or boldness) of the font
tagstringset HTML element type