<p>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</p>

<pre><code>font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
</code></pre>

<p>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:</p>

<pre><code>letter-spacing: -1.5px;
</code></pre>

<p>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.</p>

<p>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!</p>

[{'answer_id': 47523, 'author': 'thekidder', 'author_id': 1631, 'author_profile': 'https://Stackoverflow.com/users/1631', 'pm_score': 0, 'selected': False, 'text': "<p>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.</p>\n"}, {'answer_id': 47525, 'author': 'FlySwat', 'author_id': 1965, 'author_profile': 'https://Stackoverflow.com/users/1965', 'pm_score': 1, 'selected': False, 'text': '<p>Have you tried it in FF3 on windows?</p>\n\n<p>Personally, I find a good CSS Reset goes a long way in making your page look the same in all browsers.</p>\n'}, {'answer_id': 47531, 'author': 'Dan Herbert', 'author_id': 392, 'author_profile': 'https://Stackoverflow.com/users/392', 'pm_score': 3, 'selected': False, 'text': '<p>A List Apart has a pretty <a href="http://www.alistapart.com/articles/howtosizetextincss" rel="nofollow noreferrer">comprehensive article on sizing fonts in CSS</a>. Their conclusion is to use "<code>ems</code>" 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.</p>\n'}, {'answer_id': 47584, 'author': 'levik', 'author_id': 4465, 'author_profile': 'https://Stackoverflow.com/users/4465', 'pm_score': 1, 'selected': True, 'text': '<p>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.</p>\n\n<p>This is probably not the cleanest approach, but it will work, and with the least intrusion into your otherwise clean HTML/CSS.</p>\n'}, {'answer_id': 48603, 'author': 'Bobby Jack', 'author_id': 5058, 'author_profile': 'https://Stackoverflow.com/users/5058', 'pm_score': 0, 'selected': False, 'text': '<p>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.</p>\n\n<p>Having said that, if you <strong>do</strong> 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.</p>\n'}]
['https://Stackoverflow.com/questions/47519', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3206/']