# Typography
We can easily add font related styles through CSS Utils.
# Font family
Use '--fw-font-family' css variable to change the font family of crayons components. As CSS variables can be scoped, we can apply font globally for all components or only to a particular component.
Show Code
# Heading
For heading text, we can use 'fw-type-#{size}'.
#{size} can be 'h1', 'h2' .. 'h6', 'h7'
# Heading size chart:
| name | h1 | h2 | h3 | h4 | h5 | h6 | h7 |
|---|---|---|---|---|---|---|---|
| rem | 2.75rem | 2rem | 1.5rem | 1.125rem | 1rem | 0.875rem | 0.75rem |
| px (font size of the root element being 16px) | 44px | 32px | 24px | 18px | 16px | 14px | 12px |
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
Show Code
# Body
For Body text, we can use 'fw-type-#{size}'.
#{size} can be '3xl', '2xl', 'xl', 'lg', 'base', 'sm', 'xs'
# Body size chart
| name | 3xl | 2xl | xl | lg | base | sm | xs |
|---|---|---|---|---|---|---|---|
| rem | 2.75rem | 2rem | 1.5rem | 1.125rem | 1rem | 0.875rem | 0.75rem |
| px (font size of the root element being 16px) | 44px | 32px | 24px | 18px | 16px | 14px | 12px |
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
Show Code
# Font weight
For font weight, we can use 'fw-type-#{weight}'
#{weight} can be 'bold', 'semibold', 'regular', 'light'
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
Show Code
# Anchor
For anchor tags, we can use 'fw-type-anchor'
Show Code
Built with ❤ at Freshworks