css – An attempt to determine why the same font is displayed differently on two websites

Two websites have the same font and are set up with the same typography. However, they render differently.

background[2]I need to replicate the typography from site 1 ("example site") to site 2 ("client site").

I've set the typography on the client site to match Sample Site, but it's presented a bit differently. It makes a difference that they do not look the same even to the untrained eye.

After a thorough investigation, I can not figure out why they look different.

I seek help in identifying the cause.

Example Site / Site # 1 is www.neurohacker.com

The client site / site # 2 is www.vivation.org

If we take the typography for pFor example, both are set to:

Font family: "Open Sans" ...;
Font size: 14px;
Written weight: 400;
Row height: 20px
Margin: 0 0 10px;

The color on Sample Site is # 888and client site that is currently in use # 666, for unknown reasons, which is a topic with the topic. But even if I change the color # 888 on the fly solves the problem of typography no different.

Note: Both have the same font file from Google Fonts.

One thing I notice is that the WhatFont information window (it's a Chrome extension that contains font info) says "Via Google Webfonts" on page 2. However, I've checked, and I'm pretty sure site # 1 uses the same font from GoogleFonts.

Here are screenshots of how they are rendered (color correction applied) and other related information: (You'll also notice that the titles look very different, even if they use exactly the same CSS.)

Example of client site rendering:

Example of client site rendering

Example of a site render example:

Example Site render such

About the font of the client site:


Example of site font information:

Example of site font information

Font Source

Example font source for site


My question is, what do I look out for, which makes the typography look the same on the client site (# 2) as it does on the sample site (# 1)?