Typography (Web)
Typography provides legible and consistent UI across the Handy website (desktop and mobile)
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.
H1's are the only type element that changes based on the size of the screen.
Header 1 styling is used for important page headers like the home page or when pages.
font-weight: bold
font-size: 32px
font-color: text-black
Header 1 styling is used for important page headers like the home page or when pages.
font-weight: bold
font-size: 26px
font-color: text-black
Header 2 styling is used as a main header in content blocks.
font-weight: bold
font-size: 24px
font-color: text-black
Header 3 styling is used for headers in content blocks.
font-weight: bold
font-size: 20px
font-color: text-black
Paragraph text is used for content.
font-weight: book
font-size: 16px
font-color: text-black
line-height: 1.5
Supporting copy that is often paired with H2s. Subcopy is used in forms.
font-weight: book
font-size: 16px
font-color: slate-medium-dark
line-height: 1.5
Text links.
font-weight: book
font-size: 16px
font-color: blue-medium
line-height: 1.5
Tertiary text is used for legal copy, terms & conditions, etc.
font-weight: book
font-size: 14px
font-color: slate-medium-dark
Last modified 3yr ago