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.
1. Header 1 1a. H1-Desktop 1b. H1-Mobile Web 2. Header 2 3. Header 3 4. Paragraph 5. Subcopy 6. Link 7. Tertiary Text
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.
H1 - Mobile
Header 1 styling is used for important page headers like the home page or when pages.
Header 2
Header 2 styling is used as a main header in content blocks.
Header 3
Header 3 styling is used for headers in content blocks.
Paragraph
Paragraph text is used for content.
Subcopy
Supporting copy that is often paired with H2s. Subcopy is used in forms.
Link
Text links.
Tertiary Text
Tertiary text is used for legal copy, terms & conditions, etc.
Last updated