Typography
Type scale, semantic text elements, and font system built on Inter and JetBrains Mono.
Heading Scale
All six heading levels rendered at their default sizes. The semantic level determines the HTML element (h1–h6), while the size prop can override the visual scale independently.
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Visual size can differ from semantic level. Below is an h2 element rendered at xl size:
h2 with size="xl"
Text Sizes
The Text component supports six size values that map to the type scale.
xs — The quick brown fox jumps over the lazy dog.
sm — The quick brown fox jumps over the lazy dog.
base — The quick brown fox jumps over the lazy dog.
lg — The quick brown fox jumps over the lazy dog.
xl — The quick brown fox jumps over the lazy dog.
2xl — The quick brown fox jumps over the lazy dog.
Font Weights
Four weight values control the visual heaviness of text.
normal — Regular body text weight.
medium — Slightly heavier for emphasis.
semibold — Used for labels and sub-headings.
bold — Strong emphasis and key values.
Text Colors
Semantic color tokens keep text consistent across themes.
default — Primary content color.
muted — De-emphasized or secondary text.
primary — Brand primary color.
secondary — Brand secondary color.
accent — Accent highlights.
success — Positive outcomes.
warning — Caution or attention needed.
danger — Errors or destructive actions.
info — Informational context.
inherit — Inherits from parent element.
Semantic Text Elements
The "as" prop changes the underlying HTML element while preserving Text styling. Each element carries semantic meaning for accessibility and SEO.
<p> — Standard paragraph element for blocks of text.
<code> — Inline code fragment or identifier.<q> — Short inline quotation, auto-wrapped in quotes.
Alignment
The align prop controls horizontal text alignment within its container.
left (default)
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.
center
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.
right
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.
justify
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.
Truncation
Truncation prevents long text from overflowing its container. Use truncate for a single line or lineClamp for a specific number of visible lines.
truncate (single line)
This is a very long sentence that should be truncated to a single line with an ellipsis at the end. It keeps going and going to demonstrate how the truncation works when the text overflows its container boundary.
lineClamp={2}
This paragraph is clamped to two lines. Any content beyond the second line will be hidden and replaced with an ellipsis. This is useful for card descriptions, preview text, and anywhere you need to limit vertical space while still showing meaningful content to the reader.
lineClamp={3}
This paragraph is clamped to three lines. You get a bit more content visible compared to two-line clamping, which makes it suitable for longer descriptions or article excerpts. Any content beyond the third line will be hidden and replaced with an ellipsis. This gives a good balance between showing enough context and saving vertical space in your layout.
Font Families
Three font families are available via Tailwind utility classes. The sans and heading fonts use Inter, while mono uses JetBrains Mono.
font-sans
The quick brown fox jumps over the lazy dog. 0123456789
font-heading
The quick brown fox jumps over the lazy dog. 0123456789
font-mono
The quick brown fox jumps over the lazy dog. 0123456789
Heading Customization
Headings support tracking (letter-spacing) and color customization for fine-tuned visual control.
Tracking variants
tighter — Condensed letter-spacing
tight — Slightly condensed letter-spacing
normal — Default letter-spacing
wide — Expanded letter-spacing
Color variants