Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TIPS // How to choose fonts for your website?

Slideist
October 30, 2014

TIPS // How to choose fonts for your website?

Slideist

October 30, 2014
Tweet

More Decks by Slideist

Other Decks in Design

Transcript

  1. How to choose fonts
    for your website?

    View full-size slide

  2. The perfect recipe
    for web typography

    View full-size slide

  3. There’s no single recipe
    for perfect typography...
    (sorry)

    View full-size slide

  4. It’s about finding a dish fit for the occasion.
    Rather than make text legible, we need to
    make it scrumptiously readable.
    The following principles are important to
    consider and can help ensure that your
    typesetting hits the spot.

    View full-size slide

  5. Hierarchy
    A combination of font size, weight, colour, position, and font
    selection can be used to achieve hierarchy. It’s the practice of
    providing focal points to make the text scannable.

    View full-size slide

  6. Contrast
    It’s important to provide the right contrast between font colour
    and background. Keep in mind that too much contrast such as
    white agains a black can also be hard to read.

    View full-size slide

  7. Letter spacing
    Default letter spacing should be ok for standard text, however it’s
    recommended to add add 5–12% extra let­terspac­ing to the use of
    cap­i­tal letters together.

    View full-size slide

  8. Line Length
    The goal in line-length is is for the reader’s eyes to easily flow from
    the end of one line to the beginning of the next. 65 characters is
    often considered ideal for a optimum reading experience.

    View full-size slide

  9. Line Height
    Line height is the space between individual lines of text, it applies
    to body text as well as headers. Line height that is too short will
    cause users to squint while reading. If it is too large, the text will
    seem like separate bodies instead of grouped together as one.

    View full-size slide

  10. White space / Negative space
    The space around the typography including margins and gutters
    plays an important role as it contributes to a balanced feeling page.
    It offsets large amounts of text and helps eye flow with ease.

    View full-size slide

  11. When good typography goes bad…

    View full-size slide

  12. ★ Poorly set type can cause eyestrain and frustration to
    readers. An example of this is when the line length is too
    wide and causes a reader to lose their place on the
    following line.
    ★ If a reader is unable to easily scan an article they may
    abandon it. This increases bounce-rate which may lead to
    a negative impact on Google page rank.
    ★ Lack of hierarchy in a written document can prevent a
    reader from finding sought after information, reducing
    their likelihood of returning to the site.
    ★ Poor typesetting can make a web page look dated and may
    be seen as less credible.

    View full-size slide

  13. How to keep your typography fresh?

    View full-size slide

  14. Stay fresh, stay new. Stay aware. There’s a
    multitude of blogs and resources to help you
    keep your type inline. Trends change over
    time and it’s important to check out what
    the competition is up to. Here’s a little
    something we prepared earlier.

    View full-size slide

  15. Practical Typography
    An indepth look at best pratices and praticle application for web typography.
    Typecast & Typekit
    These resources allow you to test and play with type before taking action.
    Typekit is even integrated with your Adobe Creative Cloud account to save time
    and make the job easier!
    Google Material Design Specification
    Google has outlined some fantastic approach to type specification, and all
    matters design.
    A list Apart – How we read
    Look at the type, it’s just beautiful. The article is helpful too!
    Smashing Magazine – Typographic Design Patterns And Current
    Practices (2013)
    An in depth study of developments and trends in Web typography reveals
    interesting statistics, such as 84% of websites use the same fonts in the print
    and standard style sheets.
    Tutorials & resources

    View full-size slide

  16. Type we Like
    A beautiful showcase of Google font combinations and creative uses. Just click
    or hover to see the font in use.
    I love typography & Friends of type
    While primarily used in print design hand lettering can be an incredible source
    of inspiration for interesting and engaging title fonts in web design. This is a
    fantastic source of inspiration and might just inspire you to push your type a
    little further.
    tips source
    Visual examples and inspiration

    View full-size slide