Home > new advertising > Web Typography

Web Typography

August 8th, 2010

Things are looking up for web designers who are typographers at heart.
Should you -like myself- have arrived at the conclusion that typography provides a powerful means for shaping and reflecting brand personalities, read on. Good old typography is making a come back with webfonts for the internet.

Unlike common believe the web offers far more variety and opportunities for typography than does print. The web is almost awaiting the ideas you have for making good use of typography on the web.

 

Apple demos HTML5, CSS3 und Javascript.

Open web standards that are reliable, highly secure, and efficient with no need for designers to resort to flash or flex work-arounds. Apple beautifully demos advanced graphics, typography, animations, and transitions capabilities here.—[Safari browser required, more modern browsers to follow suit]

 

Using branded typefaces on the web

The scarcity of available webfonts makes good use of non system fonts even more valued. I have not tried it yet but here is how it should work:

  1. Convert branded face to .woff and/or .eot format
  2. Make font resources available on server
  3. Integrate font via Google fonts technology or webfonts service

Create font with affiliates such as Google, Webfonts, Fontshop and make the font available through vendors. You may also want make the font available publicly either as a free offering or offer it commercially through your font vendors. Every little helps, advertising is what it is and what helps others helps your business as Leo Burnett knew.

 

The New Yorker

the courage of others: webfonts sample

Here’s a sampling and recent home grown production on how nicely non-system fonts integrate with your web design:

  1. headlines are set in Fonts.com webfont Andy
  2. Lucinda Grande for the copy makes for an entirely different character than would Arial

View sample here.

 

The New Yorker

The New Yorker with its so very characteristic typeface, would make life easier on thermselves and search engines should The New Yorker pick up on my entry and switch to the technology featured here.

 

Using non-system fonts on the web

Fontshop Germany, whose noble font catalogues I keep around, calls for a new era in webdesign. With a bit of self initiative, you can now use any typface of your choice for your client’s brand sites. Today all websites must be built with social capabilities enabled by a robust content managements system [CMS] such as typepad, wordpress and the likes, keep this in mind before you go overboard with good old typography. Two systems are avaible:

  1. Webfonts by Fonts.com or Fontshop Germany
  2. Google Fonts

 

Using system fonts for the web

Windows fonts / Mac fonts / Font family
Normal style Bold style
Arial, Arial, Helvetica, sans-serif Arial, Arial, Helvetica, sans-serif
Arial Black, Arial Black, Gadget, sans-serif Arial Black, Arial Black, Gadget, sans-serif
Comic Sans MS, Comic Sans MS5, cursive Comic Sans MS, Comic Sans MS5, cursive
Courier New, Courier New, Courier6, monospace Courier New, Courier New, Courier6, monospace
Georgia1, Georgia, serif Georgia1, Georgia, serif
Impact, Impact5, Charcoal6, sans-serif Impact, Impact5, Charcoal6, sans-serif
Lucida Console, Monaco5, monospace Lucida Console, Monaco5, monospace
Lucida Sans Unicode, Lucida Grande, sans-serif Lucida Sans Unicode, Lucida Grande, sans-serif
Palatino Linotype, Book Antiqua3, Palatino6, serif Palatino Linotype, Book Antiqua3, Palatino6, serif
Tahoma, Geneva, sans-serif Tahoma, Geneva, sans-serif
Times New Roman, Times, serif Times New Roman, Times, serif
Trebuchet MS1, Helvetica, sans-serif Trebuchet MS1, Helvetica, sans-serif
Verdana, Verdana, Geneva, sans-serif Verdana, Verdana, Geneva, sans-serif
Symbol, Symbol (Symbol2, Symbol2) Symbol, Symbol (Symbol2, Symbol2)
Webdings, Webdings (Webdings2, Webdings2) Webdings, Webdings (Webdings2, Webdings2)
Wingdings, Zapf Dingbats (Wingdings2Zapf Dingbats2) Wingdings, Zapf Dingbats (Wingdings2Zapf Dingbats2)
MS Sans Serif4, Geneva, sans-serif MS Sans Serif4, Geneva, sans-serif
MS Serif4, New York6, serif MS Serif4, New York6, serif

 

 

Categories: new advertising

 |  PDF Version

Comments are closed.
%d bloggers like this: