Typography On The Web

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!