Keep texts neat and tidy

System Font

System font is the default set of fonts used by an operating system for displaying text across the user interface. The primary goal is to provide a seamless experience for users as they interact with different applications and system elements. Common examples includes "Segoe UI" on Windows, "San Francisco" on macOS, and "Roboto" on Android. They are an integral part of the overall design language and contribute to the visual identity of the operating system.

Sans

Sans fonts, such as Roboto, Arial and Verdana, are known for their clean and modern look, lacking the small decorative strokes at the ends of letters. They are widely used for digital media due to their readability on screens.

Serif

Serif fonts, like Times New Roman and Georgia, feature small lines or strokes attached to the ends of letters, giving a more traditional and formal appearance. These fonts are often used in print media for their elegant look.

Monospace

Monospace fonts, such as Courier New and Consolas have characters that occupy the same horizontal space. This uniform spacing makes them ideal for displaying scripts and source codes.


Use helper class to customize the visual appearance of headings and texts. They helps separate visual appearance from semantics, giving you better control over both. Use _h1 to _hx3 for headings, and _t1 to _t10 for other texts.

Heading x3

Heading x2

Heading x1

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 7

Normal Text

Text 10

Text 9

Text 8

Text 7

Text 6

Text 5

Text 4

Text 3

Text 2

Text 1

Normal Text


// Uniform size for maximum adaptability

Normal
code samp kbd

H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
 
H_H_
H_H_
 
H_H_
 
H_H_
H_H_
 
H_H_
 
H_H_
H_H_
 
H_H_
 
H_H_