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

Ten Tips for Better Type

Mel Choyce
December 01, 2017

Ten Tips for Better Type

Let’s face it: most of us spend the vast majority of our days staring at some sort of illuminated screen. Work day? Eyes glued to laptop. Walking to lunch? Miraculously avoiding careening into oncoming traffic as I stare at my phone.

During my abundance of screen time, most of the content I consume is text-based. Some of it looks great! But some of it gives me a headache by the end of the day. Nobody likes headaches. In this talk, I’ll go over ten easy tips to make your typography headache-free.

Mel Choyce

December 01, 2017
Tweet

More Decks by Mel Choyce

Other Decks in Design

Transcript

  1. For Better Type
    10 TIPS

    View Slide

  2. Mel Choyce
    PRODUCT DESIGNER AT AUTOMATTIC
    @melchoyce
    melchoyce.design

    View Slide

  3. Don’t make people
    squint at their screens
    Tip #1

    View Slide

  4. Meet WordPress
    WordPress started in 2003 with a single bit of code to enhance the typography of everyday writing and with
    fewer users than you can count on your fingers and toes. Since then it has grown to be the largest self-hosted
    blogging tool in the world, used on millions of sites and seen by tens of millions of people every day.
    Everything you see here, from the documentation to the code itself, was created by and for the community.
    WordPress is an Open Source project, which means there are hundreds of people all over the world working on
    it. (More than most commercial platforms.) It also means you are free to use it for anything from your recipe
    site to a Fortune 500 web site without paying anyone a license fee and a number of other important freedoms.
    About WordPress.org
    On this site you can download and install a software script called WordPress. To do this you need a web
    host who meets the minimum requirements and a little time. WordPress is completely customizable and can be
    used for almost anything. There is also a service called WordPress.com which lets you get started with a new
    and free WordPress-based blog in seconds, but varies in several ways and is less flexible than the WordPress
    you download and install yourself.
    What You Can Use WordPress For
    WordPress started as just a blogging system, but has evolved to be used as full content management system
    and so much more through the thousands of plugins and widgets and themes, WordPress is limited only by
    your imagination. (And tech chops.)

    View Slide

  5. 16-24
    px body fonts

    View Slide

  6. View Slide

  7. Always change the
    default line-height
    Tip #2

    View Slide

  8. 1x
    is so, so sad.

    View Slide

  9. View Slide

  10. 1.4-1.6x
    for body fonts

    View Slide

  11. View Slide

  12. 1.2-1.4x
    for header fonts

    View Slide

  13. View Slide

  14. body {
    font-size: 1em;
    line-height: 1.5;
    }
    h1, h2, h3 {
    line-height: 1.3;
    }

    View Slide

  15. Constrain your 

    line-lengths
    Tip #3

    View Slide

  16. View Slide

  17. View Slide

  18. 45-75
    characters per line*
    * including spaces and punctuation

    View Slide

  19. More
    sometimes
    is okay

    View Slide

  20. Less
    sometimes
    is okay*
    * especially on smaller screens

    View Slide

  21. Pick fonts with
    multiple styles
    Tip #4

    View Slide

  22. View Slide

  23. View Slide

  24. Meet WordPress
    WordPress is open source software you can use to create a
    beautiful website, blog, or app.

    View Slide

  25. Meet WordPress
    WordPress is open source software you can use to create a
    beautiful website, blog, or app.

    View Slide

  26. Meet WordPress
    WordPress is open source software you can use to create a
    beautiful website, blog, or app.
    Meet WordPress
    WordPress is open source software you can use to create a
    beautiful website, blog, or app.

    View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. About WordPress
    WordPress started in 2003 with a single bit of code to enhance the typography of
    everyday writing and with fewer users than you can count on your fingers and toes.
    Since then it has grown to be the largest self-hosted blogging tool in the world, used
    on millions of sites and seen by tens of millions of people every day.
    About WordPress.org
    On this site you can download and install a software script called WordPress. To do this
    you need a web host who meets the minimum requirements and a little time.
    WordPress is completely customizable and can be used for almost anything.
    What You Can Use WordPress For
    WordPress started as just a blogging system, but has evolved to be used as full content management system and so much
    more through the thousands of plugins and widgets and themes, WordPress is limited only by your imagination. (And
    tech chops.)

    View Slide

  31. Use font families
    Tip #5

    View Slide

  32. View Slide

  33. View Slide

  34. Meet WordPress
    WordPress is open source software you can use to
    create a beautiful website, blog, or app.

    View Slide

  35. Meet WordPress
    WordPress is open source software you can use to create a
    beautiful website, blog, or app.

    View Slide

  36. Meet WordPress
    WordPress is open source software you can use to create a
    beautiful website, blog, or app.

    View Slide

  37. Avoid decorative or
    fancy fonts
    Tip #6

    View Slide

  38. About WordPress
    WordPress started in 2003 with a single bit of code to enhance the typography
    of everyday writing and with fewer users than you can count on your fingers
    and toes. Since then it has grown to be the largest self-hosted blogging tool
    in the world, used on millions of sites and seen by tens of millions of people
    every day.
    About WordPress.org
    On this site you can download and install a software script called WordPress.
    To do this you need a web host who meets the minimum requirements and a
    little time. WordPress is completely customizable and can be used for almost
    anything.
    What You Can Use WordPress For
    WordPress started as just a blogging system, but has evolved to be used as
    full content management system and so much more through the thousands
    of plugins and widgets and themes, WordPress is limited only by your
    imagination. (And tech chops.)

    View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. Steal font pairings
    Tip #7

    View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. Only center short text
    Tip #8

    View Slide

  48. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit.
    Quisque quis feugiat ex.
    Aenean nec ipsum non
    lacus malesuada
    consectetur id eu dui.
    Praesent commodo nisi sed
    est semper fringilla
    euismod ac diam.
    Maecenas dui dui, lobortis
    ut blandit vel, tempus sed
    ante. Fusce sit amet auctor
    odio.
    Quisque dolor libero,
    vulputate vitae justo nec,
    molestie lacinia neque.
    Maecenas a vehicula
    sapien. Praesent odio nulla,
    laoreet a dapibus ut, blandit
    nec ipsum.

    View Slide

  49. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit.
    Quisque quis feugiat ex.
    Aenean nec ipsum non
    lacus malesuada
    consectetur id eu dui.
    Praesent commodo nisi sed
    est semper fringilla
    euismod ac diam.
    Maecenas dui dui, lobortis
    ut blandit vel, tempus sed
    ante. Fusce sit amet auctor
    odio.
    Quisque dolor libero,
    vulputate vitae justo nec,
    molestie lacinia neque.
    Maecenas a vehicula
    sapien. Praesent odio nulla,
    laoreet a dapibus ut, blandit
    nec ipsum.

    View Slide

  50. Meet WordPress
    WordPress is open source software you can use to
    create a beautiful website, blog, or app.

    View Slide

  51. Don’t use black
    Tip #9

    View Slide

  52. Kindred Spirits, by Asher Brown Durand

    View Slide

  53. https://news.artnet.com/art-world/new-photos-vantablack-906158

    View Slide

  54. View Slide

  55. Only underline links
    Tip #10

    View Slide

  56. About WordPress
    WordPress started in 2003 with a single bit of code to enhance the typography of
    everyday writing and with fewer users than you can count on your fingers and toes.
    Since then it has grown to be the largest self-hosted blogging tool in the world, used on
    millions of sites and seen by tens of millions of people every day.
    About WordPress.org
    On this site you can download and install a software script called WordPress. To do this
    you need a web host who meets the minimum requirements and a little time. WordPress
    is completely customizable and can be used for almost anything.
    What You Can Use WordPress For
    WordPress started as just a blogging system, but has evolved to be used as full content
    management system and so much more through the thousands of plugins and
    widgets and themes, WordPress is limited only by your imagination. (And tech chops.)

    View Slide

  57. Thanks!
    @melchoyce
    melchoyce.design

    View Slide