Pro Yearly is on sale from $80 to $50! »

Typography Fundamentals

54d5fa57f499bd09aa3b713bc7fdbe37?s=47 Steve Hickey
March 27, 2013

Typography Fundamentals

54d5fa57f499bd09aa3b713bc7fdbe37?s=128

Steve Hickey

March 27, 2013
Tweet

Transcript

  1. Typography Fundamentals Presented by Steve Hickey — fresh tilled soil

    fresh tilled soil Typography Fundamentals
  2. fresh tilled soil Typography Fundamentals Objective My objectives today are

    to impart a basic understanding of the fundamental rules of good typography and to show everyone how they fit into user interface and web product design.
  3. fresh tilled soil Typography Fundamentals 01 Letterform, Text, Hierarchy &

    CHoice Typographic building blocks
  4. fresh tilled soil Typography Fundamentals Letterform — Anatomy Bahpfesff stem

    crossbar bowl serif ascender descender counter terminal finial spine ligature
  5. fresh tilled soil Typography Fundamentals Letterform — Anatomy Bxhy descender

    height baseline x height cap height ascender height overhang
  6. fresh tilled soil Typography Fundamentals Letterform — Classification Aao Aao

    Aao modern serif — Bodoni transitional serif — Baskerville humanist serif — Garamond
  7. fresh tilled soil Typography Fundamentals Letterform — Classification Aao Aao

    geometric sans-serif — Futura transitional sans-serif — Helvetica humanist sans-serif — Gill Sans Aao
  8. fresh tilled soil Typography Fundamentals Letterform — Punctuation -–— hyphen

    en dash em dash The sentence spanned lines 2–8 in an unbrok- en stream — onward it swept. “” '' ˝ smart quotes dumb quotes “Look at Donny’s pet! An 8´ 7˝ tall ostrich!” primes Here’s a second line so that I can make a point. Hyphens are - En dashes are – Em dashes are — Double smart quotes are “ and ” Single smart quotes are ‘ and ’ Primes are ′ ! Nobody likes dumb quotes. They’re called dumb for a reason.
  9. fresh tilled soil Typography Fundamentals Text — Size Size has

    the greatest effect on readability of text and must be considered carefully. A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. 28px text /* different units for setting type size */ ! p { font-size: 1em; } ! p { font-size: 100%; } ! p { font-size: 16px; } ! p { font-size: 16pt; } A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. 36px text A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. 20px text
  10. fresh tilled soil Typography Fundamentals Text — Line-Height Line-height is

    the distance from baseline to baseline in a block of text. A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. 28px text 1em line-height 28px text 1.2em line-height /* line-height as multiple of text size */ ! p { font-size: 1em; line-height: 1.6; }
  11. fresh tilled soil Typography Fundamentals Text — Measure Measure is

    calculated in characters or words per line in a paragraph. A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. approx. 60 characters per line approx. 30 characters per line /* width of paragraph set by container */ ! .container { width: 66%; } ! .container p { font-size: 1em; line-height: 1.6; width: 100%; }
  12. fresh tilled soil Typography Fundamentals Text — Alignment Text alignment

    has multiple options that affect readability. left aligned center aligned right aligned justified A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. /* default is left aligned */ ! p.text-align-left { text-align: left; } ! p.text-align-right { text-align: right; } ! p.text-align-center { text-align: center; } ! p.text-align-justified { text-align: justified; }
  13. fresh tilled soil Typography Fundamentals Text — Tracking A worker

    climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. text with normal tracking text with 10% tracking Tracking is an adjustment of the space 
 between all characters in a block of text. “Anyone who would letterspace the lowercase would shag sheep.” Frederic Goudy /* all caps and letterspaced headers */ ! h1, h2, h3, h4, h5, h6 { text-transform: uppercase; letter-spacing: 0.25em; }
  14. fresh tilled soil Typography Fundamentals Text — Kerning un-kerned pairing

    Tyson Tyson kerned pairing Kerning is an adjustment of the space 
 between two characters. /* ligatures/kerning in some browsers */ ! h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; } ! /* control spacing with Kerning.JS */ ! #kern-me { -letter-kern: 1px 1px 0 0 0 1px 0 2px; }
  15. fresh tilled soil Typography Fundamentals Text — How To Make

    It Sing All of these traits must be balanced in a block of text. There are no absolute rules as to what works, but there are guidelines. Font-size: Start around 16px/1em for web type. It needs to be larger than print. Line-Height: Use a multiple of 1.3 to 1.6 times the font size. Measure: Use 50 to 75 characters or 12 words per line. Kerning: Larger text makes errors more obvious, requiring custom kerning. Tracking: Use default in the lowercase, space it out a bit in the uppercase. Alignment: Left-aligned, or justified if you have a high level of control.
  16. fresh tilled soil Typography Fundamentals Text — How To Make

    It Sing A good block of text looks grey if you un-focus your eyes a bit.
  17. fresh tilled soil Typography Fundamentals Hierarchy — Scale Scale differences

    are the quickest way to create an obvious hierarchy. A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. 28px heading 28px text 45px heading 28px text A Heading For This Text Block A Heading For This Text Block body { font-size: 100%; } /* usually 16px */ ! p { font-size: 1.75em; } /* 28px @ 100% */ ! h1 { font-size: 2.8125em; } /* 45px @ 100% */ ! h2 { font-size: 2.625em; } /* 42px @ 100% */
  18. fresh tilled soil Typography Fundamentals Hierarchy — Using a Modular

    Scale A modular scale can help you create a full system of typographic hierarchy. 24px @ 1:1.618
 29px @ 1:1.618 generated by http://modularscale.com 76px heading Heading Level 1 Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 ! A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. 63px heading 47px heading 39px heading 29px heading 24px text 29px line-height body { font-size: 100%; } /* usually 16px */ ! p { font-size: 1.5em; } /* 24px @ 100% */ ! h1 { font-size: 4.75em; } /* 76px @ 100% */ ! h2 { font-size: 3.9375em; } /* 63px @ 100% */
  19. fresh tilled soil Typography Fundamentals Hierarchy — Color Color changes

    are another way to establish a difference in hierarchy. A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. same color as text contrasting color A Heading For This Text Block A Heading For This Text Block p { color: black; } ! h1, h2, h3, h4, h5, h6 { color: blue; }
  20. fresh tilled soil Typography Fundamentals Hierarchy — Value Changing the

    value, or relative lightness/ darkness, will set two elements apart. A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. same value as text contrasting value A Heading For This Text Block A Heading For This Text Block p { color: rgb(128, 128, 128); } ! h1, h2, h3, h4, h5, h6 { color: rgb(0, 0, 0); }
  21. fresh tilled soil Typography Fundamentals Hierarchy — Style A different

    style is an effective way to set visual distinctiveness. A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. same style as text contrasting style A Heading For This Text Block A Heading For This Text Block p { font-weight: normal; } ! h1, h2, h3, h4, h5, h6 { font-weight: bold; }
  22. fresh tilled soil Typography Fundamentals Hierarchy — Placement The placement

    of text also helps to determine hierarchy. A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. same alignment as text contrasting placement A Heading For This Text Block A Heading For This Text Block p { margin: 0 0 1em 0; } ! h1, h2, h3, h4, h5, h6 { margin: 0 0 2em -1em; }
  23. fresh tilled soil Typography Fundamentals Choice — Features The first

    step in choosing a typeface is to make sure it has all the features you need for what a project demands. ! High-quality typefaces feature a complete character set, a variety of weights and styles, several types of numbers, and can even go as far as supporting different languages.
  24. fresh tilled soil Typography Fundamentals Choice — Features Some typefaces

    have extensive style options. Helvetica Neue Bold Helvetica Neue Medium Helvetica Neue Regular Helvetica Neue Light Helvetica Neue Ultralight Helvetica Neue Bold Italic Helvetica Neue Italic Helvetica Neue Light Italic Helvetica Neue Ultralight Italic
  25. fresh tilled soil Typography Fundamentals Choice — Features Others have

    multiple types of numbers, which can be vital for certain projects. monospaced, uppercase monospaced, lowercase proportionally spaced, uppercase proportionally spaced, lowercase
  26. fresh tilled soil Typography Fundamentals Choice — Features Not all

    projects call for just a Latin language character set. latin abcdefghijklmnopqrstuvwxyz cyrillic greek абвгдеёжзийклмнопрстуфхцчшщъыьэюя αβγδεζηθικλμνξοπρσςτυφχψω
  27. fresh tilled soil Typography Fundamentals Choice — Pairing When pairing

    typefaces look for similar forms, but also look to create some contrast between them. If they’re too similar then there’s no point in using them both. Bodoni with Futura the quick brown fox jumped over the lazy Helvetica with Garamond Baskerville with Univers the quick brown fox jumped over the lazy the quick brown fox jumped over the lazy
  28. fresh tilled soil Typography Fundamentals Choice — Personality The character

    of the typeface you use can completely change a word’s meaning. sophisticated sophisticated classy classy sweet sweet
  29. fresh tilled soil Typography Fundamentals Examples — Minimalissimo.com

  30. fresh tilled soil Typography Fundamentals Examples — WalkaboutNYC.com

  31. fresh tilled soil Typography Fundamentals Examples — Mailchimp.Com/2012

  32. fresh tilled soil Typography Fundamentals Examples — Hlvticons.ch

  33. fresh tilled soil Typography Fundamentals Examples — ElliotJayStocks.com

  34. fresh tilled soil Typography Fundamentals Examples — co-opbranding.com

  35. fresh tilled soil Typography Fundamentals Examples — blackestate.co.nz

  36. fresh tilled soil Typography Fundamentals 02 Implementing Type On The

    Web The good, the bad & the ugly
  37. fresh tilled soil Typography Fundamentals The State of Web Type

    The state of typography on the web is, in a word, frustrating. Many of the things I just showed you either can’t be done, or are very hard to do. (you’re welcome)
  38. fresh tilled soil Typography Fundamentals The State of Web Type

    But they’re very important to know. Why? 1. You need to be able to work around your own limitations. 2.These techniques are creeping into specifications and plugins. 3.Many of your competitors will be using them to improve their products.
  39. fresh tilled soil Typography Fundamentals The State of Web Type

    Print-quality type is becoming possible on the web. Embrace it or fall behind.
  40. fresh tilled soil Typography Fundamentals Serving Web Fonts — Defaults

    There are certain fonts you can reasonably expect to be installed on most devices. To cover your bases you call them with a font stack in your css. h1, h2, h3, h4, h5, h6 { font-family: Helvetica, Arial, sans-serif; } ! p { font-family: 'Times New Roman', Georgia, serif; }
  41. fresh tilled soil Typography Fundamentals Serving Web Fonts — Defaults

    These fonts are very basic. They work, and they’re consistent, but they aren’t great. Times New Roman Georgia Helvetica / Arial! Verdana
  42. fresh tilled soil Typography Fundamentals Serving Web Fonts — @font-face

    and font Services To get something more interesting you can: • store font files on your site and use @font-face in css. • use a font service like Typekit or Google Web Fonts.
  43. fresh tilled soil Typography Fundamentals fresh tilled soil Typography Fundamentals

    Serving Web Fonts — @font-face I put together a SASS mixin for bulletproof @font-face that you can find here: http://codepen.io/cfarm/pen/arBLb @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compatability Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#MyWebFont') format('svg'); /* Legacy iOS */ font-weight: normal; font-style: normal; } ! p { font-family: 'MyWebFont', Helvetica, Arial, sans-serif; } Derived from this research http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/
  44. fresh tilled soil Typography Fundamentals Serving Web Fonts — Font

    Services Typekit and Google Web Fonts allow you to serve a variety of fonts from their servers with a snippet of code in your html. <!-- Typekit embed code --> <script type="text/javascript" src="//use.typekit.net/ssj0eha.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> ! <!-- Google Web Fonts embed code --> <link href='http://fonts.googleapis.com/css?family=Gafata' rel='stylesheet' type='text/css'>
  45. fresh tilled soil Typography Fundamentals Serving Web Fonts — Font

    Services Then, you just add the typeface’s name to your font stacks in your css. h1, h2, h3, h4, h5, h6 { /* Google Web Fonts */ font-family: 'Gafata', Helvetica, Arial, sans-serif; } ! p { /* Typekit */ font-family: 'source-sans-pro', source-sans-pro, Arial, sans-serif; }
  46. fresh tilled soil Typography Fundamentals 03 Resources The good, the

    bad & the ugly
  47. fresh tilled soil Typography Fundamentals fresh tilled soil Typography Fundamentals

    Resources Thinking With Type thinkingwithtype.com =
  48. fresh tilled soil Typography Fundamentals fresh tilled soil Typography Fundamentals

    Resources The Elements of Typographic Style webtypography.net =
  49. fresh tilled soil Typography Fundamentals fresh tilled soil Typography Fundamentals

    Resources practicaltypography.com
  50. fresh tilled soil Typography Fundamentals fresh tilled soil Typography Fundamentals

    Resources ia.net/blog