Slides from a talk given at SkillSwap Brighton in Jan, 2009 with an accompanying blog post

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

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

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

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

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

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

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

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

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

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

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

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

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

14. And on
Jeff Cro-
Monday, March 9, 2009

15. And on
Jason Santa Maria
Monday, March 9, 2009

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

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

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

19. Serif & Sans
Monday, March 9, 2009

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

21. Any better?
Georgia.
Monday, March 9, 2009

22. Now?
Futura.
Monday, March 9, 2009

23. And this?
Georgia.
Monday, March 9, 2009

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

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

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

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

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

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

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

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

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

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

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

35. 4. Asides, multiplied
Monday, March 9, 2009

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

37. 6.The end
Monday, March 9, 2009

38. Art
Applying what you know
Monday, March 9, 2009

39. Grids? Grenades!
Monday, March 9, 2009

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

41. Thank you!
Monday, March 9, 2009

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