2

I discovered Chrome doesn't align Verdana similar to Firefox on OS X. For example, the following CSS rule is applied for comparison:

font-family:verdana;
font-size:12px;
line-height:auto;

This image shows the differences between browsers (Chrome 22, Firefox 14) on each operating system (Mac OS X 10.8, Windows 7).

image

Here is the corresponding jsfiddle to play around with:

body {
  font-family: verdana;
  font-size: 12px;
  line-height: auto;
}

.banner {
  background: #e2e2e2;
  text-decoration: none;
  color: black;
}

.fixed {
  line-height: 15px;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Verdana</title>
</head>

<body>
  <p class="banner">
    1.) line-height: auto
  </p>
  <p class="banner fixed">
    2.) line-height: 15px
  </p>
</body>

</html>

How do you vertical align text on a button in the middle of a button - Cross browser and cross OS?

approxiblue
  • 6,982
  • 16
  • 51
  • 59
jaggli
  • 21
  • 5

1 Answers1

0

Just make the line-height equal to the height of the wrapper. That will vertically center the text.

.button {
   height:20px;
   line-height:20px;
}
moettinger
  • 4,949
  • 2
  • 15
  • 20
  • 1
    Yes, I've had similar problems with rendering in OS X Safari. Applying specific line-height helps. However, font rendering might differ slightly in various browsers. Rasterization of TrueType fonts can use different anti-aliasing methods leading to slightly different positioning of characters. IE10, for example, even uses hardware acceleration to render fonts. Also, if you want to make it look good on all platforms, I'd suggest not to use Verdana font, it's a proprietary font from Microsoft - this also may lead to different looks on other platforms. – keaukraine Aug 16 '12 at 13:10
  • Setting the line-height does not work, please refer to [this demonstration](http://i.imgur.com/Hi93o.png). It's the baseline of the font, that doesn't align well. I wish I could not use Verdana, but this is no option, because of our CI guidelines. – jaggli Aug 17 '12 at 06:55