1

Using font-variant: small-caps; is not a good idea if you want consistency across multiple browsers and platforms.

When I first ran into problems with this property I came upon the cross-browser issue which another SO member had written about here: font-variant: small-caps; shows different font sizes using Chrome or Firefox. To get around this all you have to do is put the text in uppercase, taking most of the rendering away from the browser so it only has to make the first letter of the word larger. That case was solved.

Then I temporarily moved my site from a Linux-based server to a Windows 7 server. The exact same site viewed on the Windows 7 and Linux servers produced different text sizes with font-variant: small-caps;. Similar to the cross-browser issue it is only a 1-2px difference in size between the first letter and the rest of the word, but I had multiple textual elements side by side which threw my layout off by 10px in the end. So it seems that the browser is not the only culprit when it comes to sizing issues with this property, but the operating system as well.

In the end I did away with this property, put the text in caps, and used the :first-letter pseudo-element to achieve what I desired.

After that long explanation my question is... I know that some rendering is handled partly by the operating system, like the appearance of form elements, but why would text sizing be affected? I thought this was handled entirely by the browser.

Community
  • 1
  • 1
Matt K
  • 6,620
  • 3
  • 38
  • 60
  • 1
    Are you sure you have the same font in use in every OS? I use in css for example `font-family: Helvetica, Verdana, Arial, sans-serif;` Helvetica is (by default) in Mac OS and Verdana is in Windows if I remember correctly. – ZZ-bb Apr 02 '12 at 15:19
  • 2
    The font is dependent on the viewer, not the OS of the server. – Matt K Apr 02 '12 at 17:50
  • In general the typeface being used in not the same from platform to platform. The name may be the same but the metrics that define the shapes are not. – mmcglynn Oct 02 '12 at 14:54
  • 1
    @mmcglynn, but I'm _viewing_ both sites on the same machine (Windows 7). Since the browser is requesting the font from the user's machine and not the server it should pull the exact same font. It's almost like it's pulling two different fonts, or rendering one slightly different based on the OS of the server. Doesn't make sense to me. – Matt K Oct 02 '12 at 15:06
  • How about a working example or screenshot? – mmcglynn Oct 02 '12 at 17:24
  • 1
    I believe you @MattK! You are not alone. I had this issue on my site. Viewing the page on Chrome on Windows and Chrome on Mac gave two different views. – vlasits Apr 26 '19 at 20:34

0 Answers0