Web Design

The Past, Present and Future of Fonts on the Web

If there’s one area where print media has had a clear advantage over the Web, it’s been with typography. Not only is it generally easier to read words printed on paper than on a backlit screen, but once you print something out it generally looks the same no matter how many times you copy it. With the huge advancements of technology though, printed media is practically on it’s last leg and it’s all about digital media and web typography.

Unfortunately, on the Web, where every user and every browser can display the same page differently, typography has been a tremendous mess. And what about cross-browser compatibility? There are some fonts that will work in every web browse except Internet Explorer, while others only work in Internet Explorer. So not only must you worry about which fonts are best to use, but you also have to keep up with the fonts and browser support.

A combination of licensing and technical challenges has, historically, limited the Web to a relatively small number of “web-safe fonts” that don’t leave a lot of room for creativity or improved readability. However, that is changing fast and fonts on the Web are at something of a crossroads, on the verge of a potential explosion that could rival what print has been able to do for centuries.

The Problem with Fonts

Fonts, despite their simplistic nature, are actually pieces of copyrightable software that have routinely been bought and sold, often at great expense. Many of the fonts we think of as standards, such as Helvetica, are actually paid fonts that can be expensive to purchase.

Let’s be honest, who wants to purchase a font without even knowing what it will look like on their website? If you happen to purchase a font, but don’t like the way it looks, it just ends up being a waste of your time and money. Don’t worry, we’ll touch on how to fix this issue below.

In print, this isn’t a problem. The designer buys the font and uses it in his or her work. When making copies of the work, they don’t have to transmit a copy of the font to everyone who reads the work. Plus they can see how a specific font will look on their work before having to commit to it. So while printed media may soon become obsolete, it is still offers more flexibility over digital media.

On the Web though, using a font requires that both the designer and the viewer both have the same font installed. This creates a problem as users are, generally, not wiling to take the time to install even free fonts on their computer, much less paid ones. This limited the Web to the fonts that were common across the vast majority of systems. Though that list has grown some over the years, it’s still only a tiny fraction of the fonts available.

How Things are Improving

In recent months and years, there has been slow movement to fixing the problem of using more advanced fonts on the Web.

On one hand, the W3C, the organization behind Web standards such as HTML and CSS, has developed Web Open Font Format (WOFF), which is basically a standardized way of embedding fonts into a Web page so a visitor can display them without having to pre-install them.

WOFF is already supported by Firefox, Opera, Chrome, IE9 and will be in future versions of Safari, giving it near-complete coverage, especially on desktop computers.

However, there are also non-standardized solutions that are growing in popularity. Typiekit, for example, uses JavaScript to embed fonts in websites and has partnered with over a dozen other companies, including Adobe, to bring a slew of professional and desirable fonts to Web designers’ hands.

If you’re looking for more, other web font services that you might be interested in includes:

  • Fontdeck web fonts: Real fonts for your website
  • Fonts Live – Expertly Crafted Web Fonts from Monotype Imaging
  • Desktop and @font-face fonts | Fontspring

These services fix the issue of not being able to view how a font style will look your site before purchasing. They also provide you with easy, convenient methods of displaying fancy fonts on your websites for all to see (without having to download it themselves).

Through a combination of open standards and closed resources, a web designer can use virtually any font they can imagine in their designs, virtually eliminating the concerns that led to the distinction of “Web-safe fonts” so many years ago. Not only that, but it’s much more affordable and convenient than every before.

Additionally, thanks to CSS, you can specify fallback fonts for your website, by using the “font-family” property. Fallback fonts are pretty much like a backup plan. Just in case a user does not have a specific font installed on their computer, your page will be displayed in one of the fallback fonts instead.

It’s good to specify 2 or 3 fonts within your CSS, with the first one listed being your preferred font. This at least lets you keep your fancy fonts for yourself, or anyone else who visits the page and has them installed. However, this still leads to the issue of creativity because basic serifs and monospace fonts aren’t much to look at and will more than likely take away from the design of the website. So if you’d prefer to use more stylish fonts, your best bet is through one of the methods or services mentioned above.

What the Future Holds

The future of Web fonts looks to be incredibly bright. New partnerships and new standards aim to make fonts more accessible on the Web and that will open up new doors for designers. Web technologies are constantly changing and improving for the better. It’s just a matter of time before we’re easily able to use just about every font type on the Web.

That being said, there are still going to be challenges with browser compatibility and font accessibility, especially on mobile platforms, but those issues are likely to be resolved more by the merging of mobile and desktop browsers than by any special concessions made to mobile platforms.

On the other hand, let’s not forget that the more fonts that become freely available for anyone to use, the more unreadable the Web may become. Besides web safe fonts being consistent, they’re also easy for everyone to read. What will happen in the future when website owners begin using fancy fonts all over their web pages, instead of just in their titles and/or headers? It could really change the way we view the Web, literally.

In the end, what this will mean is that print and Web design will come closer than ever to merging and Web designers will have the tools to make the next generation of sites both more attractive and easier to read, all through something as seemingly mundane as the fonts they use.

PerOla Hammar 陈家悦
Father of 2. Marketing, sales & web geek who is open-minded & eager to learn. Experienced a lot in the past years, both good and bad. Lesson learned? LIVE LIFE!