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.
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:
- Convert brand fonts 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 or commercial offering.
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:
- headlines are set in MyFonts.com webfont Andy
- Lucinda Grande for the copy makes for an entirely different character than would Arial or Times.
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:
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|
- Getting started with Google Fonts—Google
- Google Font Directory—Google
- Typography Basics – Some Fundamentals for Body Copy—Blogging.com
- 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)