CSS & Webfonts – Explain this.

Goran Soderstrom's picture

Stumbled upon this just now.

WinXP, Chrome, ClearType OFF.

Why does the exact same font in the same size render so totally differently?


Btw, should we have a new forum topic called web fonts, css-typography or something similar?

riccard0's picture

In the first case, they do not look the same size in Firefox. I don't know if the CSS "font-size-adjust: 0.51;" for the paragraph is to blame.

Goran Soderstrom's picture

I found the problem myself. The top one on my first example is #444 the below is #333 and this small change in color should not effect the rendering that much, it’s two totally different renderings.

In the italics it’s even more visible:

More proof:
Look at a similar issue on Typekit for instance. Same font, same size. The middle example, marked red should be less black than the two above, but the general visual appearance is the opposite.


riccard0's picture

Well, different color doesn't explain the difference in size:

Firefox, Windows XP

Goran Soderstrom's picture

No, certainly not. But that’s a CSS issue. It was the font-size-adjust property that did the size change.

Both problems are fixed now, but I’m still surprised to see such a huge difference depending on what color is used.

Richard Fink's picture

a font-size-adjust setting was included in Font Squirrel's @font-face kit demo pages. (It might still be there, I don't know, but I rerouted by my workflow around it. It drove me crazy until I found out THAT was the reason for the strange font-size rounding I was seeing. And only FF supported it at the time (that might still be true) . Not good.

font-size-adjust - its lack of universal and consistent support is a big problem. Stay away, I say.
Beyond that, I think it's one of those properties with a theoretical promise that exceeds it usefulness in reality. And idea hatched in Las Vegas one drunken night.

Syndicate content Syndicate content