Why typography is important for websites and applications.

Why typographic is important

Typography is so much more than just choosing beautiful fonts: it’s a vital component of user interface design. Good typography will establish a strong visual hierarchy, provide a graphic balance to the website, and set the product’s overall tone. If you are building a website/application and looking for typography examples with sizes, then a post is perfect for you.

  • H1 Heading Setting

    • Font Family (Public sans)
    • Backup font (Arial, Helvetica, sans-serif)
    • Variant (Bold 700)
    • Font Size (72px)
    • Line Height (1.2em)
    • Letter Spacing(-0.015em)
  • H2 Heading Setting

    • Font Family (Public sans)
    • Variant (Bold 400)
    • Font Size (40px)
    • Line Height (1.2em)
    • Letter Spacing(-0.015em)
    • Margin Top (0em)
    • Margin Bottom (1.1em)
  • H3 Heading Setting

    • Font Family (Public sans)
    • Variant (Bold 400)
    • Font Size (32px)
    • Line Height (1.2em)
    • Letter Spacing(-0.015em)
    • Margin Top (1em)
    • Margin Bottom (1em)
  • H4 Heading Setting

    • Font Family (Public sans)
    • Variant (Bold 400)
    • Font Size (19px)
    • Line Height (1.2em)
    • Letter Spacing(-0.015em)
    • Margin Top (1.33em)
    • Margin Bottom (1.33em)
  • H5 Heading Setting

    • Font Family (Public sans)
    • Variant (Bold 400)
    • Font Size (24px)
    • Line Height (1.2em)
    • LLetter Spacing(-0.015em)
    • Margin Top (1.33em)
    • Margin Top (1.67em)
    • Margin Bottom (1.67em)
  • H6 Heading Setting

    • Font Family (Public sans)
    • Variant (Bold 400)
    • Font Size (18px)
    • Line Height (1.2em)
    • Letter Spacing(-0.015em)
    • Margin Top (2.33em)
    • Margin Bottom (2.33em)
  • Post Title Setting

    • Font Family (Public sans)
    • Variant (Bold 400)
    • Font Size (22px)
    • Line Height (1.2em)
    • Letter Spacing(-0.015em)
  • Body Text Setting

    • Font Famliy (Public sans)
    • Font Size (16px)
    • Line Height (1.9em)
    • Letter Spacing (0em)