Web Type: 80% Science, 20% Art
Upcoming SlideShare
Loading in...5
×
 

Web Type: 80% Science, 20% Art

on

  • 12,248 views

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

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

Statistics

Views

Total Views
12,248
Views on SlideShare
12,108
Embed Views
140

Actions

Likes
48
Downloads
334
Comments
2

14 Embeds 140

http://www.personalmag.rs 52
http://cahcepu.com 26
http://www.slideshare.net 20
http://lanyrd.com 18
http://www.techgig.com 5
http://onomadesign.com 4
http://lokalrundfunktage.de 4
https://twitter.com 3
http://www.m.techgig.com 2
http://www.netvibes.com 2
http://jontangerine.com 1
http://eduparacrecer.blogspot.com 1
http://www.blogodak.com 1
https://www.linkedin.com 1
More...

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Heidelberg Windmill press at Yee Haw Industries, Knoxville, TN. <br /> http://www.yeehawindustries.com/ <br />
  • <br />
  • Proportion relating to geometry. c.1300, \"knowledge (of something) acquired by study,\" also \"a particular branch of knowledge,\" from O.Fr. science, from L. scientia \"knowledge,\" from sciens (gen. scientis), prp. of scire \"to know,\" probably originally \"to separate one thing from another, to distinguish,\" related to scindere \"to cut, divide,\" from PIE base *skei- (cf. Gk. skhizein \"to split, rend, cleave,\" Goth. skaidan, O.E. sceadan \"to divide, separate;\" Proto-Indo-European 5,500 (approx 3,500 BC) <br />
  • Insular art. — c.1225, \"skill as a result of learning or practice,\" from O.Fr. art, from L. artem, (nom. ars) \"art, skill, craft,\" from PIE *ar-ti- (cf. Skt. rtih \"manner, mode;\" Gk. arti \"just,\" artios \"complete;\", from base *ar- \"fit together, join\" Proto-Indo-European 5,500 (approx 3,500 BC) <br />
  • <br />
  • <br />
  • Uses tables. No heading hierarchy, no semantics, no alt attribute values. Visually interesting, but flawed web design. <br />
  • Stylistic ligatures. Yum, but not worth it. <br />
  • Obliques, faked in an image! Argh. Font synthesis in CSS can have the same effect. Lucida oblique, anyone? <br />
  • With font-variant (small-caps), font-weight, font-stretch (condensed), and font-size-adjust (x-height) the field is wide open to synthesis, but is it a good thing? <br />
  • Animated gifs. The possibilities are scary. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • The eternal (empty) debate on the Web. Hinting and x-height are more important at lower resolutions. <br />
  • Jost Hotchuli - Detail in Typography <br />
  • <br />
  • <br />
  • <br />
  • Discuss file types: OTF TTF Postscript <br /> Discuss FONT STACK <br />
  • Also, Webdings but we should we count that? <br />
  • 1. ClearType in Vista still uses Windows’ old GDI (Graphic Device Interface) <br /> 2. Vista does ship with the new WPF (Windows Presentation Foundation) - ciurretly used in Silveright - but IE does not use it <br /> 3. Firefox - Cairo for drawing, ATSUI for rendering. Cairo == API layer over quartz <br /> 4. Also: Kerning variations. <br />
  • <br />
  • c.1225, \"skill as a result of learning or practice,\" from O.Fr. art, from L. artem, (nom. ars) \"art, skill, craft,\" from PIE *ar-ti- (cf. Skt. rtih \"manner, mode;\" Gk. arti \"just,\" artios \"complete;\", from base *ar- \"fit together, join\" Proto-Indo-European 5,500 (approx 3,500 BC) <br />
  • c.1225, \"skill as a result of learning or practice,\" from O.Fr. art, from L. artem, (nom. ars) \"art, skill, craft,\" from PIE *ar-ti- (cf. Skt. rtih \"manner, mode;\" Gk. arti \"just,\" artios \"complete;\", from base *ar- \"fit together, join\" Proto-Indo-European 5,500 (approx 3,500 BC) <br />
  • This is my grid. There are many like it but this one is mine. <br />
  • Starting with body text. <br /> Read it. <br /> Test. <br />
  • Starting with body text. <br /> Read it. <br /> Test. <br />
  • <br />
  • <br />
  • <br />
  • Leonardo of Pisa, known as Fibonacci 202 book Liber Abaci <br />
  • <br />
  • Painting picture. Douglas aircraft factory during World War 2. <br />
  • <br />
  • Walking experiences. Photographer: Sergio Vega. The Amazon, Brazil. On FIRE. <br />
  • <br />
  • <br />

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

  • 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/ Pontificates 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- ‘fit 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 ‘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
  • 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 Jeff 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 & file 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