CODEWITHSUNDEEP
cssfonts
ppp
ppp

Reputation: 2055

CSS font differences between browsers

I am trying to display some text exactly the same in all browsers.

I'm using helvetica, which they all support.

I've found (the hard way) that each browser styles text it's own way, so I'm wondering, what properties do I have to customize in order to get the text 100% same on all major browsers?

The properties I've already set are: font-family, font-size, font-weight, line-height, text-decoration and letter-spacing, but looking at my text in ff and chrome, I see a difference in the width of a given text. I think height is the same.

Upvotes: 3

Views: 3461

Answers (4)

nim
nim

Reputation: 2449

Even with identical CSS rules and identical font files you will never have exactly identical rendering:

  1. modern font formats are composed of layers of overlapping instructions, where the "new better" way does not replace previous iterations, but is present in addition to those. The advantage is that old software can still read the old-style instructions and work as before. The disadvantage is that the same property is described in many different ways and they do not give the same results (you'd think the newest layer would give the best results but the font designer may have only extensively tested and debugged an older one)

  2. to add insult to injury some are system-specific (Windows, OS∕2, OSX…) so even the same generation of software won't read the same instructions depending on the target system

  3. lastly even if a font only contained a single instruction layer, and all your browsers read it completely, they would have some leeway in interpreting it. On an ideal retina screen with high pixel density they'll all use the same shapes and coordinates, but actual screens have too low pixel densities to display small complex text shapes accurately. So the text engines have a choice between displaying sharp but jaded lines (distorting the glyph shapes so they snap to a monochrome pixel grid) or smooth but blurry lines (approximating ideal shapes by playing on pixel grayness level or even subpixel colors). Those adjustments will move text pixels around.
    Depending on the system text rendering conventions are not identical. OSX will lean towards smooth blurry rendering, Windows towards sharp jaded rendering, and the Linuxes cover all the choices in-between.

  4. And of course, even on the same system the same software won't make the same choices depending on the quality (pixel density) of the hardware available.

For some insight on all the possible rendering strategies a text engine can choose see
https://docs.google.com/document/d/1wpzgGMqXgit6FBVaO76epnnFC_rQPdVKswrDQWyqO1M

You can not usually control the text rendering compromise chosen by the browser from your web site. Even if you could forcing windows-style rendering on osx (or the reverse) would only annoy uses that want your web site to behave like all the other text they see on their screen. And in fact, the more tolerant your web site will be to browser's font rendering choices, the better it will be. A web site is dynamic. A web site can reflow. Pixel-perfect is not a user ideal. If you want pixel-perfect, serve them a bitmap image, and you'll quickly see how much it is appreciated.

Therefore, only use @font-face for specific design effects, and not to try to force a specific text pixel placement on your site. The first will work beautifully. The second, not at all. If you use @font-face do remember fonts are covered by copyright so sharing any font requires legal permission.

PS. Helvetica is an old font design. It has been derived so many times requesting 'Helvetica' on different systems will yield a plethora of results. So this is a font that can not be used on the web without @font-face.

Upvotes: 3

albert
albert

Reputation: 8153

all browsers "support" helvetica? which browsers do you speak of? there are a plethora of browsers listed here http://blog.mhurrell.co.uk/post/2946358183/updating-the-helvetica-font-stack that don't or at least cannot utilize helvetica. unless you are serving up a licensed version of helvetica to them. i'm assuming that you aren't.

that link is about building a better font-stack for cross-browser/platform helvetica...although that's a mighty big stack and you may not need it all. you can find others, read more:

http://css-tricks.com/snippets/css/better-helvetica/

http://www.awayback.com/revised-font-stack/

http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

Upvotes: 0

Francis
Francis

Reputation: 298

As Pleun mentioned, there are several reset style sheets that give you a good start. But as hard as you try, you won't get the 100% same look. This is because of the different font rendering strategies browsers and OS use.

Some browsers allow you to control the font-rendering technique. For webkit browsers have a look here http://maxvoltar.com/archive/-webkit-font-smoothing

Upvotes: 1

Pleun
Pleun

Reputation: 8920

You can start with the reset script from Yahoo http://yuilibrary.com/yui/docs/cssreset/

Upvotes: 1

Related Questions