Just Enough Typography

Presented at Djangocon 2016 in Philadelphia, PA

Transcript

1. Just Enough Typography By Joni (Bologna) Trythall For Djangocon ‘16 @jonitrythall
2. Hello. Nice to meet you. Djangocon ‘16 Just Enough Typography @jonitrythall
3. Agenda Djangocon ‘16 Just Enough Typography @jonitrythall We are going to learn a bunch in this brief time together. But not too much.
4. • Intro, Of Sorts • Readability And Legibility • Punctuation • Selecting/Pairing Typefaces • Bye Bye Agenda (Continued)
5. What Is It Tho? Djangocon ‘16 Just Enough Typography @jonitrythall “Typography is what language looks like.” Beautiful words from Ellen Lupton
6. It Matters A Lot Djangocon ‘16 Just Enough Typography @jonitrythall • The National Weather Service recently stopped YELLING AT US! • NASA learned things and wrote about it • It saves lives ◦ Road signs are less terrible
7. Images from propublica.org Djangocon ‘16 Just Enough Typography @jonitrythall
8. Djangocon ‘16 Just Enough Typography @jonitrythall It Evokes Emotion • The Book With No Pictures • Influencing how users feel is super powerful ◦ Correct brand impression ◦ Aids in decision making ◦ Increase motivation ◦ Creates personality ◦ Strengthen memories
9. Image from whenathome.com Djangocon ‘16 Just Enough Typography @jonitrythall
10. Awesome image by @ChiaraAliotta Djangocon ‘16 Just Enough Typography @jonitrythall
11. Size And Line Height Djangocon ‘16 Just Enough Typography @jonitrythall • Two most important considerations • Optimal font-size between 14/15 and 24/25 pixels • Optimal line-height: between 120% and 145% • Increase font-size? Increase line-height • Mobile can be smaller
12. Container Sizes A thing adapted from Trent Walton Djangocon ‘16 Just Enough Typography @jonitrythall
13. Spacing Djangocon ‘16 Just Enough Typography @jonitrythall White Space
14. Spacing Djangocon ‘16 Just Enough Typography @jonitrythall White Space (Continued) “The power of white space comes from the limitations of human attention and memory.” or something like that, I forget who said this but it’s nice right?
15. Spacing Djangocon ‘16 Just Enough Typography @jonitrythall White Space And Proximity
16. Spacing Djangocon ‘16 Just Enough Typography @jonitrythall Vertical Rhythm
17. Hierarchy Djangocon ‘16 Just Enough Typography @jonitrythall • Visually organize elements by importance ◦ Size, proximity, repetition, and color • Grouping helps with understanding and scanning • Repetition and consistency allow for safe assumptions • It’s calming
18. Contrast Djangocon ‘16 Just Enough Typography @jonitrythall • Poor contrast is not a neat aesthetic trick • Literally hurts • Use a checker to be safe
19. Djangocon ‘16 Just Enough Typography @jonitrythall Emphasis • Use bold or italic ◦ Not underlines ◦ Not exclamation marks ◦ Bold for sans-serifs • Be careful not to overuse • Don’t format associated punctuation
20. Djangocon ‘16 Just Enough Typography @jonitrythall Hyphens And Dashes
21. Ellipses Djangocon ‘16 Just Enough Typography @jonitrythall • Used to indicate omissions within quotes • Space before and after? Feel it out ◦ Text on 1 side only? Use non breaking space
22. Curly/Smart Quotes Djangocon ‘16 Just Enough Typography @jonitrythall
23. Djangocon ‘16 Just Enough Typography @jonitrythall Curly/Smart Quotes Hanging Quotes
24. Selecting Typefaces Djangocon ‘16 Just Enough Typography @jonitrythall • Focus on anchor face for body copy • Read the content • Brand intentions • Voice and tone
25. Pairing Typefaces Advice stating to use a single typeface with a bunch of styles is not practical. Djangocon ‘16 Just Enough Typography @jonitrythall
26. Pairing Typefaces (Continued) • Serif with sans-serif and vice versa • Avoid lot of overlapping moods • +1 on weight contrasts • Two is fine, three is an identity crisis • You’re not on your own! Djangocon ‘16 Just Enough Typography @jonitrythall
27. Pairing Typefaces (Continued) Djangocon ‘16 Just Enough Typography @jonitrythall Patua One Roboto Both available at google.com/fonts
28. Check out the reference site for this talk to get quick tiny tips and a complete resource list: Djangocon ‘16 Just Enough Typography @jonitrythall Resources toptentypography.tips
29. Bye Bye. Many thanks for listening. Djangocon ‘16 Just Enough Typography @jonitrythall