Increase Your Font Stacks With Font Matrix

11 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Jon Tan

    Solid article and a well-made point about x-heights Richard. Rendering differences can be crucial, such as different baselines for Arial and Helvetica.

    Megan McDermott has previously put together a comprehensive list of system and bundled fonts , including those available with Ubuntu Linux which could also be useful.

  2. karim

    Good point, and I think that this could be completed with, say, some conditional comments or something server-side to fine-tune the css-font serving depending on the client’s platform. But actually, IMHO, if I’m about to use “special” fonts for a webpage I’d rather use sIRF than a guess…

  3. Andy Beeching

    Could you take this a step further with JS, and onload, or domContentReady (etc..), detect what font-family has been applied by the browser and set a class on the body element if font specific styles were needed to tweak the typography? That is, you’d probably optimise the type rules for your first choice font, but if that is unavailable and the fall-back fonts are applied, then details such as leading, size etc might require a touch of refinement (in the form of additional CSS rules) that you don’t want to apply by default. Trying to read the style object it seems that it only returns the original rule, as opposed to the applied one…

  4. Maak Bow

    I totally agree with the idea behind this and a larger font stack in theory, but each time I view a website that does this, Sadly the fonts look less than great on both win XP and Win Vista which is a large part of the web browsing market.
    I think there has yet to be found the fonts [other than the arial/verdana etc standards] which actually DO alias well and are default on the main OS’s

  5. Aaron

    With cufon, and sIFR, you can include any typeface in a browser.

    Sure, you’re not going to use them on mass text/paragraphs, but there’s only a few fonts that I was use for those type of things anyway..

  6. Bram Pitoyo

    Thank God I’m not alone in thinking that employing “non core” typefaces in the CSS is a sound alternative (see here for the code and reasoning behind it.) Georgia, Times and their core web friends are not bad fonts, but readers can and do get bored looking at the same faces over and over again.

Impress us

Be friendly / use Textile