Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Just Enough Typography

Just Enough Typography

Presented at Djangocon 2016 in Philadelphia, PA

Joni Trythall

July 19, 2016
Tweet

Other Decks in Design

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