Webfonts Banish Bland Typography

The era of bland website typography is rapidly fading with the advent of webfonts — typefaces specifically designed (or redesigned) to be crisp and clear on screen. The use of webfonts allows a designer to use fonts that are not installed on the viewer’s computer.

How to use: most webfont repositories allow the web developer to use fonts from their library by including a link to the font inside the head tag of the web document. Then the font family will need to be named in a cascading stylesheet (CSS) linked to that web document. One example of a link included in the <head> of your document looks like this:

<link href=’|Oswald:400,700′ rel=’stylesheet’ type=’text/css’>

Simply include the font name in your CSS just as you would with any system font. Here’s an example:

h1 { font-family: ‘Oswald’, Helvetica, Arial, sans-serif; font-weight: 700; }

The above style names the webfont inside single quote marks, followed by a list of alternates for viewers with really old browsers that do not support webfont use. A CSS style can be placed in the head of the document, or linked to the document. Find out more about using CSS here:

What’s the big deal?

There are important benefits to using webfonts:

Brand Consistency

Use the same typefaces on and offline so your brand looks the same everywhere; brochures, business stationary, website, or mobile apps

Search Optimization

Unlike a typographic image, a webfont uses “live” text that is searchable, and translatable

User Engagement

Webfonts enhance the your site’s visual appearance and the ability to translate text enhances its usability

Site Performance

The use of webfonts eliminates the need to an image for each instance of styled text, resulting in less bandwidth use

Sources for web fonts:

Please note that some of these resources require a subscription, however, a free account may be available for low-volume use.

And here’s a resource to preview how your site would look with various web fonts: and choose a font for various text elements, such as headlines <h1>, paragraphs <p>, emphasized text <em>, and links <a>.

Portfolio Items