Web Designer’s Guide To Website Fonts

October 6, 2011 - Posted by to web design

Web designers work hard to locate the right font for their web design projects. Since poorly chosen type can diminish an otherwise perfect design, selecting the right font for a site is an important job. We explore the popular options available today for locating and using special web fonts on the web.

web designer font options

The popularity of custom web fonts has been growing since the Internet's early days, but recently that growth has exploded.  Web designers don't like being forced to use a small set of web-safe fonts, such as Arial and Times New Roman, which almost all users already have available on their system.  Simply embedding them in images is often impractical for large sites and it is not user-friendly, so quite a few options have been developed to solve the problem.

sIFR, or scalable Inman Flash Replacement, was once a popular font option to provide powerful flexibility — although it is known for its tricky implementation and display issues.  At one time sIFR was a great solution, but its reliance on Flash to display type and the wave of mobile devices without Flash support has pushed the web design community onto newer options.  Since interest and development has stopped, many browsers are now unsupported.

popular web font options

Cufón is a good option designed to replace sIFR technology.  There is a nice website app that helps create the Cufón font files.  Special licensing may be required for Cufón fonts, so web designers and their clients can find themselves in legal trouble with font foundries for unauthorized distribution.   For designers using an open-source font or those ready to ride out any potential legal conflicts, it can be a great font solution.

Typekit, acquired by Adobe this week, is one of the easiest solutions to implement and available fonts are fully-licensed.  The service uses only one line of code to display the fonts.  Although designers might run into problems finding the perfect font in their control panel, the choices are in the thousands.  Typekit does require an ongoing subscription and their font files are never directly released to the site owner, but they do maintenance them for improved viewing inside various browsers.  Currently there are free options for single sites without heavy traffic and paid subscriptions start at $24.99 per year.

Google Web Fonts is also a scripted solution that is very easy to implement.  There are over 260 open-source fonts available and the files are hosted by Google.   The site has helpful graphics to explain the bandwidth impact of using each font.  The downside is no commercial fonts are available.  The process couldn't be simpler.  No login or purchase is required, just select a font, grab the code and add it your site.

Fonts.com offers a scripted web font solution similar to Typekit and Google Web Fonts, but it currently offers over 12,000 fonts.  Additionally, professional memberships include the ability to download the fonts and host them as needed.

Webfonts are available to purchase from Myfonts.  Their licensed webfont options number over 40,000, so most web designers will find exactly what they need.  Similar to professional memberships at Font.com, they offer the ability to host files the way you want — where you want.  Webfonts are not quite as easy to deploy as the scripted solutions, but few web designers and developers should have trouble.  Each webfont varies in price according to its popularity and the font's foundry, but it is a one-time purchase.  Currently there are no free options available for smaller sites.

The custom font solutions available today for web designers have come a long way from embedding fonts in image files and we look forward to more font foundries licensing their work for web font use.  With Adobe's recent purchase of Typekit, we believe those days are just ahead.