Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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 ?

Problem courtesy of: Spacedust

Solution

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

Solution courtesy of: Jukka K. Korpela

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×