Typography
Design tokens for typography and text styling
Typography
Typography tokens provide a consistent type scale and font system for your interface.
Font Sizes
2xs12px
The quick brown fox jumps over the lazy dog
xs13px
The quick brown fox jumps over the lazy dog
sm14px
The quick brown fox jumps over the lazy dog
md15px
The quick brown fox jumps over the lazy dog
lg16px
The quick brown fox jumps over the lazy dog
xl18px
The quick brown fox jumps over the lazy dog
2xl20px
The quick brown fox jumps over the lazy dog
3xl24px
The quick brown fox jumps over the lazy dog
4xl32px
The quick brown fox jumps over the lazy dog
5xl40px
The quick brown fox jumps over the lazy dog
6xl48px
The quick brown fox jumps over the lazy dog
7xl64px
The quick brown fox jumps over the lazy dog
Font Weights
light300
The quick brown fox jumps over the lazy dog
normal370
The quick brown fox jumps over the lazy dog
medium450
The quick brown fox jumps over the lazy dog
bold580
The quick brown fox jumps over the lazy dog
bolder760
The quick brown fox jumps over the lazy dog
Font Families
regular
The quick brown fox jumps over the lazy dog
var(--font-geist-sans), Geist, sans-serif
mono
The quick brown fox jumps over the lazy dog
var(--font-geist-mono), Geist Mono, monospace
Line Heights
tight
1.2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
regular
1.5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
loose
1.8
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Usage
In CSS
.heading {
font-family: var(--token-fonts-display);
font-size: var(--token-font-sizes-2xl);
font-weight: var(--token-font-weights-bold);
line-height: var(--token-line-heights-tight);
}
.body-text {
font-family: var(--token-fonts-body);
font-size: var(--token-font-sizes-md);
font-weight: var(--token-font-weights-normal);
line-height: var(--token-line-heights-relaxed);
}In JavaScript/TypeScript
import { tokens } from '@vibrant-ui/tokens';
const headingStyle = {
fontFamily: tokens.fonts.display.join(', '),
fontSize: `${tokens.fontSizes['2xl']}px`,
fontWeight: tokens.fontWeights.bold,
lineHeight: tokens.lineHeights.tight,
};
const bodyStyle = {
fontFamily: tokens.fonts.body.join(', '),
fontSize: `${tokens.fontSizes.md}px`,
fontWeight: tokens.fontWeights.normal,
lineHeight: tokens.lineHeights.relaxed,
};With Vibrant UI Components
import { Text } from '@vibrant-ui/components';
<Text size="2xl" weight="bold" font="display">
Main Heading
</Text>
<Text size="md" weight="normal">
Body text content goes here.
</Text>Typography Guidelines
Hierarchy
Use the font size scale to create clear information hierarchy:
- 6xl-7xl: Hero headings
- 4xl-5xl: Page headings
- 2xl-3xl: Section headings
- lg-xl: Subsection headings
- md: Body text
- sm-xs: Captions and metadata
- 2xs: Fine print
Readability
- Use appropriate line heights for different text sizes
- Ensure sufficient color contrast
- Consider reading distance and context
- Test with actual content lengths
Performance
Font loading is optimized through:
- System font fallbacks
- Font display strategies
- Subsetting for reduced file sizes
Edit on GitHub
Last updated on