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
180
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
1年目のクリエイターがつくりあげた！採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
370
Improve a service workshop
mastervicedesign
1
130
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは？
atsushihomma
0
300
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
170
Карта реализации историй — убийца USM
ashapiro
0
260
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
210
世界中のチームワークを どうデザインしているのか
ka3zu1ma10
0
230
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
570
プロダクトデザインの「守破離」の「破」について
hayashirine
0
250
デザインシステム構築の進め方　基本から実践まで、具体的な手順を徹底解説
ncdc
1
270
ネーミングの極意 - その名は体を現していますか？ -
kakukoki
2
400
太田博三(@usagisan2020)
otanet
0
200

Featured

See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Producing Creativity
orderedlist
PRO
341
39k
Embracing the Ebb and Flow
colly
84
4.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
YesSQL, Process and Tooling at Scale
rocio
169
14k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Making Projects Easy
brettharned
116
5.9k
Music & Morning Musume
bryan
46
6.2k

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