Just Enough Typography

Presented at Djangocon 2016 in Philadelphia, PA

Transcript

1. Just
   Enough
   Typography
   By Joni (Bologna) Trythall
   For Djangocon ‘16
   @jonitrythall
   

   View Slide

2. Hello.
   Nice to meet you.
   Djangocon ‘16 Just Enough Typography @jonitrythall
   

   View Slide

3. Agenda
   Djangocon ‘16 Just Enough Typography @jonitrythall
   We are going to learn a bunch
   in this brief time together.
   But not too much.
   

   View Slide

4. ● Intro, Of Sorts
   ● Readability And Legibility
   ● Punctuation
   ● Selecting/Pairing Typefaces
   ● Bye Bye
   Agenda (Continued)
   

   View Slide

5. What Is It Tho?
   Djangocon ‘16 Just Enough Typography @jonitrythall
   “Typography is what
   language looks like.”
   Beautiful words from Ellen Lupton
   

   View Slide

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
   

   View Slide

7. Images from propublica.org
   Djangocon ‘16 Just Enough Typography @jonitrythall
   

   View Slide

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
   

   View Slide

9. Image from whenathome.com
   Djangocon ‘16 Just Enough Typography @jonitrythall
   

   View Slide

10. Awesome image by @ChiaraAliotta
    Djangocon ‘16 Just Enough Typography @jonitrythall
    

    View Slide

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
    

    View Slide

12. Container Sizes
    A thing adapted from Trent Walton
    Djangocon ‘16 Just Enough Typography @jonitrythall
    

    View Slide

13. Spacing
    Djangocon ‘16 Just Enough Typography @jonitrythall
    White Space
    

    View Slide

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?
    

    View Slide

15. Spacing
    Djangocon ‘16 Just Enough Typography @jonitrythall
    White Space And Proximity
    

    View Slide

16. Spacing
    Djangocon ‘16 Just Enough Typography @jonitrythall
    Vertical Rhythm
    

    View Slide

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
    

    View Slide

18. Contrast
    Djangocon ‘16 Just Enough Typography @jonitrythall
    ● Poor contrast is not a neat aesthetic trick
    ● Literally hurts
    ● Use a checker to be safe
    

    View Slide

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
    

    View Slide

20. Djangocon ‘16 Just Enough Typography @jonitrythall
    Hyphens And Dashes
    

    View Slide

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
    

    View Slide

22. Curly/Smart Quotes
    Djangocon ‘16 Just Enough Typography @jonitrythall
    

    View Slide

23. Djangocon ‘16 Just Enough Typography @jonitrythall
    Curly/Smart Quotes
    Hanging Quotes
    

    View Slide

24. Selecting Typefaces
    Djangocon ‘16 Just Enough Typography @jonitrythall
    ● Focus on anchor face for body copy
    ● Read the content
    ● Brand intentions
    ● Voice and tone
    

    View Slide

25. Pairing Typefaces
    Advice stating to use a single
    typeface with a bunch of styles
    is not practical.
    Djangocon ‘16 Just Enough Typography @jonitrythall
    

    View Slide

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
    

    View Slide

27. Pairing Typefaces (Continued)
    Djangocon ‘16 Just Enough Typography @jonitrythall
    Patua One
    Roboto
    Both available at google.com/fonts
    

    View Slide

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
    

    View Slide

29. Bye Bye.
    Many thanks for listening.
    Djangocon ‘16 Just Enough Typography @jonitrythall
    

    View Slide