Laptops, smartphones and tablets are all places where we more than ever read and explore the written word. In print we already benefit from centuries of knowledge about how we humans read and process information. But not online.

With browser development lagging in terms of web typography there is no time, and now no need, to wait. We can all create better web typography ourselves, starting right now.

Background

There is no reason to wait for browser dev to catch up. We can all create better web typography ourselves, today.

Back in 1997 I created an Apple Script framework for Quark Express on behalf of the publishing house where he was employed at the time. The goal was to automate the typographic editing that the team didn’t have time for as part of their daily production flow. The Apple Script traversed the documents and isolated hyphens, dashes, ligatures, small-caps abbreviations and replaced them with their correct typographical equivalents.

That was desktop publishing 1997 and work-arounds were part of everyday typography life. Oddly enough in 2011 we in the web publishing world also need workarounds.

As an industry we have made serious progress with @font-face and great type-as-service offerings. There are JavaScript snippets that fix ligatures, hyphening and kerning. But it is all quite fragmented and much of it relies on work-arounds.

Until now.

We have created a more complete solution that takes care of web and screen micro-typography.

And on 16 June we tested it live together with Fontdeck.

And you are looking at it right now.

Two ingredients ‒ A JavaScript and a custom font-file

The Javascript version

It traverses the dom and finds and replaces things as quotation marks, ligatures, en- and em-dashes, ellipsis and more. But it also finds ©, ®, ™ and wraps them in a sup-tag. Most importantly it recognizes uppercase abbreviations and wraps them in abbr-tags.

The custom font-file

The font-file in this case is a subset of the regular cut, and in it the upper-case characters have been replaced with small-caps characters. The lining numerals have been replaced with old style numerals. Anyone remember the expert-font days? The font is served via @font-face by Fontdeck as an addition to the main font-family.

We can now specify it in our css-files to use it for the abbr-tag. This gives us true small-caps on the web and the ability to choose between old style or lining numerals in our texts.

   abbr {
      font-family:"Tanger Serif Expert», serif;
      letter-spacing: 0.15em;
      text-transform: lowercase;
      font-variant: small-caps;
      font-weight: 650;
   }

An experimental bridge

Where does all of this leave us? For now it is an early stage experiment in cooperation with Fontdeck, but the results are good and the future of web typography looks bright. Eventually browsers might gain native typography support, and as and industry we get better OpenType features. But until then we now have an option to go it alone without worrying what’s on the browser peoples roadmaps.

A key part in all of this are type services like Fontdeck. They are the only sustainable way of serving the additional font-file needed for this to work. With their help there is no excuse to force designers to hack into licensed fonts and break eula:s.

We all benefit

The whole web community benefits from this, including the audiences who read what we create on their screens.

And that’s the beauty of it, the solution we created is not only for computers and browsers. It can be built into apps and software for any screen device like smartphones and tablets.

The next step

We will continue improving the solution, the script is buggy right now and the whole solution needs a lot of fine tuning and further development. We will also continue our work with Fontdeck to hopefully get foundries onboard to contribute additional web-specific expert-versions of their fonts.

A key step is trialing the solution in the real world. So far we’ve built it in to our Skrivr app and we are planning to open source the JavaScript part.