Typography
This library's typography is based on rems. Rem is relative to the root html font-size. Browsers initially use 16px as their default html font-size. Rem system adapts to the user's browser font size settings, also respects a user's browser zoom controls. Learn more in Finsweet’s Client-First docs.
Heading Classes
HTML Tag
Font Size
Line Height
Example
heading-style-h1
3.5 rem (56px)
1.25
Heading one
heading-style-h2
3 rem (48px)
1.35
Heading two
heading-style-h3
2.25 rem (36px)
1.5
Heading three
heading-style-h4
1.75 rem (28px)
1.5
Heading four
heading-style-h5
1.25 rem (20px)
1.5
Heading five
heading-style-h6
1.125 rem (18px)
1.5
Heading six
Text Classes
HTML Tag
Font Size
Line Height
Example
text-size-large
1.5 rem (24px)
1.5
The quick brown fox jumps over the lazy dog text design
text-size-medium
1.25 rem (20px)
1.5
The quick brown fox jumps over the lazy dog text design
text-size-regular
1 rem (16px)
1.5
The quick brown fox jumps over the lazy dog text design
text-size-small
0.875 rem (14px)
1.5
The quick brown fox jumps over the lazy dog text design
text-size-xsmall
0.75 rem (12px)
1.5
The quick brown fox jumps over the lazy dog text design
text-weight-semibold
-
-
The quick brown fox jumps over the lazy dog text design
© 2022 Combine Library by Maria Marin. Powered by Webflow.