The state of web type

• The State of WEB TYPE Auckland Web Meetup  20 May 2010  Matthew Buchanan

 

• A seventh-grader writing a book report on Microsoft Word had more font choices than the person designing Esquire magazine’s website or the Ikea online catalog. —D EBO RA H N ET BURN, LO S AN GE LE S TI ME S latimesblogs.latimes.com/home_blog/2010/05/the-changing-typography-of-the-web.html

 

• BROWSER FONTS Verdana Arial sans Helvetica SERIF Lucida Tahoma Trebuchet Calibri Times Georgia SERIF Palatino Cambria

 

• IMAGE REPLACEMENT <h1>My Title</h1> h1 { background-image: url(title.png); text-indent: -999em; overflow: hidden; } Any typeface Not dynamic the the GOOD Consistent rendering Typographic control BAD Inefficient Text selection Widest support Images-off issue

 

• FLASH REPLACEMENT <h1>My Title</h1> <script> if(typeof sIFR == “function”) sIFR.replaceElement(“h1”, “font.swf”); </script> Reasonably secure Licensing the the GOOD Consistent rendering Wide support BAD Configuration Text selection Text scaling No Apple love

 

• CANVAS / VML REPLACEMENT <h1>My Title</h1> <script> Cufon.set(“fontFamily”, “League Gothic”); Cufon.replace(“h1”); </script> Reasonably secure Licensing the the GOOD Consistent rendering No plugins BAD Font conversion Configuration Wide support Screen readers Works on iPhone OS FOUT

 

• FONT-FACE EMBEDDING @font-face { } First introduced in CSS2 recommendation Removed from CSS2.1 specification Implemented in IE4, September 1997 —Proprietary EOT format Now in Firefox 3.5, Safari 3.1, Opera 10, Chrome 4

 

• Being a web designer will soon require a deeper understanding of typography and how typefaces work.

 
Subscribe to my Blog Feeds.