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

Confessions of a type nut: Quick tricks to get ...

Mary Baum
June 26, 2019
Design
1
390

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
27
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
54
Let's get visual!
marybaum
0
380
My favorite design tool ... is a browser.
marybaum
0
45
Let's Get Visual!
marybaum
0
170
Themes_101.pdf
marybaum
0
250
Gutenberg.pdf
marybaum
0
140
Header logos and favicons!
marybaum
0
190
Let's add some widgets!
marybaum
0
200

Other Decks in Design

See All in Design
Credence
lratmansunu
0
440
root COMPANY DECK / We are hiring！
root_recruit
1
15k
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン｜TOKYO CREATIVE COLLECTION
madue
1
1.2k
1年目のクリエイターがつくりあげた！採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
170
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
160
portfolio
amitnk
1
130
Design System for training program
mct
0
130
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
300
利用者が離れないUX/UIデザイン　長く使われる業務アプリデザインのポイント
ncdc
3
160
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
330
新しいemoji😄のアイデアを Unicodeが募集中‼️🏃‍♀️💨💨💨 傾向を学んでみんな提案しよう💪
oguemon
2
680
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
290

Featured

See All Featured
Speed Design
sergeychernyshev
24
610
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
2k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Bash Introduction
62gerente
608
210k
KATA
mclloyd
29
14k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Into the Great Unknown - MozCon
thekraken
32
1.5k
How STYLIGHT went responsive
nonsquared
95
5.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
830
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.8k

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