What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 131 Stack Exchange communities.

In my opinion the website would look much better with calibri as the first font in the CSS font-family attribute. What do you think?

This is a screenshot after some firebug hackery (remember to zoom in and see it at 100% zoom), this is the normal one. Note that I simply changed a couple of things without giving it much thought, probably a much better job could be done.

EDIT: Jeff's answer is a valid issue, but I think it can be fixed fairly easily with the jQuery font.isInstalled plugin, that allows you to check whether the user has or doesn't have a certain font through javascript.

Then you can add the following code that adds the calibri.css style if a user has the font:

$(document).ready(function () {
   if (font.isInstalled("Calibri"))
      ImportCss("calibri.css");
});

function ImportCss(name) {
    if (document.createStyleSheet) {
        document.createStyleSheet('/static/' + name);
    }
    else {
        var styles = '/static/' + name;
        var newSS = document.createElement('link');
        newSS.rel = 'stylesheet';
        newSS.type = 'text/css';
        newSS.href = styles;
        document.getElementsByTagName("head")[0].appendChild(newSS);
    }
}

Then, in calibri.css you can have - for example -:

body
{
    font-family: Calibri;
    font-size: 16px;
}

caption, h1, h2
{
    font-family: Candara, Calibri;
}

And have this in your main css file:

body
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
}

So if someone doesn't have calibri (or javascript enabled) they will see the website with the current font and the right size. If someone does have calibri, calibri.css will be imported and both the font and the size will be changed.

This is what I do on my website, and it works pretty well.

share|improve this question
1  
Looks rather obese. –  random Jan 23 '10 at 2:48
1  
FWIW, SO already uses Consolas for code blocks. –  Shog9 Jan 23 '10 at 3:32

2 Answers 2

up vote 8 down vote accepted

Although I love the "C" fonts, there are some fairly serious problems with them when used in websites intended for large audiences:

  • They are significantly smaller per px than other fonts, enough so that it's a serious problem for substitutions

  • Only Windows machines with Vista, Win7, or Office 2007 will have the "C" fonts installed

We actually started the SO beta with Calibri as the default font, and I had to pull it out.

share|improve this answer
    
Yea, I love how Calibri looks, but size is a geniune issue. @Koper, both your screenshots proved the fact well. –  o.k.w Jan 23 '10 at 11:05
    
@Jeff Atwood: there is a workaround for this issue, see my edit –  Andreas Bonini Jan 23 '10 at 12:32
1  
Just a note, on normal web you shouldn't use pixel but just about everything else available (points, picas or em) to define font sizes. –  Esko Jan 23 '10 at 13:57
1  
@esko that is irrelevant, by whatever metric you use, these fonts are significantly (and problematically) smaller than other fonts by that very same metric. Like T-shirts from American Apparel, I don't care if it says "XL", it's far smaller than other vendors' "XL" t-shirts. –  Jeff Atwood Jan 24 '10 at 7:54

I don't think this is really needed. I guess it wouldn't really hurt, either. If you don't have those fonts it would just fall back to the next one. But to really explain why I don't think they should do this I have to tell a short story.

You see, I never cared about fonts at all until just over a year ago. My philosophy was, "Arial, Helvetica: who cares?" And then chrome came out at about the same time as StackOverflow. At the time I normally used Firefox. I wanted to give Chrome a good try, so I decided to use it as my primary means of browsing StackOverflow. I didn't visit StackOverflow from firefox at all for a long time.

Then one day, it happened. I already had a Firefox window handy and wanted to look up something on StackOverflow. I was shocked at how bad the site looked in Firefox by comparison to Chrome. Looking at them side by side it was obvious that the big difference between the two browsers for this site was the font rendering.

Now I knew what to look for. As I started using Chrome more often I noticed the difference in a few other sites as well. The odd thing was that sometimes Firefox came out better in my opinion. It really depended not only on what I was familiar with but also which rendering style worked better for that design.

So you could say I learned an important lesson about fonts here (except that I still don't know how to choose the right fonts for my own work). But the real reason I'm telling this story is that you might find the StackOverflow font choices already work pretty well if you just try a different browser.

share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .