[Support request] Body copy color: Says it’s black, but doesn’t look pure black

[Cori]

I’m trying to wrap up my site (https://www.staging5.writtenpalette.com/) and I’ve got my body color set to #000, but it looks off on the page. More like an off gray instead of a pure black. Is there some setting I’m unaware of that needs to make this color pure black?

[Fernando]

Hi Cori,

Are you referring to the text? They seem Black from my end. Looking at their CSS confirms this as well. Can you try viewing the site on a different device?

If you’re referring to something else, kindly let us know.

[Cori]

We did and it looks different. Compare the body copy between these two.
https://www.staging5.writtenpalette.com/
vs
https://www.writtenpalette.com/

Same font. Same font size. Same line-height. Same color?

[Fernando]

I see. Do you have the same variations of the font-family for both sites?

It seems the font-weight is defaulting differently for them. It’s mostly like because the font-weight variations are not available for both. Specifically, font-weight: 400;

Try uploading the same variations. Try using the same letter spacing as well.

Hope this clarifies!

[Cori]

No, I don’t. Currently using Genesis and I placed this in their customizer under Header Scripts:

<link href=’https://fonts.googleapis.com/css?family=IM+Fell+French+Canon&#8217; rel=’stylesheet’ type=’text/css’>

Your version seems to call it from https://fonts.gstatic.com/s/imfellfrenchcanon/v21/-F6gfiNtDWYfYc-tDiyiw08rrghJszkK6foXBN5Azw.ttf instead.

[Fernando]

That’s the difference though. Try adding the font-weight variation similar to https://www.writtenpalette.com/.

The font-weight in https://www.staging5.writtenpalette.com/ is smaller in value which makes it look “greyer” than the other site.

Hope this clarifies!

[Cori]

It;s kind of weird but font-weights of 400 and 500 seem to be the same on the GP site and they are both less bold than the Genesis site. Likewise, the 600 and 700 weights are bolder than on Genesis.

And the Headings are also all set to 400 but the Genesis one seems bolder. Harder to tell but if you really look side by side.

[Fernando]

Actually, you’re right. Looking at the font from Google Fonts: https://fonts.google.com/specimen/IM+Fell+French+Canon?query=im+fell#standard-styles, it seems that there’s only two variations of the font.

So it makes sense the 100,200, 300, 400 and 500 are the same because there’s only 400.

Other font weights greater than 500 would fall to bold. Genesis seems to have a bolder 400 font.

Not sure why Genesis font is that way but GeneratePress doesn’t add anything special to the fonts generated from Google fonts. So, GP just uses the bare default.

If you would like to make it appear thicker, maybe you can add text-shadow as an alternative?

For instance, try adding this in Appearance > Customize > Additional CSS:

p {
    text-shadow: 0 0 0.5px black;
}

This adds a bit of shadow, making Paragraph Blocks look a bit thicker.

Kindly let us know how it goes.

[Author]

Posts