0

My <nav> element is displaying each list element in a font size much much bigger when I view it on Chrome than I originally designed in Photoshop. In Chrome, my font is showing 23px larger in width than in Photoshop. My resolution is at 72dpi, and everything else seems to be displaying just fine.

Here is my jsFiddle. It should look like this.

Mathijs Flietstra
  • 12,900
  • 3
  • 38
  • 67
Mitch Pash
  • 1
  • 2
  • 1
    What does it look like in other browsers? Have you checked the Chrome settings? If you click advanced down the bottom of the page there should be a `Web content` section which lets you set the `Font size`. – Mathijs Flietstra May 10 '13 at 21:36
  • It looks the same across all browsers. – Mitch Pash May 10 '13 at 22:25
  • Is it `23px` larger in width only, or in height as well? Could you whip up a [jsFiddle](http://jsfiddle.net/) displaying the problem (using the same font) and add it to your post? And could you add a screen clipping of a part of your PSD (at `100%` zoom level off course) which shows how you want things to look? – Mathijs Flietstra May 10 '13 at 22:33
  • Here is my fiddle http://jsfiddle.net/mitchellpash/mkPX8/. It should look like this: http://imgur.com/r9AIXvu – Mitch Pash May 11 '13 at 01:14

2 Answers2

3

The behaviour you are seeing is because you are using text-transform: uppercase; on your link elements. This transforms each character inside it to the capitalized version of the character. The capitalized version of a 22px character is rendered larger than the set font-size of 22px.

You can instead use font-variant: small-caps; and get rid of the capitalized characters in your HTML:

<ul>
  <li><a href="#">home</a></li>
  ..

And set this in your CSS:

a { font-variant: small-caps; ..

That should do the trick.

Mathijs Flietstra
  • 12,900
  • 3
  • 38
  • 67
0

If the difference is only in width it could be an issue if you declare letter spacing because the letter spacing in Photoshop is not directly translatable to CSS. If this is a suspect you can properly determine the letter spacing by dividing the value displayed in Photoshop by 1000 and specifying the result as an em measure in CSS.

Example: Photoshop letter spacing equals 20 divided by 1000 equals CSS letter spacing 0.02em

davidcondrey
  • 34,416
  • 17
  • 114
  • 136