Typography
Use Typography component to present your design and content as clearly and efficiently as possible.
Component
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
<Typography component="title-2">This is title-2</Typography>
Result
Customization
The 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
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)
fontSize
attribute allows you to set customized size of the Typography component.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
<Typography component="title-1" fontSize="5" classes="text-primary-500">
This is title-1 with fontSize 5 and text-primary-500
</Typography>
Result
Change font weight
Setting the Read more on Font WeightfontWeight
attribute allows you to set customized weight of the Typography component.
fontWeight value | Numerical value |
---|---|
thin | 100 |
light | 300 |
regular | 400 |
medium | 500 |
bold | 700 |
black | 900 |
Code
<Typography component="title-1" fontWeight="light">
This is title-1 with fontWeight light
</Typography>
Result
API
Loading API documentation...