[Support request] My new landing page

[Chris]

I struggle with the question of what the best color is on a white background. And of course the best font and size. Do you have an answer for me? It is for my new landing page: https://www.beurstrading.nl/informatie-trading-systeem/

[David]

Hi there,

it really is down to personal preference and design, but some ‘standards’ do exist.
Generally do not use pure white #fff or black #000 – tone both down a touch just reduce high contrast. Font size for body: minimum 16px, a lot of people go for 18px.

If you’re not into ‘designer type’ then golden ratio works well:

https://pearsonified.com/typography/

Just add the font size and container width – leave the CPL blank. On the output hover over the font and it will provide the Ratios for your headings etc.

[Chris]

Thank you Dave! Do you have a suggestion for me for the white background color and the black text color?

[David]

This site uses #1b212b for the black. The white i would just reduce it down to FAFAFA or if you want a cool grey then F6F7F8 is nice 🙂

[Chris]

Thanks David!

[David]

You’re welcome 🙂

[Chris]

Hi David, I see something strange.
The text of a page is slightly less black and thicker.
All settings are the same.
How is that possible?

This is the page: https://www.beurstrading.nl/informatie-trading-systeem/

And this is a normal page: https://www.beurstrading.nl

[David]

Flush your Autoptimize cache and then let me know.

[Chris]

Done!

[David]

Can you flush them again and then switch off autoptimize so i can see where the stye os coming from. And maybe we can exclude it from optimization.

[Chris]

Done! 😁

[David]

You have a Tooltipster plugin (?) running on that page that is injecting font-aliasing to the head. Hence the change in appearance.

[Chris]

David, I do not understand anything about this! Can I give you access to the website?

[David]

One of the plugins, i think it is the Ninja Tables is adding font smoothing to that page. Put this CSS in your Additional CSS:

html {
    -webkit-font-smoothing: subpixel-antialiased;
}

[Chris]

Oke, now I understand! (I think 😁) First I will remove the table to check!

[Author]

Posts