Healing Arts Web Design

Typography, Web Design

Considerations for @font-face Web Typography

Web Typography is Evolving Fast

I don’t think there’s much debate that the growing popularity of @font-face has been a strong step forward for web typography. Not only has it allowed designers previously constrained to a limited set of typefaces to be more creative and effective with their online designs, but it has also encouraged a proliferation of high-quality, free fonts available for use on websites. There are a few shortcomings with @font-face compared to other web typography services such as TypeKit – we’re limited to using fonts with the appropriate licenses, and there are a lack of multiple weight/style variants with lots of @font-face approved fonts. Even still, in my eyes @font-face remains the most cost effective and easy to manage choice for beautiful web typography.

Web Font Considerations

There are a ton of resources that can help you with implementing the technical side of @font-face, so I won’t get into those details here. FontSpring has the latest snytax for bullet-proof @font-face implementation, which is vital to ensure that your fonts are seen correctly by your visitors. I’ve listed some not-so-technical considerations when implementing @font-face in your designs.

  • 1. Pick your font stack with care.

    Even though @font-face is widely supported, there is still the chance that your web fonts will not load. We can prepare for this by declaring a solid font stack that will maintain the visual appeal of our design and not break any layouts. A great example of this issue is when using a font that is relatively small compared to many default font sizes. League Gothic, a popular typeface with designers, falls into this category. Since it is a condensed, small typeface, a default font such as Arial, Helvetica or Verdana will appear much, much larger than League Gothic would have rendered if it fails to load. This can especially be a problem when working with grid layouts and large headlines. Declaring a condensed font such as Impact (while not ideal), certainly will help to relieve this issue. Take the time to explore different fallbacks, it will make a difference.

  • 2. Watch your font style and font weight declarations.

    This is an important consideration when handing over your design to your client using a CMS to update content. If you don’t have bold and italics versions of the font you are embeddeding, browsers will attempt to fake bold and italics styles (similar to “faux” character settings for Photoshop users). Even if you do have the different weight of your font available, we still need to be careful. Roger Johannson from 456bereastreet.com has an excellent article about this very issue that is very complete so I won’t repeat the concepts here. The key is to declare font-weight:normal and font-style:normal; in your original @font-face declaration.

  • 3. Resources for finding new web fonts.

    I’ve had such a great experience using Font Squirrel that its hard to recommend any other site for high-quality, free fonts that you can use for your sites. If they don’t have a font that you’re looking for, and you’d like to create @font-face compatible versions of a web font you own, you can use their @font-face generator. They’ll create the appropriate files and create a CSS file that you can copy and paste into your stylesheet.

    Some other great choices for quality web fonts are FontSpring, Lost Type Co-Op, and Font Fabric.

Some Fonts I’ve Been Using

Tittilium Text

Titillium Text is a modern sans-serif that will continue evolving as students attending the Accademia di Belle Arti di Urbino in Italy cooperatively work on the typeface. It works as an uppercase display font quite well. It also has a number of different weights available for free for other uses.

Download from FontSquirrel

Aller

Aller is another large, modern sans-serif family great for headlines. It has a little more of a playful character to it, which is why I thought it was perfect for a summer camp design I recently completed. Aller Display is particularly good for bold headings.

Download from FontSquirrel

Droid Sans

Since this site is set in Droid Sans, you don’t have to look very far for an example of what it can do for body copy. Google had this font developed for use on its handheld devices, and its clarity, space, and readability make for a useful and flexible solution for lots of websites.

Download from FontSquirrel

Bebas Neue

Bebas Neue (released 2010) is an updated version of Bebas (released 2005), a condensed sans-serif that is great for (you guessed it), headlines.

Bebas Neue is far better for website implementation over its predecessor if only for the reason that its size is a lot closer to standard default sizes. If the font fails to load, you’re layouts will be more in tact. You’ll see this typeface all over the place once you start looking, and for good reason.

Download from FontSquirrel

Get More Helpful Content

Sign up for our Inspired Newsletter to get helpful content created just for our subscribers.

Sending

♥ We don't spam or share email addresses, ever.

About the Author:

David is an experienced web designer and WordPress developer who runs Healing Arts Web, offering quality custom websites to small businesses and teachers. He is also a musician, avid disc golfer and espresso enthusiast.

Leave a Comment

Your email address will not be published. Required fields are marked *