Helper classes allow you to customize the visual appearance of individual headings. They separate visual appearance from semantics, giving you better control over both content and design. Use _hero_1 to _hero_3 or _h1 to _h7 to style your headings.
Text Sample 3
Text Sample 2
Text Sample 1
Text Sample 1
Text Sample 2
Text Sample 3
Text Sample 4
Text Sample 5
Text Sample 6
Normal Text
Normal Small Smaller
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 Arial and Helvetica, 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, Garamond 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 coding, as they enhance readability.