Fonts aren't displaying uniformly

Question

some elements on my website display perfectly, while other elements of the same font look grainy and choppy. I can't figure out why since I specify the style in the same way.

Here's my website:

http://violetoeuvre.com/

The side bar navigation (me, about, writing contact) is totally fine while the paragraph, h2, and footer styles are grainy and look like a rough version of the same type face.

CSS:

    /* Fonts */
    @import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);

Funky styles:

h2 {
        font-family: 'Playfair Display', sans-serif, 20px;
        font-weight: 100;
        line-height: 2em;
        color: #000000;
        letter-spacing: -1px;
        margin: 0; 
}

h3 {
        font-family: 'Playfair Display', sans-serif, 12px;
        font-weight: 100;
        line-height: 2em;
        color: #000000;
        letter-spacing: -1px;
        margin: 0; 

}

#foot a:link {
        font-family: 'Playfair Display', sans-serif;
        font-size: 15px;
        font-weight: 100;
        color:#000; 
        text-decoration: none; 
        letter-spacing:0.2em;
}

These are functioning fine:

#emma_home a:link{
        font-family: 'Playfair Display', serif;
        font-size: 75px;
        font-weight: 200; 
        color:rgba(255,255,255,1);
        text-decoration: none;
        letter-spacing:-4px;
    }
#nav_menu a:link{
        font-family: 'Playfair Display', serif;
        font-size: 30px;
        font-weight: 100; 
        color:rgba (255,255,255,1);
        text-decoration: none; 
        text-align: center;
        letter-spacing:0.2em;
}

#side_wrapper_text a:link{
        font-family: 'Playfair Display', sans-serif;
        font-size: 32px;
        font-style: italic;
        font-weight: 100; 
        color:#000000;;
        text-decoration: none; 
        text-align: right;
        letter-spacing:0.2em;

}

Also, on a PC the top Emma and Navigation (writing, blog, contact) are about 20 pixels ABOVE the black line, but on my Mac, the letters touch the white like I want.

What gives with these discrepancies??

Thanks.

Answer 1

I was confused as to why Playfair Display appeared grainy in my headings and paragraphs, but NOT in my sidebar navigation.

After some frustration, I realized that the typeface just looks bad at a certain (small) font.

Search for Playfair:

http://www.google.com/fonts/

As you can see, Normal 400 looks very weird, but in larger, bold, or italic styles, it looks just fine. The only thing to do was to choose a similar typeface for smaller styles, so I'm using Jacques Francois.

Answer 2

I think you should move font-size property from font-family tag and add it

font-family: sans-serif;
font-size : 12px;

check this W3 Schools they define 2 properties

Browsers behave differently with css some adapt the error some not

EDIT You can save yourself from repeating code by putting the selector that have same styles mostly and then you can overwrite that style. for ex

h2,h3 {
    font-family: 'Playfair Display', sans-serif;
    font-size : 20px;
    font-weight: 100;
    line-height: 2em;
    color: #000000;
    letter-spacing: -1px;
    margin: 0; 
}
h3 {
    font-size: 12px;
}

I see your a link has font weight property double than you defined for other so that may be the case for a tags but i dont see any other significant difference

Answer 3

I'm a designer that works mostly in web but occasionally print as well. I think your issue may actually be with the Playfair font itself which I have just discovered is missing certain font styles when it displays on PCs (Macs look fine). I would test with another font before losing much more time.

Answer 4

As far as I can see IE prefers ttf format over woff and that specific exports is wrong. I simply downloaded the google font mercurial repo any converted original (otf) files with font squirrel, now it works.