Style Guide
  • Handy Style Guide
  • Brand Guidelines
    • Logo
    • Color System
    • Line Icons
    • Expressive Icons
    • Typography
  • Native
    • Action Cards
      • Booking Cards
      • Job Cards
      • List Cards
      • Message Cards
      • User Cards
    • Avatars
    • Banners
    • Callouts
    • Buttons
    • Half Sheets
    • Headers
    • Icon Lists
    • Input Fields
    • Marketing
    • Message Bubbles
    • Modal
    • Navigation
    • Pickers
    • Reviews
    • Skeleton Loading States
    • Tabs
    • Typography - Native
      • Native Text Combinations
  • Web
    • Navigation
    • Grid and Layout
    • Forms
    • Typography (Web)
    • Buttons
    • Pickers
    • Modals
    • Cards
Powered by GitBook
On this page
  • Typography System for Web
  • Header 1
  • H1 - Desktop
  • H1 - Mobile
  • Header 2
  • Header 3
  • Paragraph
  • Subcopy
  • Link
  • Tertiary Text

Was this helpful?

  1. Web

Typography (Web)

Typography provides legible and consistent UI across the Handy website (desktop and mobile)

PreviousFormsNextButtons

Last updated 5 years ago

Was this helpful?

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.

font-weight: bold
font-size: 32px
font-color: text-black

H1 - Mobile

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

Header 2 styling is used as a main header in content blocks.

font-weight: bold
font-size: 24px
font-color: text-black

Header 3

Header 3 styling is used for headers in content blocks.

font-weight: bold
font-size: 20px
font-color: text-black

Paragraph

Paragraph text is used for content.

font-weight: book
font-size: 16px
font-color: text-black
line-height: 1.5

Subcopy

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

Link

Text links.

font-weight: book
font-size: 16px
font-color: blue-medium
line-height: 1.5

Tertiary Text

Tertiary text is used for legal copy, terms & conditions, etc.

font-weight: book
font-size: 14px
font-color: slate-medium-dark
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