How to make your website look the same on Linux

Question

I have a fairly standards compliant XHTML+CSS site that looks great on all browsers on PC and Mac. The other day I saw it on FF3 on Linux and the letter spacing was slightly larger, throwing everything out of whack and causing unwanted wrapping and clipping of text. The CSS in question has

font-size: 11px;
font-family: Arial, Helvetica, sans-serif;

I know it's going with the generic sans-serif, whatever that maps to. If I add the following, the text scrunches up enough to be close to what I get on the other platforms:

letter-spacing: -1.5px;

but this would involve some nasty server-side OS sniffing. If there's a pure CSS solution to this I'd love to hear it.

The system in question is Ubuntu 7.04 but that is irrelevant as I'm looking to fix it for at least the majority of, if not all, Linux users. Of course asking the user to install a font is not an option!

Answer 1

I find the easiest way to solve font sizing problems between browsers is to simply leave room for error. Make divs slightly larger or fonts slightly smaller so that platform variation doesn't change wrapping or clipping considerably.

Answer 2

Have you tried it in FF3 on windows?

Personally, I find a good CSS Reset goes a long way in making your page look the same in all browsers.

Answer 3

A List Apart has a pretty comprehensive article on sizing fonts in CSS. Their conclusion is to use "ems" to size text, since it generally gives the most consistent sizing across browsers. They make no direct mention of different OSes, but you should try using ems. It might solve your problem.

Answer 4

@All thanks for the quick replies!

@Jonathan Yes, it looks fine in FF3 on Windows. Do you have a preferred CSS reset? I made a test page and added Yahoo!'s reset but this didn't fix the problem. (see http://www.michaelhinds.com/linux-css-test.html)

@thekidder That would work, but I don't want to make the fonts smaller for 95% of my audience if I can avoid it.

Of course this problem stems from the design not being fluid enough, and indeed the problem can be reproduced on Windows if the user has increased their text size a couple of notches. But for the average Joe using IE6 or 7 with default settings everything is fine. This is good enough for us in the short term as a redesign is not on the cards.

Answer 5

@Dan I'm willing to sacrifice the user’s ability to adjust his or her reading environment in this instance. Maybe I should edit the "fairly standards compliant" part of the question ;-)

Answer 6

Sizing/spacing differences are usually difficult to catch. What you can do is create a Linux-specific CSS file that will contain these values adjusted for Linux, then do a simple JS-based detect to inject that CSS if the User agent is a Linux one.

This is probably not the cleanest approach, but it will work, and with the least intrusion into your otherwise clean HTML/CSS.

Answer 7

Unless your site is expecting an above-normal amount of Linux-based traffic, you're probably going to adversely affect more people if you "sacrifice the user’s ability to adjust his or her reading environment" as opposed to just not caring about the Linux experience.

Having said that, if you do want a nice Linux experience, you should address the reasons behind why your design breaks under small variations in font spacing, given that these issues are difficult to control under current CSS implementations.

Answer 8

I'm having this problem too: I load my page up under windows (IE or FF) and the letter-spacing seems to be only 25% or so of what it is under Linux!

That's a big difference over a coupla letters. I found out every IE ignores relative values less than 5% (0.04em, for instance) which is AWFUL: if a font is very large, 0.05em is many pixels!

I also tried letter-spacing: Npx; and Windows still only moves about a quarter of the distance linux does.

Does anyone have any workarounds for this? Aside from detecting windows+applying smaller letter-spacing?

Does anyone else even HAVE these problems?? :-)