Font-Variant: Small-Caps; Shows Different Font Sizes Using Chrome or Firefox

font-variant:small-caps works ok on IE and Firefox, looks blurry on Safari, Opera and Chrome

Most fonts lack a small-caps typeface, so font-variant:small-caps makes browsers generate fake small-caps. They do this by converting to uppercase and reducing font size. The results vary from tolerable to awful, depending on font, browser, display device, and other factors. Among other things, different browsers apply different size reductions here.

Thus, you get more consistent results by doing the case conversion and font size reduction yourself. It gets clumsy if the text is mixed-case, since to have “Foo” rendered in small-caps preserving the case distinction, you need to use F<span class="sc">oo</span> (and set text-transform: uppercase and font-size: ... on the .sc). And the result will not be typographically good; you need a typographer-designed small caps font for that. But at least you have odds of getting the same font size reduction on different browsers. (It isn’t guaranteed, since there are small differences in applying font sizes.)

Inconsistent font sizes cross browser with both px and em

There seems to be a problem with font-variant: small-caps;

When removing it like in this fiddle, I have consistent rendering in W7 with Fx, Chr and IE8.

If you confirm that with your tests (I didn't test thoroughly), I'd advise you to render text with smaller font-size and force it in uppercase (without the help of font-variant:small-caps;) and use :first-letter as this:

.loadingText {
    font-size: 2.5em; /* example, something less than 3.5em. Equiv. 40px */
    text-transform: uppercase;
}
.loadingText:first-letter {
    font-size: 3.5em;
}

Even with this widely used properties, rendering of text is not meant to be pixel-perfect on different OS and browsers so their width will vary (not every Linux distribs have Arial for example or maybe very few of them, anti-aliasing is OS and user choice, OS X has a different rendering than Windows, it's different across versions of Windows and on mobile... oh well :)

Firefox is breaking my small-caps

The font is broken for those characters. Other browsers fallback to the next font in a different way from Firefox. You can see this by providing an obviously different font as the second font in the font-family. For example, in this JsFiddle, Wingdings is used as the first fallback font. i.e.

body { font-family: "THAT-FONT", Wingdings, "Open Sans", "open-sans", Sans-Serif; }

https://jsfiddle.net/rnwvpfy1/2/

See how Chrome displays that, showing that it's not using the "THAT-FONT" font for the broken characters.

font kerning differs in chrome and firefox even after using the reset.css

It’s not kerning, it’s differing implementations of font-variant: small-caps.

Common default fonts used by browsers (or the Noto Serif font for that matter) do not contain genuine small caps, i.e. small cap glyphs designed by a typographer. Even if they did, current browsers are unable to use them to implement the CSS setting. Instead, they generate fake small caps by replacing a lowercase letter by the corresponding uppercase letter in reduced size. This is typographically all wrong – the stroke widths become too small, and uppercase letters thus differ in style from the fake small-caps (look bolder than they).

Apparently, browsers do the size reduction slightly differently.

You can work around this by removing small-caps and doing the font reduction yourself, e.g. writing

C<small>ULINARY</small> F<small>RENCH</small> W<small>ATERWAYS</small>

and setting e.g.

small { font-size: 70% }

in CSS (tune the percentage to your liking). It will still be typographically awful, but at least as similar across browsers as you can get – provided that you either use Noto Serif as a downloadable font or put some widely available font(s) like Times New Roman before or in place of serif in the list.

---

Related Topics