Web Typography
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:
- Convert branded face to .woff and/or .eot format
- Make font resources available on server
- 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 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:
- headlines are set in Fonts.com webfont Andy
- 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:
- Webfonts by Fonts.com or Fontshop Germany
- 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 (Wingdings2, Zapf Dingbats2) | Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2) |
| MS Sans Serif4, Geneva, sans-serif | MS Sans Serif4, Geneva, sans-serif |
| MS Serif4, New York6, serif | MS Serif4, New York6, serif |
- Webfonts—Fonts.com
- Getting started with Google Fonts—Google
- Google Font Directory—Google
- Webfont loader—Google
- Web Typography—Wikipedia
- font-face and Webfonts: How To Use Them—Designer Break
- The New Yorker
- Sneak Peek: @font-face in Firefox 3.1—Ralf Herrmann
- The best site with webfonts?—Ralf Herrmann
- HTML5 Showcase—Apple
- 15 excellent examples of web typography—I love typography
- New Yorker Magazine Font—webpaddle
- Online Font Converter—woff format
- New Yorker mag title stolen from here—Sarah Wilson
- Will Marketing Technology Remember Asimov’s First Law?—Greg Andersen, BBH Labs (on HTML 5)
