# 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.

Changed Unchanged
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

Last Updated: 4/13/2022, 2:59:29 PM