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

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

Mary Baum
June 26, 2019
Design
1
380

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!

Mary Baum

June 26, 2019
Tweet

More Decks by Mary Baum

See All by Mary Baum
Genesis or TwentyTwenty?
marybaum
0
23
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
49
Let's get visual!
marybaum
0
340
My favorite design tool ... is a browser.
marybaum
0
43
Let's Get Visual!
marybaum
0
170
Themes_101.pdf
marybaum
0
230
Gutenberg.pdf
marybaum
0
120
Header logos and favicons!
marybaum
0
180
Let's add some widgets!
marybaum
0
180

Other Decks in Design

See All in Design
もち的デザイナーのキャリアデザイン新提言：副業起業家のすゝめ
mochitaro
0
1.3k
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
630
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
620
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
「これをゲームにしたい！」と言われた時ゲームデザイナーが考えること
kinakobooster
5
5.2k
文化に寄りそうデザイン
recruitengineers
PRO
4
910
WHAT ARE ME?
takuro_nakajima
PRO
0
1.3k
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
230
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
520
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
300
Web 組版の課題とその解法
yamatoiizuka
0
110

Featured

See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Building Adaptive Systems
keathley
31
1.9k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
A Philosophy of Restraint
colly
197
16k
Automating Front-end Workflow
addyosmani
1356
200k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Fireside Chat
paigeccino
21
2.6k
The Language of Interfaces
destraynor
151
23k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
For a Future-Friendly Web
brad_frost
172
9k

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