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

De3959b62425af4379c39ed460d66763?s=128

Joni Trythall

July 19, 2016
Tweet

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