When Will Web Typography Catch Up With Print

Since the age of dinosaurs (1990’s) when the web was new, web typography has lagged way behind print. From the fonts used, to ligatures and special characters, setting up columns and grids, kerning, leading, tracking and pretty much all other aspects of type design, web typography just couldn’t compete.

But in the last couple of years, with the adoption of most of css2 and a lot of css3 to the majority of browsers, faster internet connections for many users, and the death of some the legacy browsers holding css and html back, web typography has begun to catch up. Here, I’ll go over where we’ve been, where we are going, and why web typography has still not caught up to where print typography has always been.

A Brief History

At the dawn of time, prehistoric man made a few great discoveries; fire, sliced bread, and the internet. But this early, primitive version of the internet made you want to stick a rusty spoon in your eyes. The designs were simply awful.

From uncovered fossil records, we have determined that early man was forced to use hideous “web safe” colors and no real design, just plain text and links, written with html. Html was not enough to make great design. With no real way of creating layouts, early man made use of crude tables and frames, to mimic what he saw in print, but never was really able to compete with the designs print designers were able to create.

Al Gore saw that html was lonely and needed help, so he took a rib from html and created css. Css was the savior that allowed web designers to finally create wonderful designs their mom’s would be proud of, but it took millions of years of evolution to develop. And even today it is not finished or fully adapted.

There have been many roadblocks that kept html and css back. The great web browser of the early 2000’s, Internet Explorer got drunk with power and murdered it’s sole competitor, Netscape Navigator. But Internet Explorer 6 was badly injured in the war and went into a comma for five years, leaving the internet frozen in time. After five years, Internet Explorer 6 give birth to Internet Explorer 7, but the people were growing restless. Man needed a web browser that implemented the latest standards, and didn’t want to wait five years for it to happen.

Thus, WWII began between the Microsoft Empire and a joint coalition of Google, Mozilla along with a few other browsers no one cares about. A clear winner was never determined, but Google Chrome and Mozilla Firefox grew in power. The people loved them because they were faster and adopted more of the last html and css goodies.

Flash-forward several million years, you can see that web design has come a long way, but web typography still lags behind print.

The Problems With Web Typography

We still have lots of problems with web typography. It isn’t always a deal breaker but there are way to many inconsistencies in the way fonts render in different browsers and also baseline inconsistencies. These issues appear between browsers at times but mainly they happen between operating systems (Mac to Windows to Linux). This is more than just a browser problem. It is partially a problem with the way the operating systems render type.

We have been truly lucky to be able to use @font-face now, but it still has serious limitations. The fonts don’t always render correctly, the fonts you are able to use for free are still very limited, and the user has to download the font to their machine to make it work. For one font it isn’t a huge issue but if you wish to have multiple weights of a few different faces, the load can be substantial.

The web safe alternatives can also be just as painful. As you know, the choices are very limited and there is typically only three weights to choose from: normal, italic and bold. Just look around the web and you’ll see a big trend of @font-face condensed fonts being used and abused (*cough* League Gothic). Largely because we’ve been without a condensed font on the web since well, forever. And the second big web font trend is not surprisingly, slab-serifs. When open-type finally makes it to the web, my prediction is small caps will start popping up everywhere.

Along with the faces themselves, there is not a lot of support for, subscripts and superscripts, ligatures, fractions and proper spacing for other symbols within each typeface.

Kerning has also been problem alluding web designers. Many of the free fonts have really poor kerning to begin with and there is not an easy way of kerning type on the web. There is letter-spacing but that only applies to individual words. The current answer is Lettering.js. It sucks having to rely on yet another jquery plugin, and it adds a lot of extra markup to your html documents, but it seems to be the only option for having real control over your typography at the moment.

One of the longest standing wants of many web designers is the ability to make magazine style layouts on the web. As in multiple columns where the text flows naturally from one to the next. A baseline grid to keep the typography consistent would also be nice. There are some css frameworks for this but nothing native to css itself.

What the Future Holds

Surprisingly, Internet Explorer is the browser pushing the envelope with web typography today, or at least IE10 will be. If you haven’t seen it yet go check out The New Web Typography Internet Explorer site. Many of our type concerns are being addressed, or at least appear to be by supporting opentype in-browser.

Multiple columns is one of the long overdue additions to the web. Being able to flow content naturally from one column to the next, especially if it grows or shrinks, will make for a much better reading experience on the web and a whole new way to layout textual content. Look around the web and you’ll see many examples of columns of text way too wide to be easily read. If there was an easy way to break up large content areas into smaller columns the web wouldn’t have that problem. More on the optimal number of words per line for easy reading.

There are a few javascript plugins to create this but not nearly the same as native css support. Currently, Opera looks like the only browser with full support for multi-column layouts but I haven’t tested to confirm. Multi-column allows you to set gutter width, border rules, and much more. This is the layout system we’ve been wanting for years, but until it is fully supported, we’ll just have to keep waiting.

One fun little addition to a web designer’s toolbox will be background-clip: text;. A nice way to mask a background image over the top of your text. Still not available in most browser but you can play around with it now.

Helpful Links and More Information

• Kern.js - is a bookmarklet that allows you to kern letters within the browser when using Lettering.js. A nice time saver.
• PX to Em - Convert pixels to ems and back again.
• The Ultimate Guide to Readable Web Typography - the golden ratio for typography and tool to figure out the correct line-height with the Golden Ratio Calculator, based on the width, font-size and CPL (characters per line) you specify.

If you are frustrated with web typography, just think of how bad it used to be not so long ago and the promise of tomorrow.