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.

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