Confessions of a type nut: Quick tricks to get great type on your site, and why it matters

Ad96ace475ab89952489d5a2454d97da?s=47 Mary Baum
June 26, 2019

Confessions of a type nut: Quick tricks to get great type on your site, and why it matters

I’ve been a type nut for 45 years.

Seriously.

I have OPINIONS on the shapes of PARTS of LETTERS.

In the scheme of things, you probably don’t want to get as picky as I am.

Still:

You want to make sure your type is easy to read.

You want to make sure it speaks in the same voice as your site — it looks like it belongs.

Those things matter—a lot.

(Would you choose a swirly script for Jiffy Lube? Didn’t think so.)

But you don’t have to spend decades to learn the basics. Just come spend a few minutes learning a few things that won’t change with the tech — at least as long as people still have eyes!

Ad96ace475ab89952489d5a2454d97da?s=128

Mary Baum

June 26, 2019
Tweet

Transcript

  1. 95%

  2. Good type, bad type

  3. Good type is ten years old!

  4. Paul Irish Googler Wrote first bulletproof 
 @font-face CSS September

    2009
  5. Good type sings your song.

  6. None
  7. None
  8. None
  9. None
  10. None
  11. Good type loves your reader.

  12. None
  13. None
  14. Let’s open up the leading. p {
 line-height: 1.3; 


    }
  15. None
  16. Let’s mind our measure. p {
 max-width: 66ch;
 width: 55ch;


    }
  17. None
  18. Let’s space out these subs. h3 {
 margin: .5em 0;


    }
  19. None
  20. Let’s vary subhead colors and weights.

  21. None
  22. So.

  23. How do we pick type for a whole site?

  24. None
  25. Now, we’re not going to use Aviano as a text

    face. Can you imagine reading this for even one more bullet?
  26. What about the <body>?

  27. What goes with

  28. Aviano?

  29. Serif: Orpheus Pro Baskerville Old Serial Goudy Old Style IvyJournal

    Made Coachella Millard Sans: Sharik Sans Foco Haboro Contrast Struktur Pro Quiche Sans
  30. Sharik Sans.

  31. None
  32. None
  33. Dionisio Aviano

  34. None
  35. What about the <body>?

  36. We’re not going to make people read a long screed

    in aviano. And even with five weights, Dionisio’s not much better.
  37. Serif: Orpheus Pro Baskerville Old Serial Goudy Old Style IvyJournal

    Made Coachella Millard Sans: Sharik Sans Foco Haboro Contrast Struktur Pro Quiche Sans
  38. How about

  39. Orpheus Pro?

  40. We’re not going to make people read a long screed

    in aviano. And even with five weights, Dionisio’s not much better. Orpheus Pro is normal enough to read — and has subdued serifs.
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. One serif. One sans.

  48. One serif. One sans. One weird.

  49. None
  50. One serif: Cabrito Light. One sans: Raleway. One weird: Raleway

    Black (our stand-in). (We use it sparingly.) Plus Cabrito Bold for some other subheads.
  51. None
  52. None
  53. One serif: Cabrito Light. One sans: Raleway. One weird: Raleway

    Black (our stand-in). (We use it sparingly.) Plus Cabrito Bold for some other subheads.
  54. None
  55. None
  56. None
  57. None
  58. None
  59. So. What are we really saying here?

  60. Start with the logo.

  61. Liven up the palette: One serif, One sans, One weird.

  62. Tweak the CSS for easy reading.

  63. p { 
 line-height: 1.3;
 max-width: 55ch;
 }

  64. em,
 strong {
 color: contrasting;
 font-family: weird;
 font-weight: 700 or

    bolder;
 }
  65. a { border-bottom:
 underline, 
 highlight or anything
 other than

    just color; }
  66. a: focus { border: highlight,
 strikethrough, whatever — 
 some

    way users know
 where they are; }
  67. Where?

  68. Let’s build a type library on a budget.

  69. Subscriptions.

  70. Adobe type. Included in every plan; $10/month cheapest.

  71. None
  72. Monotype. $10/month, fonts.com or $118/year, myfonts.com

  73. None
  74. None
  75. Bundles.

  76. None
  77. None
  78. Sales and deals. Fontspring. Myfonts.

  79. None
  80. Free families. Font Squirrel. Google Fonts.

  81. None
  82. None
  83. Mary Baum _ @marybaum $ marybaum j marybaum racquetpress.com