Bug 33385 – Small caps height is rendered too small

• Component: Text
• Status: UNCONFIRMED

On Safari 4.0.4 and no doubt previous versions, the height of "lowercase" letters is too short. I've found this to be the case when using ems. I don't know if pixels render the same way.

Here are screenshots of Safari on left and Firefox 3.6b5 on right:

===============
Make sure your browser hasn't scaled the image down so you can see this crisp…
===============

With guides:
http://www.fuzendesign.com/safaribug/smallcaps-guides.png

Without guides:
http://www.fuzendesign.com/safaribug/smallcaps-rendering.png

The guides shown are based on the x-height for that paragraph (meaning lowercase letters for the regular text--not the first line).

Although not shown, Safari and Firefox have the same exact rendering of x-height for the regular body text. So the reference point (the spacing of guides) is true for both browsers. Excellent!

The problem lies with how Safari renders font-variant: small caps. In this case, the "lowercase" letters on the first line are not tall enough. You'll see a slight gap between the top of the letters and the guide. This isn't the case with Firefox which renders it right.

I believe that difference makes a huge difference in the practical use of small caps in Safari.