Definitely not a huge issue, but a little bit jarring on the latest Chrome release under Ubuntu Linux 9.10. Yes, technically still Beta (by Google's standards) but the bug appears to be in WebKit, which is definitely not.

If there's 3 or more digits in the view count, it overflows its box and hits the title of the question in some cases.

Oh No!! Overlap!!

This still happens if I zoom the whole page in/out so it's not like I just have some non-standard font sizes set.

Hope this helps.

  • 2
    ... you're a strange one, random :) But thanks for including the pic... somewhat ;) Dec 16 '09 at 3:05
  • Was just a minor its/it's fix. jjnguy fixed up your screenshot.
    – random
    Dec 16 '09 at 3:08
  • 2
    I wish I were as skilled at freehand paint as you @random. All I could manage were some arrows.
    – jjnguy
    Dec 16 '09 at 4:17

100% font width related.

Here's a screenshot of your Linux results (bottom) with Firefox/Windows (top):

linux / windows

As you can see -- the font being used by the browser is absurdly wide.

The stylesheet defines:

Trebuchet MS, Helvetica, sans-serif

This has come up before, but it's really hard to "fix" without changing the font, as the Windows and OSX fonts the browser chooses are fairly similar (if not identical) in width.

EDIT: based on recommendations here I changed it to:

Trebuchet MS, Liberation Sans, DejaVu Sans, sans-serif

  • Sure, I can try that :) But I'm not convinced that's the issue because Firefox 3.5 (on the exact same Linux install) doesn't show this issue whereas it should presumably be using the same fonts. I'll give it a try and post back, though! Dec 16 '09 at 3:53
  • 1
    Actually, yeah, looks like you're right. I changed Chrome's default sans-serif font from "Arial" to "FreeSans" and the issue went away. Funny. Is this still something that could be fixed on Stack Overflow's end though? Seems like a lot of people may not be using that rather small list of fonts you have there. Either way, thanks for the speedy reply :) Dec 16 '09 at 3:56
  • 2
    sure, just tell me what font to define in the stylesheet.. as long as it works for some or hopefully most Linux users we can define it there as a fallback Dec 16 '09 at 3:58
  • 1
    The one I can confirm as working is called FreeSans and is part of the GNU FreeFont collection ( gnu.org/software/freefont ) and is thus included with a large proportion of Linux distributions, so its ubiquitous. Here's a screenshot of what SO looks like with FreeSans: img695.imageshack.us/img695/3696/screenshot2a.png It would be awesome if this was added to the fallback list since I wouldn't have to change my default font for everything else just to make SO look right :) Thanks! Dec 16 '09 at 4:03
  • 3
    For Linux you can use Liberation Sans too.
    – Jaec
    Dec 16 '09 at 4:09
  • 1
    I just read up on the fonts Jaec recommended. They're included in Ubuntu, and their claim to fame is being metric-compatible with Microsoft's fonts. So maybe this is an even better suggestion than my FreeSans. Dec 16 '09 at 4:21
  • I think Red Hat's Liberation fonts were supposed to fix this exact problem. Have you tried installing them. It'll probably fix font problems with many more sites.
    – wm_eddie
    Dec 16 '09 at 4:30
  • To answer eddie's question, I have them installed. They're just not being used as the fallback sans-serif font unless I explicitly set them as such in the Chrome config. Dec 16 '09 at 4:35
  • +1 for Liberation Sans; it's a beautiful and well sized font. The other Liberation fonts are nice, as well, but the sans is my favorite.
    – Gazzonyx
    Dec 16 '09 at 5:10
  • 1
    In my opinion the best fix is to install ttf-mscorefonts. Without that I see minor font problems on many sites. BTW: Chromium, Ubuntu 9.10 and mscorefonts on my end and works fine. Dec 16 '09 at 7:18
  • @jeff Couldn't you just use Google Fonts? Mar 11 '13 at 23:53

Despite widespread belief to the contrary, a font stack of Arial, Helvetica, sans-serif will not fall back to the default sans serif font on a typical linux box (Ubuntu included). Instead, the Helvetica font gets hijacked and replaced with something the distro thinks is reasonably similar. To find out what font that is, just run 'fc-match helvetica' from the command line. On default configured Ubuntu systems, this will generally be Nimbus Sans L, which does not match Helvetica very well, imho.

So you can either remove Helvetica from your stack (not usually a good option) or you can add an explicit linux replacement, such as Liberation Sans or DejaVu Sans. (Liberation is the better choice metrically and gaining popularity but not as common as DejaVu or Bitstream Vera).


The problem is with the fonts you're specifying in your CSS here and their order (Trebuchet MS, Helvetica, sans-serif).

The browser will go through the fonts in this list and use the first one it knows about. On Windows, Mac OS X, and some Linux installs (those with the Microsoft fonts installed) this will be Trebuchet.

For some odd configurations where Trebuchet is not installed on the machine but Helvetica is, you will get Helvetica. This might happen on some very old, default installs of Mac OS X that did not include Trebuchet (I don't have a box up to check).

On Most default Linux installs, the browser will end up on "sans-serif", which is whatever has been configured as the default sans font in the browser. Since different fonts have different weights for a given point size, this could end up being nearly any width.

There really are two solutions to this. One, change the design to not assume a fixed width for a piece of text -- this would probably require some significant layout changes. The other, specify a fonts list that has fonts of equal or similar weights, in order of preference, where each platform you want to support is guaranteed to have at least one of these fonts installed.

You must log in to answer this question.

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