Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Typography for the Web:
5 things to consider
ty·pog·ra·phy (n)
• The art or process of printing with type
• The work of setting and arranging types and of
printing fro...
ty·pog·ra·phy (n)
• The Web is not print
– Dynamic / Fluid
– Accessible / Global
– Semantic
• No current definition for th...
1. Choosing a Font
• “We read best what we read most.”*
– Learned behavior, Personal and Relative Act
• Simple and Sans Se...
An example . . .
• Fraktur or Blackletter
– Designed in early 1500’s
1. Choosing a Font
• Web Safe Fonts
– Arial
– Times New Roman
– Verdana
– Georgia*
– Courier**
*Actually designed exclusiv...
1. Choosing a Font
• Popular Web Fonts
– Impact
– Lucida (console and sans)
– Palatina
– Tahoma
– Comic Sans
– Trebuchet
1. Choosing a Font
• @font-face
– Archer as an example
@font-face {
font-family: "Archer";
src: url("fonts/archer-medium.o...
2. Determine Font Size
• Typographer’s Scale
– 8, 10, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72
2. Determine Font Size
• The 100% Trick (base 16)
– Typical browser type is set to 16pt (100%)
• 12 Divided by 16 equals 0...
2. Determine Font Size
• The 100% Trick (base 16)
– 8, 10, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72
.base_16 { font-size:100...
2. Determine Font Size
• The 62.5% Trick (base 10)
– 8, 10, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72
.base_10 { font-size:62...
2. Determine Font Size
<table cellspacing="25" align="center">
<tr>
<td align="right">
<div class="base_16">
<h1>Heading 1...
3. kern·ing (adj,v)
• To remove a portion of space between
(adjacent letters) in preparation for printing.
Definition acco...
3. kern·ing (adj,v)
• Monospaced or Fixed Pitch
– Letter and characters occupy the same amount of
horizontal space
– Desig...
3. kern·ing (adj,v)
• Problematic letter combinations
– Wa, To, Ve, Ye, Fo, P
body {font-family:Arial, Helvetica, sans-ser...
3. kern·ing (adj,v)
• Why care?
– Bad kerning disrupts readability
– It’s rude
3a. Line Length (not really kerning)
• Do you find this hard to read annoying?
Met reprehe ntorro voluptia nemolum aut eum...
3a. Line Length (not really kerning)
• How about this?
Met reprehe ntorro voluptia nemolum aut eum vent molorepe od endand...
3a. Line Length (not really kerning)
• Healthy Eye = 12-15 words per line*
– Apprx. 50 ems
– http://www.thereisnopagefold....
4. Use the right – (dash)
• Hyphen -
– Used in compound modifiers (small-business owner) or to
break words into multiple l...
5. Use the right & (ampersand)
• The Elements of Typographic Style
– In heads and titles, use the best available
ampersand...
5. Use the right & (ampersand)
• The CSS
– span.amp { font-family:"Baskerville", "Goudy Old Style", "Palatino", "Book
Anti...
5. Use the right & (ampersand)
• Semantics for the overly correct
– <h1>Marley <abbr class="amp" lang="lt" title="et al">&...
5a. Use the right b (bold)
• Semantics for the overly correct
– “b” is for Bold
• Emphasis is on the Visual Impact
– “stro...
5b. Use the right i (italic)
• Semantics for the overly correct
– “i” is for Italicize
• Emphasis is on the Visual Impact
...
Bibliography / Resources
• http://www.alistapart.com/articles/on-web-typography/
• http://informationarchitects.jp/the-web...
Upcoming SlideShare
Loading in …5
×

Typography for the Web - 5 things to think about

1,232 views

Published on

Published in: Technology, Design
  • Be the first to comment

Typography for the Web - 5 things to think about

  1. 1. Typography for the Web: 5 things to consider
  2. 2. ty·pog·ra·phy (n) • The art or process of printing with type • The work of setting and arranging types and of printing from them • The general character or appearance of printed matter Definition according to http://dictionary.reference.com/browse/typography
  3. 3. ty·pog·ra·phy (n) • The Web is not print – Dynamic / Fluid – Accessible / Global – Semantic • No current definition for the Web • http://www.thereisnopagefold.com/
  4. 4. 1. Choosing a Font • “We read best what we read most.”* – Learned behavior, Personal and Relative Act • Simple and Sans Serif *Zuzana Licko http://www.alistapart.com/articles/on-web-typography
  5. 5. An example . . . • Fraktur or Blackletter – Designed in early 1500’s
  6. 6. 1. Choosing a Font • Web Safe Fonts – Arial – Times New Roman – Verdana – Georgia* – Courier** *Actually designed exclusively for the Web **Is default for most <code>, <pre> and editor views
  7. 7. 1. Choosing a Font • Popular Web Fonts – Impact – Lucida (console and sans) – Palatina – Tahoma – Comic Sans – Trebuchet
  8. 8. 1. Choosing a Font • @font-face – Archer as an example @font-face { font-family: "Archer"; src: url("fonts/archer-medium.otf") } body { font-family: "Archer", Arial, sans-serif; }
  9. 9. 2. Determine Font Size • Typographer’s Scale – 8, 10, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72
  10. 10. 2. Determine Font Size • The 100% Trick (base 16) – Typical browser type is set to 16pt (100%) • 12 Divided by 16 equals 0.75, therefor body {font-size:0.75em;} equals a defualt of 12pt or Base 16 • Now 12pt equals 0.75ems and 36pt equals 2.25em and so on • The 62.5% Trick (base 10) – Typical browser type is set to 16px (100%) • body {font-size:62.5%;} equals a defualt of 10px or Base 10 • Now 12px equals 1.2ems and 36px equals 3.6em and so on
  11. 11. 2. Determine Font Size • The 100% Trick (base 16) – 8, 10, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72 .base_16 { font-size:100%; } .base_16 h1 { font-size:2.25em; /* 16x2.25=36 */ } .base_16 h2 { font-size:1.5em; /* 16x1.5=24 */ } .base_16 h3 { font-size:1.125em; /* 16x1.125=18 */ } .base_16 h4 { font-size:0.875em; /* 16x0.875=14 */ } .base_16 p { font-size:0.75em; /* 16x0.75=12 */ }
  12. 12. 2. Determine Font Size • The 62.5% Trick (base 10) – 8, 10, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72 .base_10 { font-size:62.5%; } .base_10 h1 { font-size:3.6em; /* 10x3.6=36 */ } .base_10 h2 { font-size:2.4em; /* 10x2.4=24 */ } .base_10 h3 { font-size:1.8em; /* 10x1.8=18 */ } .base_10 h4 { font-size:1.4em; /* 10x1.4=14 */ } .base_10 p { font-size:1.2em; /* 10x1.2=12 */ }
  13. 13. 2. Determine Font Size <table cellspacing="25" align="center"> <tr> <td align="right"> <div class="base_16"> <h1>Heading 1 36pt</h1> <h2>Heading 2 24pt</h2> <h3>Heading 3 18pt</h3> <h4>Heading 4 14pt</h4> <p>Paragraph 12pt</p> </div> </td> <td> <div class="base_10"> <h1>Heading 1 36px</h1> <h2>Heading 2 24px</h2> <h3>Heading 3 18px</h3> <h4>Heading 4 14px</h4> <p>Paragraph 12px</p> </div> </td> </tr> </table> }
  14. 14. 3. kern·ing (adj,v) • To remove a portion of space between (adjacent letters) in preparation for printing. Definition according to http://dictionary.reference.com/browse/typography
  15. 15. 3. kern·ing (adj,v) • Monospaced or Fixed Pitch – Letter and characters occupy the same amount of horizontal space – Designed for typewriters . . . could only move same distance forward with each keystroke
  16. 16. 3. kern·ing (adj,v) • Problematic letter combinations – Wa, To, Ve, Ye, Fo, P body {font-family:Arial, Helvetica, sans-serif; font-size:62.5%;} h1 {font-size:15em; margin:0;} .kern {letter-spacing:-0.1em; *letter-spacing:-1.5em; font-style:normal;} <h1>Toronto</h1> <h1><span class="kern">T<comment></span></comment>o<!--[if IE]></span><![endif]-->ronto</h1>
  17. 17. 3. kern·ing (adj,v) • Why care? – Bad kerning disrupts readability – It’s rude
  18. 18. 3a. Line Length (not really kerning) • Do you find this hard to read annoying? Met reprehe ntorro voluptia nemolum aut eum vent molorepe od endanda preium laut vent prorianda quiderspid magnim quam aut fugit que odit eum quam ullectem restius soluptata verchit, et utem quamusa susdaestrum nis dendemped quatecatur mint facea voluptate idipsapiet dem essin nonserc hilloreceate voloritatur rem fuga. Et undandis et repercius. It, cum dolorer empores et aute deriore vent, vendaecus, qui beatem et optaspe riaersp ellaborerit, od magnimin eumet omniet pliat officiae non pratest opturi odigent, cus pro dolenectur? Temporro de moluptas dus, quat assuntio. Nequatquatia nos re se porem volutatque quasitaecti destist apidis dellit velesequi blam, tem rem ullorentus magnatio. Lor sunt, aciatqui ommodipidit occus. Ugiat lamenditi quatiis dolorio nsequam et experro blaut lab ideniminci dic to maximagni ut doluptas quaeperum ulpa voluptae peris ab ipiet fuga. Et moloribearum etur? Ihiligent volupta spiciaeperem qui sapicimus. Uciis voluptibus. La eum explabo. Namus et as mo intota nam con pro voloria dolorit, nam, nimi, consenda nullique voluptas quam num sin enditi aditis sinis dio consedi veliquod es et, ute voluptatecto ipis culliquis aut qui seque earum aut ut labores simagni tatur, se alitat re con plabore dolum volupta digendio ma cum ipictem porati voluptae nonescia pore quostiumqui bla dicienimo doluptae ipidusapid excea veliquatur? Ecusapi endusti quideliquia inctati imaximus num labores doluptatum non re rempori aspiene cullend ellaut reptatur? Ut laut volorenit ex et alicit, vellab ius et lignia porem ad eatendelicia nos reptia volorep udigenda experferit, si dest, totas vendicte volent am autas ut alibus, volumet ra voloratia necte velestorum is audandantias di doluptamust quis sectemo maxim quae volupta voluptatur? Namus, que suntios anducipsae nimenisquunt ut remporernam et harum velis nobitate dolore non re incia illorestrunt et expla quist quationessi comnis aspit as si conserf erspid modi beris dolest volum que non nest, quid magnitecte ent. Ciae dest et re resequiat enducient, num apis reribus eaquaer umendant enima aceperi squaepu daest, et aut parum eosam et voluptae. Nam iligenisciis re volluptas accum quis quiducim lacerrum ipsape pres ium facimil ipsapid quodit dignatemos exerit, omnis nonsecum dolore cupta nulluptatur, quatibus sum essed era solorec tatesse quaero cum verspel estios everspid mi, optaquo diatem sincte rem quo ex evene conse voluptate intorat emporit que sit, omnis ut as ma aut pore pa velentempe nonsequae doloruptae volo viderrovit lam alic tem fugiatq uatque sus nianimi, consedio blam, omnimporro volorio. Ferum quiscil illeserum seque iunt volesci se qui iniaes maios molenihilla abo.
  19. 19. 3a. Line Length (not really kerning) • How about this? Met reprehe ntorro voluptia nemolum aut eum vent molorepe od endanda preium laut vent prorianda quiderspid magnim quam aut fugit que odit eum quam ullectem restius soluptata verchit, et utem quamusa susdaestrum nis dendemped quatecatur mint facea voluptate idipsapiet dem essin nonserc hilloreceate voloritatur rem fuga. Et undandis et repercius. It, cum dolorer empores et aute deriore vent, vendaecus, qui beatem et optaspe riaersp ellaborerit, od magnimin eumet omniet pliat officiae non pratest opturi odigent, cus pro dolenectur? Temporro de moluptas dus, quat assuntio. Nequatquatia nos re se porem volutatque quasitaecti destist apidis dellit velesequi blam, tem rem ullorentus magnatio. Lor sunt, aciatqui ommodipidit occus.
  20. 20. 3a. Line Length (not really kerning) • Healthy Eye = 12-15 words per line* – Apprx. 50 ems – http://www.thereisnopagefold.com/ *Source is unremembered. I think I read it somewhere between my sophomore and junior year in college. http://webusability.com/article_line_length_12_2002.htm offers great advice but doesn’t follow it. Funny.
  21. 21. 4. Use the right – (dash) • Hyphen - – Used in compound modifiers (small-business owner) or to break words into multiple lines • En Dash – (&ndash;) – Used to designate lengths of time like dates and time (from 6–7PM or Mon–Fri) • Em Dash — (&mdash;) – Used as a paranthetical • At that age I once stabbed my best friend, Fred, with a pair of pinking shears in the base of the neck, enraged because he had been given the comprehensive sixty-four-crayon Crayola box — including the gold and silver crayons — and would not let me look closely at the box to see how Crayola had stabilized the built-in crayon sharpener under the tiers of crayons. Nicholson Baker’s The Mezzanine
  22. 22. 5. Use the right & (ampersand) • The Elements of Typographic Style – In heads and titles, use the best available ampersand.* *Handcrafted CSS by Dan Cedarholm, http://www.simplebits.com Graphic: http://simplebits.com/notebook/2008/08/14/ampersands-2/
  23. 23. 5. Use the right & (ampersand) • The CSS – span.amp { font-family:"Baskerville", "Goudy Old Style", "Palatino", "Book Antiqua", Georgia, ser • The Markup – <h1>Marley <span class="amp">&amp;</span> Sons</h1>
  24. 24. 5. Use the right & (ampersand) • Semantics for the overly correct – <h1>Marley <abbr class="amp" lang="lt" title="et al">&amp;</abbr> Sons</h1>* *http://dictionary.reference.com/browse/ampersand
  25. 25. 5a. Use the right b (bold) • Semantics for the overly correct – “b” is for Bold • Emphasis is on the Visual Impact – “strong” is also for Bold • Emphasis is on the Semantics (stress, pitch, SEO)
  26. 26. 5b. Use the right i (italic) • Semantics for the overly correct – “i” is for Italicize • Emphasis is on the Visual Impact – “em” is Emphais • Emphasis is on the Semantics (stress, pitch, SEO)
  27. 27. Bibliography / Resources • http://www.alistapart.com/articles/on-web-typography/ • http://informationarchitects.jp/the-web-is-all-about-typography-period/ • http://webtypography.net/ • http://www.webstyleguide.com/wsg3/8-typography/5-typographic-emphasis.html • http://files.jeffcroft.com/presentations/fowd_april_2007/JeffCroft_FOWD_Worksh op_Elegant_Web_Typography.pdf • http://www.thedesigncubicle.com/2008/12/10-common-typography-mistakes/ • http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and- techniques/ • http://www.socialh.com/2009/11/47-typography-tools-for-web-design.html • http://www.simplebits.com

×