Save 37% off PRO during our Black Friday Sale! »

Typography On The Web

97ef295460ad6b89feeebe4ad8f377e6?s=47 Justin Seiter
January 13, 2016

Typography On The Web

A basic intro to some smart typographic patterns for your web design.

97ef295460ad6b89feeebe4ad8f377e6?s=128

Justin Seiter

January 13, 2016
Tweet

Transcript

  1. Typography On The Web Justin Seiter

  2. Laying A Foundation

  3. Laying A Foundation • Normalize the environment. • Look at

    Leading & Mind Your Measure • Create a Modular Scale • If the above sounds like a lot of work, then maybe you’ll like...
  4. Normalize The Environment If a browser doesn’t get information from

    a stylesheet it will fall back to its defaults. These defaults can vary from browser to browser. Use Normalize.css - Eliminates inheritance chain.
  5. Look At Leading & Mind Your Measure Leading is the

    space between lines. Use line-height to address leading and do not specify units. Measure is the length of the line. The proper length of a line is ~40-80 characters. Multiple 30 into font size. body { line-height: 1.5; /* Leading */ } p { font-size: 16px; max-width: 480px; /* Measure */ }
  6. Leading Leading is the space between lines. Use line-height to

    address leading and do not specify units.
  7. Measure Measure is the length of the line. The proper

    length of a line is ~40-80 characters. Multiple 30 into font size.
  8. Create a Modular Scale Establish clearly distinguishable heading levels with

    font-size. Don’t randomly pick font sizes, choose a type hierarchy that is harmonious and consistent. Choose a base. The best place to start is your body copy. 16px * 1.2 = 19.2px Modular Scale
  9. Typeplate We don’t make aesthetic design choices, but define proper

    markup with extensible styling for common typographic patterns.
  10. Font Implementation

  11. Font Implementation Options • System Fonts • Use @font-face •

    Font Services
  12. System Fonts Fonts installed on the user’s device. While not

    all systems have the same fonts installed, you can use a web safe font stack to choose several fonts that look similar, and are installed on the various systems that you want to support. body { font-family: Helvetica, Arial, sans-serif; }
  13. @font-face Eliminates the need to rely on system fonts. We

    must make considerations for FOUT and file size. Check out Font Squirrel @font-face { font-family: 'open_sansbold'; src: url('OpenSans-Bold-webfont.eot'); src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Bold-webfont.woff') format('woff'), url('OpenSans-Bold-webfont.ttf') format('truetype'), url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: normal; font-style: normal; } body { font-family: 'open_sansbold', sans-serif; }
  14. Font Services These services simply link to a css file

    that contains the approriate @font-face declarations.
  15. Font Considerations

  16. Considerations For Choosing a Font • Content • Cost •

    Durability
  17. Recommendations

  18. Reccomendations • Serif v Sans-serif • Superfamilies • Roboto •

    Avoid #000 • Licensing • No more than 2
  19. Resources

  20. Resources • “On Web Typography” -- Jason Santa Maria •

    Typewolf • Typekit Blog • WhatFont?
  21. The best font choices are ones where readers do not

    notice the font but the message.
  22. Thanks!