Choosing and Using Webfonts
A guide for web developers
Our guide will (re)aquaint you with the process of delving into the universe of possibilities offered by webfonts.
When it’s no longer a case of Verdana or Georgia, Arial or Times, but of finding two or three from the 30,000+ fonts now enabled for web licensing at MyFonts, where does anyone start to make any kind of informed decision?
Until very recently, choosing which font to use for a website really just came down to just one question — sans or serif. And while webfonts make that question a little more sophisticated — sans or serif, display, headline or body — it’s the choice within those broad definitions that has grown beyond exponentially.
To start with, 30,000 refers to every single font style available — regular, bold, italic, narrow condensed black slanted, and so on. A typeface family like Helvetica or Times New Roman, to use the more familiar names, will be comprised of several styles. The most typical constellation is a Regular (or Roman), an Italic, a Bold and a Bold Italic, four individual fonts. Some of our families consist of upwards of fifty styles; Proxima Nova by Mark Simonson, for example, has 126.
Well, if one thinks in terms of families, that 30,000+ becomes a more manageable 9,000 — only some of which will be Proxima Nova-style superfamilies. For most purposes, a modest family of four or six styles will serve very well.
Logos, headers and display faces
To further narrow our options, we will subdivide that 9,000 into three categories: display, headline and text (body). Most of our webfonts will fall into the first category, and will be things like elaborate scripts, reproductions of handwriting, grunge and similar distortion effects, and even ornaments and dingbats. These types of font are best reserved for very limited use, and are ideal for headers and logos, where character and individuality are more important than good legibility or a clearly stated message. There’s much to choose from in this category, but since not everyone wants their website header to look like The Times, that’s probably a good thing. Your choices here will be informed as much by personal taste, aesthetic expectations and stylistic aspiration as by any notion of the ‘correct’ way to do things.
Headlines and titles
The second category, headlines, will be where most web designers will start to flex their typographic design muscles. The scope here for creating distinctive, eye catching headlines is enormous and will be where webfonts really come into their own. The potential for creativity and radical experimentation may be greater in the realm of logos and headers, but those are largely unchanging layout elements, and the same result could still be achieved with images.
In these days of dynamic, user managed content, the ability to style headlines, quotes and navigation features with webfonts while losing nothing in search optimization or accessibility, make them an incredibly powerful asset of any designer’s toolbox.
Suggested search terms:
Body text and paragraphs
Webfont families suitable for sustained reading of long passages of text are probably limited to less than 100. Most designers will want to have a selection of maybe five or six that they use regularly, that cover most scenarios. The key here is not only to know your audience’s reading habits and expectations as well as technical knowledge and uptake, but to be clear in your objectives for encouraging sustained reading.
Suggested search terms:
To conclude, webfonts add greater choice and control to designers' use of text, but will require some to familiarise themselves with a new visual language. But the basics, like the common courtesies in any foreign language, are well within any web professional's ability to take on a new skill set.Back...
Posted 15 Feb, 2011 by anthony-noel
Filter articles by category:
Filter articles By tag:
- Autotranslate (1)
- CSS (3)
- Drop caps (1)
- Fashion (1)
- Font stacks (1)
- grunge effect (1)
- hand drawn (1)
- Hosting (1)
- Illustrative type (2)
- Licensing (1)
- Line height (3)
- Logotype (1)
- natural media (1)
- OpenType (1)
- Print design (1)
- Publishing (1)
- Sans serif (1)
- Site roundups (1)
- Subsetting (1)
- Web design (2)
- Z-index (1)
Layering Type with CSS Z-index
Create colorful standout text effects by using the CSS properties z-index and position to layer…
Getting Started with Font Stacks
A font stack is the instruction in a page of CSS code that tells a browser what fonts to display,…
Webfonts and Autotranslate
Webfonts offer greater control and visual consistency when using automatic site translation. With a…