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 from them• The general character or appearance of

printed matter

Definition according to http://dictionary.reference.com/browse/typography

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/

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

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 exclusively for the Web**Is default for most <code>, <pre> and editor views

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.otf")}

body {font-family: "Archer", Arial, sans-serif;}

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.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

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 */ }

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 */ }

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>

}

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

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

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>

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 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.

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.

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.

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

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.comGraphic: http://simplebits.com/notebook/2008/08/14/ampersands-2/

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>

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

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)

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)

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-techni

ques/

• http://www.socialh.com/2009/11/47-typography-tools-for-web-design.html • http://www.simplebits.com