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

Beautiful Web Typography

Avatar for Mel Choyce Mel Choyce
April 25, 2015
Design
3
800

Beautiful Web Typography

Presented at WordCamp Minneapolis 2015. With the rapid popularization of web fonts over the past few years, type on the web has never been more exciting! We’ll learn a bit about basic typographic principles, review techniques and services for integrating web fonts into your WordPress sites, and finally conclude with a bit of speculation on where type on the web is heading.
Avatar for Mel Choyce

Mel Choyce

April 25, 2015
Tweet

More Decks by Mel Choyce

See All by Mel Choyce
Design Trends
Avatar for Mel Choyce melchoyce
1
380
Ten Tips for Better Type
Avatar for Mel Choyce melchoyce
2
260
Out in Tech Hackathon: New York, September 2017
Avatar for Mel Choyce melchoyce
0
160
Beautiful Web Typography (2017)
Avatar for Mel Choyce melchoyce
0
910
WordCamp Boston 2017 Contributor Day
Avatar for Mel Choyce melchoyce
1
1.6k
Good Design: The Gateway to a Better Business
Avatar for Mel Choyce melchoyce
1
570
WordPress Design Trends
Avatar for Mel Choyce melchoyce
7
610

Other Decks in Design

See All in Design
20250129_DAST28_実空間にデジタル資源の接点をデザインする
Avatar for majimasachi majimasachi
0
360
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
Avatar for Yu Morita securecat
3
1.2k
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
Avatar for gaussbeam gaussbeam
0
1.1k
Crisp Code inc. ブランドガイドライン
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
170
線で考える画面構成
Avatar for natsuume natsuume
1
850
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
Avatar for ちげ chige
7
1.1k
Haley's adventure chase
Avatar for Ivette Molina ivettetwin
0
160
The Golden Whitney
Avatar for OhTristanArt ohtristanart
PRO
0
350
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
Avatar for 山口哲弘 t2yamaguchi429
0
230
PF_濵村ひろみ_202503
Avatar for 濱村ひろみ maru_design78
0
150
Social Anxiety
Avatar for Kayla Smith ksmith2024
0
210
Echoes Boomerang
Avatar for Cloud Yu artcloudyu
PRO
0
190

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
177
9.7k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
227
22k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
91
6k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
349
20k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
56
9.4k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
70k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
129
19k

Transcript

  1. Beautiful
 Web Typography

  2. Mel Choyce DESIGN ENGINEER AT AUTOMATTIC @melchoyce melchoyce.design

  3. INTRODUCTION TO 
 Beautiful Web Type

  4. Web Design is 95% Typography — Oliver Reichenstein “

  5. National Geographic http://www.nationalgeographic.com/mag... TYPE ON THE WEB

  6. Ghostly Ferns http://ghostlyferns.com/ TYPE ON THE WEB

  7. FCINQ http://www.fcinq.com/ TYPE ON THE WEB

  8. Wired http://www.wired.com/ TYPE ON THE WEB

  9. Seedlip https://www.seedlipdrinks.com/ TYPE ON THE WEB

  10. NASA Gene Lab http://genelab.nasa.gov/ TYPE ON THE WEB

  11. can make their type ANYONE LOOK GOOD

  12. INTRODUCTION TO 
 Typographic Principles

  13. Picking Pairing &

  14. Picking Pairing &

  15. think about Tone

  16. Neutral Stylized >

  17. Pick body fonts with multiple weights

  18. None
  19. None

  20. Picking Pairing &

  21. One typeface, multiple weights

  22. Sans + Serif = <3

  23. Pick a Family when in doubt

  24. Use decorative headers Sparingly

  25. Borrow Pairings still worried?

  26. Beautiful Web Type http://hellohappy.org/beautiful-web-type/ TYPEFACE PAIRINGS

  27. Google Web Fonts Typographic Project http://femmebot.github.io/google-type/ TYPEFACE PAIRINGS

  28. Typewolf http://www.typewolf.com/ TYPEFACE PAIRINGS

  29. Font Pair http://fontpair.co/ TYPEFACE PAIRINGS

  30. Size

  31. don’t make me SQUINT

  32. 14-22 px body fonts

  33. Line-height

  34. 1x is so, so sad.

  35. None

  36. 1.4-1.6x for body fonts

  37. None

  38. 1.2-1.4x for header fonts

  39. None

  40. body { font-size: 16px; line-height: 1.5; } h1, h2, h3

    { line-height: 1.3; }

  41. Line-length

  42. 45-75 characters per line* * including spaces and punctuation

  43. None

  44. More sometimes is okay

  45. Less sometimes is okay* * especially on smaller screens

  46. Balancing Act

  47. Style

  48. only center short text

  49. only all-caps short text

  50. avoid justified text

  51. only underline links

  52. limit your # of font styles

  53. don’t use 100% black

  54. None

  55. INTRODUCTION TO 
 Using Fonts in WordPress

  56. pick a Source

  57. figure out your constraints

  58. Self-Hosted? Cloud-Hosted?

  59. figure out your budget

  60. No budget? Small budget? Large budget?

  61. Free Hosted Service

  62. The Good Free!

  63. The Bad • Not as many high-quality options • Limited

    styles/weights • Limited character sets • Limited multi language support • Often overused

  64. Paid Hosted Service

  65. The Good • Support • Higher quality fonts • More

    likely to find extended character sets • More likely to find multi language support • More likely to be both good and unique

  66. The Bad • They cost money • Might have to

    pay based on traffic • More licensing restrictions

  67. Self-Hosted Service

  68. The Good • Totally customizable setup • Can remove characters

    to reduce font size • You “own” your fonts

  69. The Bad • Requires additional setup • Requires additional tech

    knowledge • Optimization up to you • Often more expensive for paid fonts

  70. use a Plugin

  71. great if you’re not rolling your own

  72. great if you don’t have file access

  73. add it Manually

  74. @font-face { font-family: 'Typeface'; src: url(‘Typeface.eot?') format(‘eot'), url('Typeface.woff') format('woff'), url(‘Typeface.ttf')

    format('truetype'); } Bulletproof @font-face http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/

  75. WEBFONT GENERATOR Font Squirrel http://www.fontsquirrel.com/tools/webfont-generator

  76. Google Fonts

  77. Paid & Hosted • Depends on your service • Usually

    given something to add to your <head>

  78. THINKING ABOUT 
 The Future of Type

  79. higher quality Free Fonts

  80. Responsive Type

  81. RESPONSIVE TYPOGRAPHY MEDIA QUERIES body { font-size: 100%; } h1

    { font—size: 2.5em; } @media screen and (max-width: 50em) { h1 { font—size: 2em; } } @media screen and (max-width: 40em) { h1 { font—size: 1.5em; } }

  82. RESPONSIVE TYPOGRAPHY JAVASCRIPT FitText.js http://fittextjs.com/

  83. RESPONSIVE TYPOGRAPHY JAVASCRIPT FlowType.js http://simplefocus.com/flowtype/

  84. https://css-tricks.com/viewport-sized-typography/ CSS Tricks: Viewport Sized Typography RESPONSIVE TYPOGRAPHY CSS

  85. h1 { font-size: 6vw; } h2 { line-height: 3vh; }

    p { line-height: 2vmin; }

  86. http://alistapart.com/blog/post/variable-fonts-for-responsive-design Variable Fonts for Responsive Design RESPONSIVE TYPEFACES

  87. Dynamic Text

  88. TYPE & SVG Animated Text Fills http://tympanus.net/Tutorials/AnimatedTextFills/index.html

  89. Thanks! @melchoyce melchoyce.design https://choycedesign.com/type/