Text rendering between OS X and Windows throwing off my padding?

Question

Hey folks, I'm attempting to style a client's article h1's with a simple background color and padding. I need the text to be centered vertically and horizontally within the padding, but I'm finding there's a baseline difference between OS X and Windows. At least that's my best guess. Here's the specific code for the offending elements:

.entry-title {
    color: #fff;
    background: #A3BCC3;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
}

.normal .entry-title {
    float: left;
    width: 100%;
    padding: 10px;
    margin-bottom: 30px;
}

Here are the screenshots:

OS X: http://i54.tinypic.com/2a0bx1v.png

Windows: http://i56.tinypic.com/2gv4vie.png

You'll notice it's rendering just fine on Windows, but it's a few px too high on OS X. They render the same throughout browsers, the only difference is between the operating systems. The font is Quicksand Book, and is being implemented via @font-face. If you need to see a working version of the site, it's available at http: // angryg.nom.es/rosebud. If you do manage to check it out, you'll notice I'm having the same problem on the static content footer at the bottom of the home page.

Anyway, any help would be greatly appreciated.

Answer 1

You need to specify a line-height for the specific browser (painfull) use this type of properties: 1.1, etc over specifying pixels, from my experience it works better.

Also, still in the Mac, between Safari and Firefox you'll notice a difference between line-heights! So this isn't just OSX vs Windows.

Answer 2

Your font-files may be incorrect.
I had the same issue with a local installed webfont too. Thankfully Google provided the same font as a webfont, solved the problem for me.

Answer 3

Default font of operating systems is different so add a font-family: Arial to your elements css. It should work in OSX and Windows because Arial is supported by both of them.