A
V
Font Size
Definition and Usage
The Font Size utility classes are used to apply consistent, scalable font sizes throughout your project. These classes help maintain a clear visual hierarchy and responsive typography across different components.
Font Size Examples
| Property | Value |
|---|---|
| FtSe1 | font-size: 0.0625rem; |
| FtSe16 | font-size: 1rem; |
| FtSe50 | font-size: 3.125rem; |
| FtSe100 | font-size: 6.25rem; |
Note
Use FtSe classes wherever you need to apply consistent font sizing—headings, paragraphs, labels, buttons, or any other text element.
The range of this class is from 1 to 100.
Font Style
Definition and Usage
The Font Style utility classes are used to control the visual style of text, such as making it italic or reverting it to normal. These utilities help apply stylistic emphasis consistently across your project.
Font Style Examples
| Property | Value |
|---|---|
| FtSeIc | font-style: italic; |
| FtSeBd | font-style: bold; |
| FtSeOe | font-style: oblique; |
Font Weight
Definition and Usage
The Font Weight utility classes control the thickness or boldness of text. These classes are helpful for creating a clear visual hierarchy, drawing attention to key content, or following a specific design system.
Font Weight Examples
| Property | Value |
|---|---|
| FtWtBd | font-weight: bold; |
| FtWtBr | font-weight: bolder; |
| FtWt100 | font-weight: 100; |
| FtWt400 | font-weight: 400; |
| FtWt600 | font-weight: 600; |
| FtWt900 | font-weight: 900; |
Note
You can use FtWtBd or FtWtBr to make the content bolder or you can use FtWt100 - FtWt900 Classes to give specific font weight.
The range of this class is from 100 to 900.