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!

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.
11. Good type loves your reader.
14. Let’s open up the leading. p {
 line-height: 1.3; 
 }
16. Let’s mind our measure. p {
 max-width: 66ch;
 width: 55ch;
 }
18. Let’s space out these subs. h3 {
 margin: .5em 0;
 }
20. Let’s vary subhead colors and weights.
22. Good type 
 makes links accessible.
26. a { color:contrasting; }
27. Not accessible.
29. a { color:contrasting; font-weight:heavy; }
31. a { color:contrasting; border-bottom: size style color; }
33. a { color:contrasting; border-bottom: size style color; text-decoration-style:many! }
37. a { color:contrasting; border-bottom: size style color; text-decoration-style:many! }
39. a { background-color:different; color:contrasting; border-bottom:size style color; font-weight:heavy; font-family: weird; text-decoration-style: many! }
40. How do we pick type for a whole site?
42. One sans.
45. One sans. One serif.
49. One sans. One serif.
53. One sans. One serif. One weird.
54. One sans: Arquitecta. One serif: Haboro. One weird: Alisha. (We use it sparingly.) Plus Haboro Extended Black for some other subheads.
55. One sans. One serif. One weird.
57. One serif. One sans.
64. One serif. One sans. One weird.
67. So. What are we really saying here?
68. Start with the logo.
69. Pick your palette. One serif. One sans. One weird.
70. Tweak the CSS for easy reading.
71. p { 
 line-height: 1.3;
 max-width: 55ch;
 }
72. em,
 strong {
 color: contrasting;
 font-family: weird;
 font-weight: 700 or bolder;
 }
73. a { background-color:different; color:contrasting; border-bottom: size style color; font-weight:heavy; font-family: weird; text-decoration-style: many! }
74. a: focus { border: highlight,strikethrough, whatever — some way users know where they are; }
75. Where?
76. Let’s build a type library on a budget.
77. Subscriptions.
78. Adobe type. Included in every plan; $10/month cheapest.
80. Monotype. $10/month, fonts.com or $118/year, myfonts.com
83. Bundles.
86. Sales and deals. Fontspring. Myfonts.
88. Free families. Font Squirrel. Google Fonts.
91. Mary Baum _ @marybaum $ marybaum j marybaum racquetpress.com