CODEWITHSUNDEEP
google-chromecsssafariopera
Spacedust
Spacedust

Reputation: 1021

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

Text on my page look blurry on Safari, Opera and Chrome: http://testowa.portalo.pl/wiadomosci.php

I'm using such CSS:

.tytulmalykom {
    color:#666666;
    font-size:11px;
    font-variant:small-caps;
}

It works ok on Firefox and Internet Explorer. Are there any alternatives ?

Upvotes: 0

Views: 2172

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201628

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.)

Upvotes: 3

Related Questions