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 value	rem	pixel
1	3rem	48px
2	2.5rem	40px
3	2rem	32px
4	1.5rem	24px
5	1.25rem	20px
6	1rem	16px
7	0.875rem	14px
8	0.75rem	12px
9	0.625rem	10px
10	0.5rem	8px

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 value	Numerical value
thin	100
light	300
regular	400
medium	500
bold	700
black	900

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

Property	Type	Default	Description
classes	string		list 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
fontSize	1 | 10 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9		set the font-size for text
fontWeight	"black" | "bold" | "light" | "medium" | "normal" | "thin"		set the weight (or boldness) of the font
tag	string		set HTML element type