Web Typography for Front End Developers

Uploaded on


  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. TYPE TODAYa primer on web typography in 2011 for front-end developers martha re ig • cykod.com @artimated
  • 2. L r!!??
  • 3. WHAT ILL COVER๏ CSS3 & @font-face๏ Where to find fonts๏ How to choose๏ Combining Fonts๏ Why you should care about typography๏ Pre y Things
  • 4. CSS3 &@FONT-FACE
  • 5. PROS๏ We have more fonts to use! (that means we aren’t limited to the verdana, arial, georgia basics)๏ Dynamic, selectable, printable, and easily edited text๏ Easy to implement๏ Smaller and faster loading pages than images
  • 6. CONS๏ Easy to overuse. Lots of funs fonts don’t make good designs, good designers make good designs๏ Licensing - if it’s not open sourced and you don’t have a license - don’t use it๏ FOUT (flash of unstyled text)๏ Rendering differences (pixel perfection should be a thing of the past)
  • 8. Browser SupportFirefox 3.5 Chrome 4 Opera 10 Safari 3.1 IE4
  • 9. @FONT-FACE๏ Adds “font-family” fonts you can use with CSS๏ Currently you need to provide 4 different versions of the same font to cover all browsers๏ Don’t worry about the specifics use a generator like fontsquirrel.com or use a hosting service
  • 10. RAW CODE @font-face { font-family: "Your typeface"; src: url("type/filename.eot"); src: local("☺"), url("type/filename.woff") format("woff"), url("type/filename.otf") format("opentype"), url("type/filename.svg#filename") format("svg"); } @font-face { font-family: "Your italic typeface"; src: url("type/filename-ital.eot"); src: local("☺"), url("type/filename-ital.woff") format("woff"), url("type/filename-ital.otf") format("opentype"), url("type/filename-ital.svg#filename-ital") format ("svg"); }DON’T WRITE THIS - CUT AND PASTE FROM YOUR GENERATOR
  • 11. LINK CODE<link href=http://fonts.googleapis.com/css?family=FontName&v2 rel=stylesheet type=text/css> EXAMPLE FROM GOOGLE FONTS
  • 12. YOUR CSSh2 { font-family: "Your typeface", Georgia, serif; } STYLE AS USUAL
  • 14. Hosted Platforms
  • 15. typekit.com
  • 16. fontdeck.com
  • 17. fonts.com
  • 18. Buying a License
  • 19. myfonts.com
  • 20. kernest.com
  • 21. FontSpring.com
  • 22. Webtype.com
  • 23. Free Fonts
  • 24. Google Web Fonts
  • 25. FontSquirrel.com
  • 26. TheLeagueofMoveableType.com
  • 27. FREE PROBLEMS๏ Quality not guaranteed๏ Unknown rendering (hinting)๏ Poorly drawn๏ Poorly kerned
  • 28. Complete Sets Reklame I’d Love to Go!Reklame DEMO FREE I’d Love to Go!
  • 29. font hintingA font test with hinting (lower rows) and without hinting (upper rows) at 100% (above)and 400% (below). Note the increased edge contrast with the hinted text but morefaithful character shape and more natural inter-character spacing in the unhinted text. http://en.wikipedia.org/wiki/Font_hinting
  • 30. KerningVARIATION League GothicVARIATION BEBAS Spaces between ALL letters should be even
  • 31. MY LAST 2 CENTS๏ Make sure you own the license๏ Read the EULA๏ Desktop licenses are not the same as web๏ Avoid liability issues
  • 33. Know your styles
  • 34. Old Style Slanted serifs, a moderate transition between the thick andthin strokes of a le erform, and a diagonal stress (the angle ofa line drawn through the thinnest parts of curved le ers).Handgloves Goudy Old StyleHandgloves Palatino
  • 35. ModernThin, horizontal serifs, a radical difference between the thickand thin strokes of a le erform, and a vertical stress.Handgloves BodoniHandgloves Didot
  • 36. Slab SerifThick, horizontal serifs, li le to no difference between thethick and thin strokes, and a vertical stress. ClarendonHandglovesHandgloves Archer
  • 37. San SerifNo serifs, and most o en monoweight (the strokes are pre ymuch one thickness)Handgloves HelveticaHandgloves League Gothic
  • 38. ScriptAnything with a flowing, handwri en style.Handgloves BelloHandgloves Reklame
  • 39. DecorativeWhimsical and fun. Grunge faces are a subcategory in thatthey are definitely decorative, but lawless and edgy, breakingthe rules, trashy and trendy.Handgloves HandCancelledHandgloves Stencil
  • 40. Know your audience and platform
  • 41. Large x-height & counters for body text the larger the bowls on le ers like “b” and “h” the easier your text will be to read on a screen, especially at small sizes.hobo hoboSmall x-height & counters Large x-height & counters Cochin Georgia
  • 42. Check your 1, I, and l the number one, capital “i”, and lowercase “L” should be distinct.1Il 1Il 1IlGill Sans Georgia Museo
  • 43. Readability At small sizes fonts with larger variation in weights will be harder to read.Handgloves Bodoni 80px Bodoni 24pxHandglovesHandgloves Verdana 80px Verdana 24pxHandgloves
  • 44. Headline Vs. TextFive quacking zephyrs Five quackingjolt my wax bed. zephyrsFlummoxed by job, kvetching W. zaps Iraq.Cozy sphinx waves quart jug of bad milk. Avery bad quack might jinx zippy fowls. Few jolt my wax bed.quips galvanized the mock jury box. Quick Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx wavesbrown dogs jump over the lazy fox. The jay, quart jug of bad milk. A very bad quack might jinx zippy fowls.pig, fox, zebra, and my wolves quack! Blowzy Few quips galvanized the mock jury box. Quick brown dogs jumpred vixens fight for a quick jump. JoaquinPhoenix was gazed by MTV for luck. A over the lazy fox. The jay, pig, fox, zebra, and my wolves quack!wizard’s job is to vex chumps quickly in fog. Blowzy red vixens fight for a quick jump. Joaquin Phoenix wasWatch "Jeopardy! ", Alex Trebeks fun gazed by MTV for luck. A wizard’s job is to vex chumps quickly inTV quiz game. Woven silk pyjamas exchanged fog. Watch "Jeopardy! ", Alex Trebeks fun TV quiz game. Wovenfor blue quartz. silk pyjamas exchanged for blue quartz.League Gothic as headline Droid Serif as headlineDroid Serif as body League Gothic as body
  • 45. AppropriateAlways honor your content and audience first.Choose fonts that are relevant to your subject before choosingwhat’s new and trendy.S ,N .Y ’ L r vr w r.
  • 46. replaced all headings in nytimes.com with lobster using fontfriend
  • 48. COMBININGFONTS๏ KISS (Keep It Simple Stupid)๏ Dont over complicate: limit yourself to 2 Styles๏ San Serif + Serif always works๏ avoid similar styles/classifications
  • 49. Go for contrast
  • 50. The Golden RatioHeading to Body font sizeHeading font size ÷ Body copy font size = 1.96What this really means is that if you double your body sizeyou will almost always have enough contrast in weight fromthe heading.
  • 51. Though the currenttrend is big headlines...
  • 52. designingmonsters.com
  • 53. solidgiant.com
  • 54. fittextjs.com
  • 55. underconsideration.com/brandnewconference
  • 56. Limiting yourself to one fontcan work beautifully as well.
  • 57. seedconference.com
  • 58. lovehelvetica.com
  • 59. legistyles.com/
  • 60. Julian Hansen So You Need A Typeface by Julian Hansen
  • 62. Good typography is the easiest wayto quickly make your site look good.But most importantly, it will makeyour site easier to read and navigatefor users.
  • 63. HIERARCHY๏ Decide what is most important and NOT everything can be important.๏ Make more important things are bigger.๏ Make less important smaller.๏ Add emphasis with color, weight and style.
  • 64. You need to decidewhat’s important
  • 65. yvettesbridalformal.com
  • 66. creativemornings.com
  • 67. big headline med body small detailred box for emphasisred type for emphasis creativemornings.com
  • 68. emphasisGiving emphasis to a word without interrupting the reader isimportant. Italic is widely considered to be the ideal form ofemphasis. Some other common forms of emphasis are: bold,caps, small caps, type size, color, underline or a differenttypeface. No ma er which you choose, try to limit yourself tousing only one. Combinations such as caps-bold-italic aredisruptive and look clumsy.
  • 69. GoodThe quick, brown fox jumps over a lazy dog. DJs flock by whenMTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawdsjog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigsvex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpyveldt fox. Bright vixens jump; dozy fowl quack.BadThe quick, brown fox JUMPS OVER A LAZY DOG. DJs flockby when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quickjigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangsjumpy veldt fox. Bright vixens jump; dozy fowl quack.
  • 70. SPACE๏ Keep line length readable, not too long or short.๏ Adjust the line-height to give more๏ White space
  • 71. How Many CharactersPer Line?According to Robert Bringhurst, who wrote my typographybible, 45 to 75.Recent web studies show that 66 might be the “web ideal”
  • 72. Line HeightNO The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack.YES The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack.NO The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack.
  • 73. Letter SpacingNO Cozy sphinx waves quart jug of bad milk.YES Cozy sphinx waves quart jug of bad milk.NO Cozy sphinx waves quar t jug of bad milk.OK C O Z Y S P H I N X WAV E S
  • 74. embrace white spaceNot every pixel needs to be covered in text or graphics.White space doesn’t have to be white, it can be red, green,black, or pa erned. It’s simply space that is le vacant. The vacant space makes it easier for the reader to navigatethrough the content of your site.
  • 75. be a type rockstar
  • 76. Read Stop Stealing Sheep The Elements of & find out how type works Typographic Styleby Erik Spiekermann & E.M. Ginge by Robert Bringhurst
  • 77. - hyphenused to separate the words in a compound adjective, verb, oradverb.The friendly-looking man in the front is waiting for a much-needed break.
  • 78. – The en dash(&#8211;)used to express a range of values or a distanceThe Red Sox beat the Yankees 4–0.
  • 79. — The em dash(&#8212;)used to indicate a break in thoughtThe pizza—with warm cheese and spicy pepperoni—wasdelicious.
  • 80. Be Smart not Dumb‶dumb double quotes‶ #8216; = opening single quote“smart double quotes” &#8217 = closing single quote‵dumb single quotes‵ &#8220 = opening double quote“smart single quotes” &#8221 = closing double quote
  • 81. thirty-four h p://www.jimgodfreydesign.com/typeSins.pdfTwo spaces between sentences. Indenting a paragraph too far.Repent of this sin by using only one space. The standard indent for a paragraph is 1 em, not ½ inch. Most software has default tabs set for ½ inch, so adjust the tabs.Dumb quotes instead of smart quotes.Evil: "Thou shalt not misuse type" Good: “Thou shalt not misuse type” Failing to hang punctuation into the margin. Punctuation has less visual weight than letters or numbers.Dumb apostrophe instead of a smart apostrophe. Compensate for this in display text by hanging the punctuation into the margin.Profane: Dont use prime marks Sacred: Don’t use prime marksBy the way, apostrophes always face this way: Pot o’ gold. Failing to use or create fractions.They never face this way: Pot ‘o gold. Wicked: 1/2 Righteous: ½Failing to tuck periods/commas inside quotes marks. Incorrectly abbreviating AM and PM.Immoral: “I love type so much”, she confessed. Unclean: am, AM, A.M. Relatively Clean: a.m. Clean: a.m. or AMChaste: “I love type so much,” she testi ed. Failing to provide margins for type in a box.Failing to kern display type.Unseemly gaps can impede readability and be distracting to the reader.Adjusting the spacing between letters will assuage your guilt. Faux italic/oblique, bold and small cap type. Impure: Italic Pure: ItalicUsing a hyphen instead of an en dash. Sinful: Bold Virtuous: BoldUse an en dash to indicate a duration of time instead of the word “to”: Unkosher: SMALLCAPS Kosher: Smallcapsthe 8–10 commandments, not 8-10 commandments.Using two hyphens instead of an em dash. Strokes that encroach upon letterforms.An em dash signi es a change in thought—or a parenthetical phrase—within Hellacious Heavenly Thiry-Four Typographic Sins by Jim Godfrey
  • 82. TIPS & TRICKS
  • 83. letteringjs.com
  • 84. lostworldsfairs.com/moon
  • 85. preparetoactivate.com
  • 86. useful tools
  • 87. somadesign.ca/projects/fontfriend/
  • 88. chengyinliu.com/whatfont.html
  • 89. Trends
  • 90. webvisionaryawards.com
  • 91. snowdenindustries.com
  • 92. frontend2011.com
  • 93. nicewebtype.com/fonts
  • 94. beercamp.com/2010
  • 95. freestyle-night.ch
  • 96. philipmeissnerdesign.com
  • 97. collaborativefund.com
  • 98. golivebutton.com
  • 99. I was going to put togethersome demos on how tocreate these effects....
  • 100. but Chris Spooner of Line25 already has some great ones.http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects
  • 101. RESOURCES๏ typedia.com๏ typophile.com๏ ilovetype.com๏ alistapart.com๏ le ering.js๏ ffffallback.com๏ ifontyou.com
  • 102. THANKS! martha re ig • cykod.com @artimated