Things are looking up for web designers who believe in the power of typography.
Should you 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.
The web offers far more variety and opportunities for typography than does print. The web is eager to demonstrate your ideas for good use of typography on the web.

 

Apple demos HTML5, CSS3 and Javascript.

Open web standards have proven reliable, are more secure and efficient. No more need for designers to resort to flash or flex workarounds. Apple demos newer capabilities here.. Capabilities such as advanced graphics, typography, animation, and transitions. [Safari browser required, more modern browsers to follow suit]

 

On the use of typefaces for branding on the web

The growing availability of webfonts has removed you from being restricted to the few system fonts that are applicable across systems and browsers. I have not tried it yet but here is how it should work:

  1. Convert brand fonts 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 or commercial offering.

 

dma typography

A mix of webfont (Andy) and system font (Lucida Grande). An attempt to avoid this iconic Bavarian food blog to being viewed as high brow gourmet journal. The brand font ressembles fonts used by Bavarian butcher shops, and the fontface for the copy is, well… readable wihtout drawing attention to it. The use of these two typefaces were meant to make Petra Hammerstein’s blog appear normal or say super normal.

The courage of others: webfonts sample

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

  1. headlines are set in MyFonts.com webfont Andy
  2. Lucinda Grande for the copy makes for an entirely different character than would Arial or Times.
View font Andy

 

The New Yorker

The New Yorker

The New Yorker with its world famous, characteristic typeface has passed the test of time. They would make life easier on thermselves and search engines should The New Yorker pick up on this 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.

For a close reflection, I don’t mean the use of a webfont for the brand name only or for headlines. What I really mean is to use a webfont for the copy text to help reflect the brand character implicitly.

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

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

 

 


 

Please note:
This entry may have contributed to the decision of The New Yorker to change it’s characteristic typeface from machine unreadable bitmap to machine readable webfont.

 

 


Also published on Medium.

Share on StumbleUpon1Tweet about this on TwitterGoogle+0Digg thisShare on LinkedIn0Pin on Pinterest0Email to someoneShare on Facebook0