Creative approaches to font display on the web

Nowadays, fonts seem to have conquered the web. The @font-face CSS property is everywhere and the use of it has even reached far beyond the display of characters1. But there was a time, not so long ago, when web designers had to struggle with complex processes to be able to display the title of a blog article in the typography of their choice.

At its core, the web has always been text. But the glyphs to display it had to be local. So when designers embraced the medium, the only choices they had was what most people had on their machines (Arial, Courier New, Times New Roman, Webdings,…2). The obvious solution was to replace text by images, either precooked by the designer (him|her)self, or baked on the fly and cached by the server. This technique, although widely used, was not that elegant. It was heavy on the server and on the bandwidth, plus those little rendered texts where not selectable or scalable.

To circumvent these flaws, some came with another approach called sFIR3, which included in the web page a small Flash™ file embarking the desired font. Selected pieces of text would then dynamically be replaced by Flash rendered text, all done in the browser. Text would still be scalable and selectable. But it required a proprietary plugin to be displayed correctly and don’t even dream about printing it.

So when I came to design my web portfolio, none of these solutions really appealed to me. I wanted to stick with text based open standards and no “image trick”. The <canvas> tag was then only supported by half of the browser market. And I was starting to get interested in “everything parametric”. The font4 I was working on used a single closed polygon for each of its glyphs. Each letter was just a set of coordinate relations that would allow me to change the weight and proportions of it at will. To display it in the browser, I found some obscure Javascript library created by Walter Zorn5 that exposed a set of vector drawing functions. The way the library worked was to create a colored <div> for each pixel of the drawing using some fast algorithm to prevent too much repetition and combine as many pixels possible into one <div>. It worked remarkably well across browsers and still works in recent ones because it just uses a basic brick from HTML. The “pixelated” look of it was also very pleasing to me.

xuv-test

After this little personal project, I kept my eyes open for unusual font drawing experiments in the browser, especially the ones involving code. I was impressed by Dave Desandro’s Curtis CSS typeface6 which is a pure HTML/CSS font using a combination of background color, border width, border radius and a lot of <span> tags to draw a set of very pleasing fat characters. This is especially remarkable because it doesn’t rely on Javascript and so makes it a very good candidate for the “displays-everywhere” award.

curtis-css

Another experiment to notice is Claudio Cañete’s 1k Notebook6 project to implement a full parametric font in <canvas>… in just under 1 kB. He first used a 3×7 grid of nodes to draw a custom line based font. But since this wasn’t really using much space of the 1024 bytes available, he pushed further by porting a script typeface from the Hershey font collection8 and tweaked it to draw the glyphs in a continuous single trace. The encoding and decoding of the font is where Claudio’s work happen, to stay under that limit he set himself. And this is where lies beauty.

1k-notebook

With the latest HMTL specifications, pretty much any typeface can be displayed in a web page, and, don’t get me wrong, this is such a relief. But creativity gets its strength from the constraints it faces. So there is still room for inventiveness with font rendering in the browser. Just set yourself the limits of your canvas.

Footnotes:
  1. FF-Chartwell
  2. Microsoft core fonts
  3. Scalable Inman Flash Replacement
  4. xuvfont
  5. Vector Graphics library by Walter Zorn
  6. Curtis CSS typeface
  7. 1k Notebook
  8. Hershey fonts