Class Reference
Typography
Class Reference
Typography
Heading, body text, font, weight, alignment and wrapping styles.
How to use
Choose a text preset for a consistent font and size, then add a wrapping or alignment utility when needed. Keep the heading HTML level appropriate for the document structure.
Responsive behavior
Text sizes reference fluid variables. Responsive alignment or size rules take effect only at their named breakpoint; they do not change the heading HTML level.
Visual reference
Examples use the installed class styles and your current design variables. Oversized font samples stay on one line and can be scrolled. Wrapping examples use constrained widths and longer text so you can compare their behavior; column examples use smaller, wrapping text.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Build consistent pages with shared styles that adapt to every screen. Change your content and compare how the lines wrap inside this preview.
Build consistent pages with shared styles that adapt to every screen. Change your content and compare how the lines wrap inside this preview.
Build consistent pages with shared styles that adapt to every screen. Change your content and compare how the lines wrap inside this preview.
Build consistent pages with shared styles that adapt to every screen. Change your content and compare how the lines wrap inside this preview.
ThisIsAnExampleOfAVeryLongUnbrokenWordThatNeedsToWrapInsideTheAvailablePreviewWidth
ThisIsAnExampleOfAVeryLongUnbrokenWordThatNeedsToWrapInsideTheAvailablePreviewWidth
The quick brown fox jumps over the lazy dog. This deliberately long text continues beyond the available preview width to demonstrate how the text-truncate class keeps everything on one line, hides the overflowing content, and displays an ellipsis at the end of the visible text.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Typography gives content a clear reading order. Headings introduce each section, while body text explains the details. Consistent spacing and comfortable line lengths help readers follow an idea from beginning to end. These examples use the same paragraph so you can compare how one, two, and three columns distribute the content. Smaller text leaves room to see each column and the gap between them.
Typography gives content a clear reading order. Headings introduce each section, while body text explains the details. Consistent spacing and comfortable line lengths help readers follow an idea from beginning to end. These examples use the same paragraph so you can compare how one, two, and three columns distribute the content. Smaller text leaves room to see each column and the gap between them.
Typography gives content a clear reading order. Headings introduce each section, while body text explains the details. Consistent spacing and comfortable line lengths help readers follow an idea from beginning to end. These examples use the same paragraph so you can compare how one, two, and three columns distribute the content. Smaller text leaves room to see each column and the gap between them.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
ThisIsAnExampleOfAVeryLongUnbrokenWordThatNeedsToWrapInsideTheAvailablePreviewWidth