Style Guide
Search…
Typography (Web)
Typography provides legible and consistent UI across the Handy website (desktop and mobile)

Typography System for Web

Handy's web typography system is optimized for simplicity and enables streamlined experiences between desktop and mobile web. Besides headers, all type styles will stay the same between desktop and mobile web.

Header 1

H1's are the only type element that changes based on the size of the screen.

H1 - Desktop

Header 1 styling is used for important page headers like the home page or when pages.
1
font-weight: bold
2
font-size: 32px
3
font-color: text-black
Copied!

H1 - Mobile

Header 1 styling is used for important page headers like the home page or when pages.
1
font-weight: bold
2
font-size: 26px
3
font-color: text-black
Copied!

Header 2

Header 2 styling is used as a main header in content blocks.
1
font-weight: bold
2
font-size: 24px
3
font-color: text-black
Copied!

Header 3

Header 3 styling is used for headers in content blocks.
1
font-weight: bold
2
font-size: 20px
3
font-color: text-black
Copied!

Paragraph

Paragraph text is used for content.
1
font-weight: book
2
font-size: 16px
3
font-color: text-black
4
line-height: 1.5
Copied!

Subcopy

Supporting copy that is often paired with H2s. Subcopy is used in forms.
1
font-weight: book
2
font-size: 16px
3
font-color: slate-medium-dark
4
line-height: 1.5
Copied!

Link

Text links.
1
font-weight: book
2
font-size: 16px
3
font-color: blue-medium
4
line-height: 1.5
Copied!

Tertiary Text

Tertiary text is used for legal copy, terms & conditions, etc.
1
font-weight: book
2
font-size: 14px
3
font-color: slate-medium-dark
Copied!
Last modified 2yr ago