CODEWITHSUNDEEP
macosgoogle-chromecsssafariwebkit
cassi.lup
cassi.lup

Reputation: 1261

Font rendering differently on all OS X browsers

I'm developing this website where I use CSS to style my menu buttons.

They all look good on Windows, but when I try them out on OS X, they render erroneously. What's even more odd is that they show good on a page, but [in my opinion] not so good on another:

Fonts render with a blur around:
Fonts render with a blur around

Fonts render in "skinny" mode:
Fonts render in "skinny" mode

Also, I found out that if I hover over an element (ie. logo) that has CSS3 transitions applied on hovering, the blurry rendered fonts become rendered skinny, but when the CSS3 Animation ends, they resume the blurry rendering.

The CSS transitions in cause:

.logo {
    float: left;
    margin-left: 0px;

    -moz-transition: all 0.3s ease-out;  /* FF4+ */
    -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
    transition: all 0.3s ease-out;

    -webkit-transform: rotate(0deg);
}

.logo:hover {
    -moz-transition: all 0.3s ease-out;  /* FF4+ */
    -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
    transition: all 0.3s ease-out;  

    -moz-transform: rotate(-3deg) scale(1);  /* FF3.5+ */
    -o-transform: rotate(-3deg) scale(1);  /* Opera 10.5 */
    -webkit-transform: rotate(-3deg) scale(1);  /* Saf3.1+, Chrome */
    transform: rotate(-3deg) scale(1);  

    zoom: 1;
}

You can observe this phenomenon live here: http://pote.ca.

Help? Please?
Thanks in advance! :)

UPDATE:

I am using verdana for the menu items, and another font for the // bun venit message.

Another example of fonts rendered that do not look good is the menu on Google's Analytics page:

enter image description here

Upvotes: 0

Views: 1375

Answers (1)

deceze
deceze

Reputation: 521995

That's not rendered "badly", it uses an overall different font rendering strategy than Windows. OS X tends to preserve the original shape of the character better, while Windows attempts to shove characters into a pixel grid. The results look different, not "worse". And yes, you need to take this into account as part of your design.

For reference, see A Closer Look At Font Rendering, Coding Horror: What's Wrong With Apple's Font Rendering? etc.

Upvotes: 1

Related Questions