Now with web fonts! (Test)

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 TypeOff.de 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.

15 Comments

  1. So, based on some feedback on Twitter, I have implement a few changes. The word space in the font is now bigger, and I have bumped up the px size of the text in my style sheet, too

    I also have a version of these two fonts with shorter extenders—the same ratio to the x-height as in the Linotype Library Malabar Regular and Italic designs. I might try these at a later time. Although, I do think that the longer ascenders and descenders here add some kind of elegance.

  2. Hi Dan, very nice!

    To get the best result out of the FontSquirell auto-hinting (especially for WinXP) make sure you have the “Blue Values” (Alignment zones) set in your font, prior to generating your set. I use the “Hinting-Set” TypeSupply macro to set the blues for me.

    Also, a really great new TTF Autohinter (based on FreeType font rendering engine) is being developed by Werner Lemberg at http://www.freetype.org/ttfautohint/

    Cheers,
    Pablo

  3. Dear Pablo,
    Thank you for your comments! Indeed, I did set up the proper stems and alignment zones in my master CFF files. Then I converted my outlines to TT format, and my PS hints to instructions. The alignment zones do appear to be correct onscreen in the FontSquirrel-hinted versions; the top of the OSF 1 is a little whack is some pixel sizes, but this could be fixed in the outlines themselves (or if I had written my own TT-hints, rather than relying on the FontSquirrel generator). I have seen a few autohinting tools in action, and I’m quite pleased with the FontSquirrel results here, I must say. I am also familiar with Werner Lemberg’s project, and I do wish him the best of luck and success with it! I bet that there will be a lot of discussion around this top at the upcoming ATypI conference, and I’m looking forward to that.

  4. Dan, this looks great!
    IE <9 need EOT TT, so that might be the problem. But in 9 (with WOFF) it works just fine.
    If you like, I’ll gladly help you with the manual TT hints. Feel free to drop me a line.

  5. Danke, Christoph!

    I have uploaded .eot, .woff, .ttf, and .svg fonts. In the version of IE9 running on my Windows7 terminal server, I cannot see the .EOTs (or anything else); I get the fall-back font. In Firefox, I see the .WOFFs, and that is great. I have an older XP machine, and on that version of IE (7, I think), I also see the fall-back fonts.

    I have never tried to show code in a comment before. Time to try it out! Here is the CSS syntax I’m using (from the FontSquirrel generator):

    @font-face {
    font-family: 'MWeb';
    src: url('mweb-book-webfont.eot');
    src: url('mweb-book-webfont.eot?#iefix') format('embedded-opentype'),
    url('mweb-book-webfont.woff') format('woff'),
    url('mweb-book-webfont.ttf') format('truetype'),
    url('mweb-book-webfont.svg#MWebRegular') format('svg');
    font-weight: normal;
    font-style: normal;

    }

    @font-face {
    font-family: 'MWeb';
    src: url('mweb-bookitalic-webfont.eot');
    src: url('mweb-bookitalic-webfont.eot?#iefix') format('embedded-opentype'),
    url('mweb-bookitalic-webfont.woff') format('woff'),
    url('mweb-bookitalic-webfont.ttf') format('truetype'),
    url('mweb-bookitalic-webfont.svg#MWebItalic') format('svg');
    font-weight: normal;
    font-style: italic;

    }

  6. Oh, and doesn’t that code look swell here?

    Anyway, it could be a problem with the two .eot files themselves. I will try converting my .TTFs to .EOTs with another converter, and just replace the .EOTs in this directory. Perhaps that will do the trick. It is possible that this generator did not redo the necessary naming data properly, and then these wouldn’t be real .eot files.

  7. Hmm, it was only my IE9 settings that prevented me from seeing the fonts there, not the fonts themselves. Still checking up on the older IE versions for a fix, though …

  8. Hey Dan,
    this is the same syntax I am using. And just like mine, your site worksperfectly well in every browser I tested (including IE 8 WinXP)!
    Cheers, Christoph

  9. I must have something wrong with my IE settings on XP. I will check into that again. Thanks!

  10. PS: I demand an ff-ligature for TypeOff!

  11. Haha. Of course, I have drawn f-ligatures (and long-s–ligatures…) for these two fonts. But I stripped them out before I made the TTFs for the webfont conversion. Do you have a link to an handy guide on OT/ligature-support online for me? 😉 The support of this isn’t so super, right?

  12. Right (and no link, sorry)! If you want to incorporate a liga-feature, Firefox >4 will be the only browser supporting it right now.
    But as soon as the ligature is included, Firefox will apply it anyway (at least in big sizes), so just add your uniFB00 and I’ll be happy! :)

  13. Your wish is my command! The new fonts with fi, fl, ff, ffi, and ffl ligatures are now live. I didn’t even have to update the CSS file … just replace the webfonts.

  14. F???in’ awesome! ? ????

Comments are closed.