O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Web Typography for Front End Developers

3.128 visualizações

Publicada em

Publicada em: Tecnologia, Arte e fotografia

Web Typography for Front End Developers

  1. 1. TYPE TODAYa primer on web typography in 2011 for front-end developers martha re ig • cykod.com @artimated
  2. 2. L r!!??
  3. 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. 4. CSS3 &@FONT-FACE
  5. 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. 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. 8. Browser SupportFirefox 3.5 Chrome 4 Opera 10 Safari 3.1 IE4
  9. 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. 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. 11. LINK CODE<link href=http://fonts.googleapis.com/css?family=FontName&v2 rel=stylesheet type=text/css> EXAMPLE FROM GOOGLE FONTS
  12. 12. YOUR CSSh2 { font-family: "Your typeface", Georgia, serif; } STYLE AS USUAL
  14. 14. Hosted Platforms
  15. 15. typekit.com
  16. 16. fontdeck.com
  17. 17. fonts.com
  18. 18. Buying a License
  19. 19. myfonts.com
  20. 20. kernest.com
  21. 21. FontSpring.com
  22. 22. Webtype.com
  23. 23. Free Fonts
  24. 24. Google Web Fonts
  25. 25. FontSquirrel.com
  26. 26. TheLeagueofMoveableType.com
  27. 27. FREE PROBLEMS๏ Quality not guaranteed๏ Unknown rendering (hinting)๏ Poorly drawn๏ Poorly kerned
  28. 28. Complete Sets Reklame I’d Love to Go!Reklame DEMO FREE I’d Love to Go!
  29. 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. 30. KerningVARIATION League GothicVARIATION BEBAS Spaces between ALL letters should be even
  31. 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. 33. Know your styles
  34. 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. 35. ModernThin, horizontal serifs, a radical difference between the thickand thin strokes of a le erform, and a vertical stress.Handgloves BodoniHandgloves Didot
  36. 36. Slab SerifThick, horizontal serifs, li le to no difference between thethick and thin strokes, and a vertical stress. ClarendonHandglovesHandgloves Archer
  37. 37. San SerifNo serifs, and most o en monoweight (the strokes are pre ymuch one thickness)Handgloves HelveticaHandgloves League Gothic
  38. 38. ScriptAnything with a flowing, handwri en style.Handgloves BelloHandgloves Reklame
  39. 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. 40. Know your audience and platform
  41. 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. 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. 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. 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. 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. 46. replaced all headings in nytimes.com with lobster using fontfriend
  48. 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. 49. Go for contrast
  50. 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. 51. Though the currenttrend is big headlines...
  52. 52. designingmonsters.com
  53. 53. solidgiant.com
  54. 54. fittextjs.com
  55. 55. underconsideration.com/brandnewconference
  56. 56. Limiting yourself to one fontcan work beautifully as well.
  57. 57. seedconference.com
  58. 58. lovehelvetica.com
  59. 59. legistyles.com/
  60. 60. Julian Hansen So You Need A Typeface by Julian Hansen
  62. 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. 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. 64. You need to decidewhat’s important
  65. 65. yvettesbridalformal.com
  66. 66. creativemornings.com
  67. 67. big headline med body small detailred box for emphasisred type for emphasis creativemornings.com
  68. 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. 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. 70. SPACE๏ Keep line length readable, not too long or short.๏ Adjust the line-height to give more๏ White space
  71. 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. 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. 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. 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. 75. be a type rockstar
  76. 76. Read Stop Stealing Sheep The Elements of & find out how type works Typographic Styleby Erik Spiekermann & E.M. Ginge by Robert Bringhurst
  77. 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. 78. – The en dash(–)used to express a range of values or a distanceThe Red Sox beat the Yankees 4–0.
  79. 79. — The em dash(—)used to indicate a break in thoughtThe pizza—with warm cheese and spicy pepperoni—wasdelicious.
  80. 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. 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. 82. TIPS & TRICKS
  83. 83. letteringjs.com
  84. 84. lostworldsfairs.com/moon
  85. 85. preparetoactivate.com
  86. 86. useful tools
  87. 87. somadesign.ca/projects/fontfriend/
  88. 88. chengyinliu.com/whatfont.html
  89. 89. Trends
  90. 90. webvisionaryawards.com
  91. 91. snowdenindustries.com
  92. 92. frontend2011.com
  93. 93. nicewebtype.com/fonts
  94. 94. beercamp.com/2010
  95. 95. freestyle-night.ch
  96. 96. philipmeissnerdesign.com
  97. 97. collaborativefund.com
  98. 98. golivebutton.com
  99. 99. I was going to put togethersome demos on how tocreate these effects....
  100. 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. 101. RESOURCES๏ typedia.com๏ typophile.com๏ ilovetype.com๏ alistapart.com๏ le ering.js๏ ffffallback.com๏ ifontyou.com
  102. 102. THANKS! martha re ig • cykod.com @artimated