The ABCs of Web Typography

A class presented by General Assembly on the basics of web typography. The end of the classed showed real world usage and implementation of Google Fonts, Font Squirrel and IcoMoon.

Transcript

1. THE ABCS OF WEB TYPOGRAPHY JAMES COLEMAN, DEVELOPER AT BUGHERD
2. WEB DESIGN IS 95% TYPOGRAPHY https:/ /ia.net/know-how/the-web-is-all-about-typography-period/
3. TYPOGRAPHY A TYPEFACE IS THE DESIGN OF THE LETTERFORM
4. FONT A FONT IS THE DELIVERY MECHANISM
5. CHOOSING A TYPEFACE IS NOT TYPOGRAPHY
6. MAKE BODY TEXT EASY TO READ https:/ /ia.net/know-how/the-web-is-all-about-typography-period/
7. MAKE BODY TEXT EASY TO READ
8. James Craig, Designing With Type (1971) Reading a long line of type causes fatigue: the reader must move his head at the end of each line and search for the beginning of the next line.… Too short a line breaks up words or phrases that are generally read as a unit.
9. MAKE BODY TEXT EASY TO READ
10. MAKE BODY TEXT EASY TO READ
11. MAKE BODY TEXT EASY TO READ • 45 to 85 characters per line (including punctuation) • A line height somewhere between 125% and 150% of the font size. • A font size that is readable, depending on the environment.
12. THERE IS NO GOLDEN FONT SIZE
13. X X X Helvetica Times New Roman Arial font-size: 200px;
14. X X X Birch Std OCR A STD Zapfino font-size: 200px;
15. http:/ /tex.stackexchange.com/questions/167290/why-do-different-fonts-have-different-point-sizes
16. X Zapfino font-size: 200px; Does not give a single fuck
17. Zapfino
18. BODY FONT SIZE • Defaults to 16px in most browsers • Default could change in the future, especially on different devices like mobiles. • Set the base font size on the HTML element
19. BASE FONT SIZE html { font-size: 100%; } html { font-size: 16px; }
20. Jennifer Farley, New Relic There is no rule to cover tracking for every font. The best guideline is to use your eyes. Generally if the letters look like they’re too close together, they probably are. Lots of practice and experimentation is how you really learn to use tracking in your designs.
21. TRACKING (LETTER-SPACING) .element { font-size: 16px; letter-spacing: 1em; //16px }
22. TRACKING (LETTER-SPACING) .element { font-size: 16px; letter-spacing: 0.5em; //16px/2 }
23. TRACKING (LETTER-SPACING)
24. TRACKING (LETTER-SPACING) 16px 24px
25. TRACKING (LETTER-SPACING) 16px 24px
26. UPPERCASE • More tiring and slower to read because it reduces recognition by making all letters a similar size. • Ensure uppercase is a style, not forced by copy: .element { text-transform: uppercase; }
27. OVERFLOW .element { text-overflow: ellipsis; }
28. HEADINGS ARE IMPORTANT
29. EMPHASIS http:/ /alistapart.com/
30. SPACE http:/ /au.burton.com/on/demandware.store/Sites-Burton_AU-Site/default/Team-Riders
31. COLORS http:/ /csswizardry.com/2014/11/when-to-use-extend-when-to-use-a-mixin/
32. HORIZONTAL SEPARATION http:/ /www.deakin.edu.au/study-at-deakin/find-a-course/creative-arts
33. SANS-SERIF VS. SERIF
34. SANS-SERIF VS. SERIF Ff Ff SANS-SERIF SERIF
35. SLAB SERIF Ff Ff SLAB SERIF SERIF * slab serif is still technically a serif font
36. USAGE STATISTICS SANS-SERIF SERIF HEADING 60% 40% BODY COPY 66% 34% http:/ /www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/
37. MIX IT UP Ghostface Killah ! Dennis Coles (born May 9, 1970), better known by his stage name Ghostface Killah, is an American rapper and prominent member of the Wu-Tang Clan. After the group achieved breakthrough success in the aftermath of Enter the Wu-Tang (36 Chambers), the members went on to pursue solo careers to varying levels of success. Ghostface Killah ! Dennis Coles (born May 9, 1970), better known by his stage name Ghostface Killah, is an American rapper and prominent member of the Wu-Tang Clan. After the group achieved breakthrough success in the aftermath of Enter the Wu-Tang (36 Chambers), the members went on to pursue solo careers to varying levels of success.
38. THERE’S EVEN MORE http:/ /typedia.com/learn/only/typeface-classifications/
39. NOTES ON FONT TYPES • Sans-serif is easier to read at smaller sizes (on screen) • Serif is easier to read at larger sizes • Many sans-serif fonts have been created specifically for electronic displays • Don’t use too many different styles (sans-serif, serif, slab serif at once) • It’s whatever you’d like!
40. EM VS PX
41. M
42. M 1em
43. It’s a unit that is relative to its parent font size.
44. target context = result
45. 24px 16px = 1.5em
46. EM • Flexible (grows with context) • Changes font size with zoom (on olddddd browsers) • You’ll die if you hate maths • It’s pretty complicated to keep track of
47. REM
48. ROOT EM
49. target root = result
50. REM • Still flexible (grows with top level context) • Less flexible to control specific areas of design • Doesn’t work on old browsers so who cares • Easy to keep track of
51. FONT FAMILIES
52. Nerds, Mozilla Developer Network The font-family CSS property allows for a prioritized list of font family names and/or generic family names to be specified for the selected element. Unlike most other CSS properties, values are separated by a comma to indicate that they are alternatives.
53. FONT FAMILIES .element { font-family: Arial, Helvetica Neue, Helvetica, sans-serif; } .element { font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif; }
54. CHOOSING YOUR WEBSAFE FONTS
55. http:/ /en.wikipedia.org/wiki/Core_fonts_for_the_Web BORING, BUT GOOD.
56. http:/ /www.google.com.au/trends/explore#q=websafe%20fonts ON ITS WAY OUT
57. CSS FONT STACK http:/ /www.cssfontstack.com/
58. @FONT-FACE
59. Nerds, Mozilla Developer Network The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages.
60. FONT FAMILIES .element { font-family: “Bitstream Vera”, Arial, Helvetica Neue, Helvetica, sans-serif; } ! @font-face { font-family: "Bitstream Vera"; src: url(“https://mdn.mozillademos.org/files/2468/ VeraSeBd.ttf”); }
61. FONT FAMILIES .element { font-family: “Bitstream Vera”, Arial, Helvetica Neue, Helvetica, sans-serif; } ! @font-face { font-family: "Bitstream Vera"; src:local(“Bitstream”), local(“Vera”), url(“https://mdn.mozillademos.org/files/2468/ VeraSeBd.ttf”) format('truetype'); }
62. SUPPORT WAS CRAZY http:/ /www.stunningcss3.com/resources/fontface-file-types-browser-support.html
63. SUPPORT IS NOW GOOD http:/ /caniuse.com/#search=woff
64. FONT FAMILIES .element { font-family: MyFontFamily, Arial, Helvetica Neue, Helvetica, sans-serif; } ! @font-face { font-family: MyFontFamily; src: url('myfont-webfont.eot?#iefix') format('embedded- opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); }
65. CHOOSING YOUR FONTS FROM AN INSANELY LARGE LIST OF OPTIONS
66. WHERE TO GET KILLER FONTS • Google Fonts - http://www.google.com/fonts • Font Squirrel - http://www.fontsquirrel.com/ • MyFonts - http://www.myfonts.com/ • TypeKit - http://typekit.com/ • Hoefler & Co. - http://www.typography.com/
67. GOOGLE FONTS
68. BEAUTIFUL WEB TYPE http:/ /hellohappy.org/beautiful-web-type/