Typography
The Typography utilities provide comprehensive font styling, sizing, and text formatting controls. These utilities cover font sizes using design tokens, text styling options, alignment controls, and advanced text overflow handling for creating consistent and readable typography throughout your application.
Usage
Typography utilities can be combined to achieve various text styling effects. The utilities include responsive font sizing, text transformation, alignment, and overflow controls that work together to create flexible typography systems.
<h1 class="size-4 bold text-center">Large, bold, centered heading</h1>
<p class="size-1 read-more" style="--line-count: 3;">
This paragraph will be truncated to 3 lines with an ellipsis if the content
exceeds that height.
</p>
<span class="size-0 uppercase ellipsis">
Single-line text that truncates with ellipsis if too long
</span>The utilities use Feo.css design tokens for consistent sizing and provide both single-line and multi-line text overflow solutions.
Custom Properties
| Property | Default | Description |
|---|---|---|
--line-count |
2 |
Number of lines to show for .read-more class |
Class Patterns
| Pattern | Description |
|---|---|
.size-* |
Sets font-size using Feo.css design tokens for size |
.bold |
Sets font-weight to 600 |
.normal |
Sets font-weight to 400 |
.italic |
Sets font-style to italic |
.fl |
Capitalizes the first letter only |
.uppercase |
Transforms text to uppercase |
.lowercase |
Transforms text to lowercase |
.capitalize |
Capitalizes the first letter of each word |
.text-center |
Centers text alignment |
.text-start |
Aligns text to the start (left in LTR) |
.text-end |
Aligns text to the end (right in LTR) |
.read-more |
Multi-line text truncation with customizable line count |
.ellipsis |
Single-line text truncation with ellipsis |
.lh-reset |
Resets line-height to 1 |