Typography On The Web

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

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!