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.
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/
      ...
Science
                 From Proto-Indo-European base
                        *skei- ‘to split, rend, cleave’
           ...
Art
                 From Proto-Indo-European base
                        *ar- ‘fit together, join’
                      ...
Print
                        Wrestling & wind bags
        by Yee-Haw Industries, Knoxvi)e, Tennessee



                ...
Web typography?
                        http://typedeskref.com/
              The Typographic Desk Reference
          by ...
Print != web
                        http://typedeskref.com/
                  with CSS and images disabled




Monday, Ma...
But, but, the ligatures
          NB. For ‘st’ use &#64262 instead if the
     typeface has it, or browser has a way of find...
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               ...
Serif versus sans
                                                 ❖


                                                   ...
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 du...
Core Web Fonts
                   Andale Mono by Steve Matteson

                   Arial by Robin Nicholas and Patricia S...
The Raster Wars
                        Different operating system,
                            different browser,
         ...
Choose faces based on:




            i. The text!
            ii. And, legibility:
              i. Is the weight sufficie...
The grid          How they do — traditional grids
                                      ❖


                              ...
Wim Crouwel
                        One grid to rule them a).

          Vormgevers poster for the Stedelik Museum, Amster...
‘I did it my way…’
                         A baseline web grid

           (Props to Sinatra for the tangerine cardy and ...
Tangerine grids



                For enacted narratives, read the text!
            ❖


              Choose type based ...
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




    ...
Thank you!




Monday, March 9, 2009
Credits



              Yee Haw Industries Heidelberg Windmi) Press: http://www.flickr.com/photos/tnboriqua/1176715935
   ...
Upcoming SlideShare
Loading in …5
×

Web Type: 80% Science, 20% Art

17,341 views

Published on

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

  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❤❤❤ http://bit.ly/2Q98JRS ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ♥♥♥ http://bit.ly/2Q98JRS ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Web Type: 80% Science, 20% Art

  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

×