Now with web fonts! (Test)

Posted on 27 August 2011 in:

After recently switching this website’s font from Lucida Grande/Lucida Sans to Georgia, I have decided to tinker further with CSS. At the moment, most text on is set in a not publicly available font of mine. Based on the Martel/Malabar typeface I designed at the University of Reading, this is more bookish. I originally developed it for Prof. Ralf de Jong, who used it to typeset the 2010 and 2011 Gutenberg yearbooks.

My fonts for Ralf—which are just a single upright and italic—had large character sets, including several figure styles, ligatures, and small caps. For TypeOff., I stripped these glyphs out in FontLab, and made the default numerals oldstyle figures. Then I flattened the kerning, deleted the OpenType features, and converted the outlines to TrueType. Using the Font Squirrel @font-face generator, I made web font kits. The hinting in the fonts is from this generator, too. Since my fonts for Ralf included no bold weight, I have changed the bold text on TypeOff. from Georgia Bold to Lucida Grande/Lucida Sans Bold. If you are wondering what these fonts look like in print, you can find some photos on my Flickr space.

These fonts—in print and on screen—differ from the Malabar typeface family in two ways. First, the stroke contrast is significantly lower; the vertical strokes themselves are also lighter. Second, the ascenders and descenders are longer—about 50 em units longer, on a 1000 em grid. Malabar is available as both print and web fonts from Linotype; the web fonts may be found on Monotype Imaging’s web font service. These web fonts have have already found one great application: the German interactive design agency Fork Unstable Media sets most of their recently-redesigned website with them.

So, how do my bespoke web fonts look? To be honest, I am not so convinced. On MacOS and iOS, they are sort of OK. On Windows, in FireFox and with the ClearType environment, they look slightly less good, but still just fine. On FireFox in Windows XP, without ClearType rendering activated, the text falls apart. In order for the text to meet my own standards in this environment, I’d have to find a better autohinter, or grayscale-hint the fonts myself. Additionally, the fonts are not being served to readers with any version of IE, at least as far as I can tell. I’m not sure why this is.

I am not sure how long to leave the site up in this new style. Perhaps in a week or so, I’ll switch from these fonts to the Linotype Library Malabar family. It would be the first time I’d have kicked the tires on any of the web font services.