Typography

Use QtmTypography component to present your design and content as clearly and efficiently as possible.

Component

QtmTypography component has pre-built styles using the component attribute.

We provide a list of component value to use.

title-1

The quick brown fox jumped over the lazy dog.

title-2

The quick brown fox jumped over the lazy dog.

title-3

The quick brown fox jumped over the lazy dog.

subtitle-1

The quick brown fox jumped over the lazy dog.

subtitle-2

The quick brown fox jumped over the lazy dog.

body-1

The quick brown fox jumped over the lazy dog.

body-2

The 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

<QtmTypography component="title-2">This is title-2</QtmTypography>

Result

This is title-2

⚠️If you loose the css style on rerender

If you're having only a child text and loosing the style on css rerender, we highly recommend to use a Fragment to encapsulate your text: <Fragment>your text</Fragment>

Customization

The QtmTypography 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 QtmTypography 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

<QtmTypography component="title-1" fontSize="5" classes="text-primary-500">
  This is title-1 with fontSize 5 and text-primary-500
</QtmTypography>

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 QtmTypography component.

Read more on Font Weight

fontWeight value	Numerical value
thin	100
light	300
regular	400
medium	500
bold	700
black	900

Code

<QtmTypography component="title-1" fontWeight="light">
  This is title-1 with fontWeight light
</QtmTypography>

Result

This is title-1 with fontWeight light

API

QtmTypography

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

Event handling

Not applicable. The Typography component is a visual element and does not support any event handlers directly. It serves as a wrapper for text content with styling options.