Web Type: 80% Science, 20% Art

80% Science, 20% Art Jon Tan Monday, March 9, 2009

A kid on a plane Loves language. Likes tangerines & Toblerone. Works at http://omniti.com/ Pontiﬁcates at http://jontangerine.com/ Monday, March 9, 2009

Science From Proto-Indo-European base *skei- ‘to split, rend, cleave’ —knowledge. Vitruvian Man — Leonardo DaVinci (1487). Monday, March 9, 2009

Art From Proto-Indo-European base *ar- ‘ﬁt together, join’ —ski). Detail of χρ (‘Chi-Rho’) in the Book of Ke)s (Leabhar Cheanannais), c. 800AD Monday, March 9, 2009

Print Wrestling & wind bags by Yee-Haw Industries, Knoxvi)e, Tennessee The opening slide image was of their press! Monday, March 9, 2009

Web typography? http://typedeskref.com/ The Typographic Desk Reference by Theodore Rosendorf (Oak Kno)) 2009. Monday, March 9, 2009

Print != web http://typedeskref.com/ with CSS and images disabled Monday, March 9, 2009

But, but, the ligatures NB. For ‘ﬆ’ use &#64262 instead if the typeface has it, or browser has a way of ﬁnding a fa)-back (FF/OS X). Test for taste Monday, March 9, 2009

Oops! Before: Georgia Oblique? Monday, March 9, 2009

Ah, that’s better A+er a bit of Twittering: Georgia Italic! Monday, March 9, 2009

Endless possibilities Bruce Lawson’s Zen Garden Geocities spoof. Monday, March 9, 2009

Some better than others The Elements of Typographic Style Applied to the Web Monday, March 9, 2009

And so on Simon Pascal Klein Monday, March 9, 2009

And on Jeﬀ Cro- Monday, March 9, 2009

And on Jason Santa Maria Monday, March 9, 2009

Sti), it could get TRICKY Monday, March 9, 2009

Choosing typefaces ❖ Science (legibility, serifs, sans & ﬁle types) ❖ The grid Breaking down the parts Monday, March 9, 2009

Serif versus sans ❖ Core web fonts / stacks / @font-face ❖ Choosing faces ❖ X-height ❖ Humanist, grotesque, modern, geometric, etc? For your consideration ❖ Performance: Hinting, CRT versus LCD / LED Monday, March 9, 2009

Serif & Sans Monday, March 9, 2009

What does it say? Futura. Monday, March 9, 2009

Any better? Georgia. Monday, March 9, 2009

Now? Futura. Monday, March 9, 2009

And this? Georgia. Monday, March 9, 2009

Ta-daa! You were right! (And it happens to be true.) Ask me about duck fat .ies, sometime. Monday, March 9, 2009

Core Web Fonts Andale Mono by Steve Matteson Arial by Robin Nicholas and Patricia Saunders Arial Black by Robin Nicholas and Patricia Saunders Comic Sans MS by Vincent Connare Courier New by Adrian Frutiger Georgia by Matthew Carter Impact by Geoffrey Lee Times New Roman by Stanley Morison with Starling Burgess and Victor Lardent Trebuchet MS by Vincent Connare Verdana by Matthew Carter Monday, March 9, 2009

The Raster Wars Different operating system, different browser, different result. Monday, March 9, 2009

Choose faces based on: i. The text! ii. And, legibility: i. Is the weight sufficient? ii. How does the x-height affect the weight? iii. How does the leading affect the weight? iv. How are the faces hinted across different platforms? Monday, March 9, 2009

The grid How they do — traditional grids ❖ ‘I did it my way‘ — baseline web grid ❖ Box it up. Monday, March 9, 2009

Wim Crouwel One grid to rule them a). Vormgevers poster for the Stedelik Museum, Amsterdam, by Wim Crouwel, 1968. (Happy 80th birth year, Wim!) Monday, March 9, 2009

‘I did it my way…’ A baseline web grid (Props to Sinatra for the tangerine cardy and skin tone) Monday, March 9, 2009

Tangerine grids For enacted narratives, read the text! ❖ Choose type based on content, platform hinting at a give size and x-height ❖ ❖ Try in the layout — adjust leading (line-height) to suit ❖ Basic leading is god — apply a multiple or division of it to everything ❖ Throw in some Fibonnaci numbers For example… Monday, March 9, 2009

1. Basic body text & leading Monday, March 9, 2009

2. One lead is the grid! Monday, March 9, 2009

3. Head & lead, multiplied Monday, March 9, 2009

4. Asides, multiplied Monday, March 9, 2009

5. Scale and Fibonacci numbers Monday, March 9, 2009

6.The end Monday, March 9, 2009

Art Applying what you know Monday, March 9, 2009

Grids? Grenades! Monday, March 9, 2009

‘An object can never compete with an experience.’ —Hamish Fulton, walking artist, Bristol Paradise on Fire I—Sergio Vega, (Brazil), 2007 Monday, March 9, 2009

Thank you! Monday, March 9, 2009

Credits Yee Haw Industries Heidelberg Windmi) Press: http://www.flickr.com/photos/tnboriqua/1176715935 ❖ ❖ Sinatra: http://www.flickr.com/photos/marcelonoah/2939542950 ❖ Copy used in examples .om The God-Idea of the Ancients (or Sex in Religion) by Eliza Gamble: http://www.authorama.com/god-idea-of-the-ancients-1.html ❖ Auto polo: http://www.flickr.com/photos/library_of_congress/2477626151/ ❖ Semi-colon sort: http://www.flickr.com/photos/dotjay/2998872553/ ❖ Boxers: http://www.flickr.com/photos/library_of_congress/2162651915/ ❖ Painting the wing: http://www.flickr.com/photos/library_of_congress/2178436353/ ❖ Grenade thrower: http://www.flickr.com/photos/library_of_congress/2179130295/ ❖ Amazon photograph © Sergio Vega, 2007: http://podcasts.thestranger.com/2008/05/invisible_sergio_vega Monday, March 9, 2009

http://www.personalmag.rs	45
http://cahcepu.com	26
http://www.slideshare.net	20
http://lanyrd.com	12
http://www.techgig.com	4
http://onomadesign.com	4
http://lokalrundfunktage.de	4
http://www.netvibes.com	2
http://eduparacrecer.blogspot.com	1
http://www.blogodak.com	1
http://jontangerine.com	1

Web Type: 80% Science, 20% Art

by Jon Tan on Mar 09, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

11 Embeds 120

Statistics

Web Type: 80% Science, 20% Art — Presentation Transcript