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

The ABCs of Web Typography

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.

81a211a67ee5824ed8d6ee4df08dfced?s=128

James Coleman

January 28, 2015
Tweet

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/