Why is text rendered with a greater font-size in Opera?

Question

I'm working on an HTML page that needs to be more or less pixel-perfect, and I noticed that in Opera 10, fonts are rendering larger than they do in other browsers, even though the font-size is effectively the same.

Please see this example page in Opera 10 and another browser like Firefox 3.6:

http://troy.onespot.com/static/stack_overflow/opera_font_size.html

Alternatively, here's a screenshot that illustrates the issue:

http://skitch.com/troywarr/d47m1/font-size

The red boxes behind the "50px" and "46px" text (both styled to have the corresponding font-size) both have a height of 50px.

In Firefox 3.6, the descender of the "p" in "50px" lines up with the bottom of the red box behind it. In Opera, the descender of the "p" in "50px" hangs below; it's the "46px" that more closely matches the "50px" in Firefox. That suggests to me that Opera is rendering fonts in the ballpark of 10% too large.

This, and the same issue with other body text, is completely throwing off my page layout in Opera 10. Please let me know if you have any ideas about what may be causing this, or at least how to prevent/fix it.

Thanks!

---

UPDATE:

It appears that I don't have a proper copy of Helvetica installed - I removed it from the font stack and saw no difference in the rendered text on my test pages.

I updated the test pages to only use the generic "sans-serif" font-family, so hopefully we're all seeing the same thing now.

Interestingly, using the generic "serif" font displays exactly the same in Opera and Firefox.

Could this issue just be a quirk around how Opera displays the generic "sans-serif" font?

---

UPDATE 2:

This may be important: I'm using Mac OS X Snow Leopard. I'm experimenting with other fonts now to see if I can isolate the issue any further.

---

UPDATE 3:

I created another test page using Arial:

http://troy.onespot.com/static/stack_overflow/opera_font_size_reset_arial.html

And now Opera and Firefox match almost exactly!

I can probably get away with using Arial in lieu of Helvetica on this project. As far as I know, I have a completely stock OS X version of Helvetica - so I can't afford any disparity between how different users may be seeing the fonts on my page. I'll stick with the tried & true Arial.

What could this mean, though - does OS X's default sans-serif font just render strangely in Opera or something?

Mnemosyne

Thanks for the answers, but a reset stylesheet didn't solve the problem. I'm actually using Eric Meyer's "Reset Reloaded" stylesheet as part of the HTML page that originally exhibited this problem. – Mnemosyne

Please see this example page that uses Eric Meyer's "Reset Reloaded," but still has the same issue with font-size: troy.onespot.com/static/stack_overflow/… – Mnemosyne

I think you have swapped Firefox and Opera in your screenshot? – Publicist

@rlovtang: Crap, I did! Thanks for pointing that out - I fixed it. – Mnemosyne

I see the exact same result as your screenshot in Opera 10.62 / Firefox 3.6.8 on OS X 10.6.4 – Publicist

Answer 1

My suspicion is that Opera uses a different fallback font for Sans-serif than the other browsers do. That should be possible to confirm or eliminate by using a different font that is definitely installed on the system.

Caprifig

This seems most feasible to me. After changing to Arial (which I definitely have installed), the text matches exactly in all of the browser's I've tested in. I'm not 100% sure what the problem was, but that solved it in my case. Thanks for your help! – Mnemosyne

Answer 2

I came across this thread when I was having similar issues with Opera 11.10 on Windows 7 x64.

Opera was defaulting to using 20px as the body font-size (rather than 16px which is what other browsers use). This persisted even after uninstalling, deleting Opera preferences and re-installing. It turns out that Opera will honor your system font-size preferences (set under 'Control Panel\Appearance and Personalization\Display' on Win7) for rendered website text whereas other browsers (I tested FF4, Chrome 11, Safari 5, IE 9) do not. My system font size was set to 125% which explains the 20px. Once I set my system font zoom to 100%, Opera behaved the same as the others.

I'm not sure which behavior is more correct (In a way, it's nice that Opera honors my font choice) but since since other browsers do not do the same, it is "unexpected". I don't have a Mac to test but perhaps MacOS has a similar system font preference?

Oakie

Answer 3

I was having a similar issue.

I found that the default computed font size in FF and most other browsers on is 16px, but on opera the default seems to be 20px.

I simply set font-size:16px; for html, and it seemed to take care of it.

Alleviator

After all combinations of CSS reset files and other tricks, this finally did it!!! – Precritical

Answer 4

I'm not reproducing your problem. This is what I get in Firefox 3.6.8 (and in Internet Explorer 8):

Albedo

Thanks, Robert - it looks like your font is more compressed than mine (maybe your browsers are defaulting to a generic sans-serif face?), but the height of the text at each font-size is still similar to my screenshot. Are you able to compare what you're seeing in FF/3.6.8 and IE/8 to Opera 10.10 to see if there's a height discrepancy like I'm seeing? – Mnemosyne

"I can't reproduce the problem" isn't an answer :p – Thalia

Answer 5

I think I know your problem. I am getting it exactly the same size in all browsers (at least Firefox, Opera and Chrome). This, I am sure, can be easily overlooked if you dont know you or someone else has done this, but try checking the zoom settings in Opera... let me know if it doesnt help and I will work some more on it.

Bestiality

Thanks, ClarkeyBoy - my zoom setting in Opera is the default 100%. Is it possible that there's a quirk with my Helvetica font? I'll try using a generic sans-serif (and maybe other common fonts) to see if this is reproducible with other font-families. – Mnemosyne

Try checking Firefox then. Its worth just checking - otherwise you will feel a right fool if it turns out, having spent days trying to sort this, that Firefox is zoomed out by 10%. I am also having a fiddle with it. I am starting to wonder if it is a quirks thing - if either you are missing the font or we are. – Bestiality

@Mnemosyne you may also want to check out whether you have multiple Helveticas on the system, e.g. TTF and Type 1. I would try this with Arial to make sure – Caprifig

@ClarkeyBoy: Thanks - FF is at 100% too. I don't think it can be a zoom issue, since both FF and Opera will also zoom the red box in proportion to the text. I'm testing with other fonts now to see if I can isolate the problem... starting to suspect a Helvetica issue as well. – Mnemosyne

@Pekka: Good call. Trying that now. – Mnemosyne

Anyway +1 for the answer because all too often, this actually is the reason – Caprifig

Answer 6

This is where a css reset stylesheet can really simplify things for you.

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Amalberga

Thanks - please see my comments above. – Mnemosyne

Answer 7

I had similar issue until I used reset CSS of Eric Meyer :)

Northeaster

Thanks for the answer, but the issue still occurs with a reset stylesheet - please see my comments above. – Mnemosyne

Answer 8

Came across similar issues, had to change my fallback order from:

font-family: Helvetica, Verdana, Arial, sans-serif;

to

font-family: Helvetica, Arial, sans-serif;

Since Arial and Helvetica are almost exactly the same size, when opera falls back it still looks good.

Blackmore