Trying to determine why same font on two sites renders differently

Question

Issue

Two web sites have the same font, set up with the same typography. Yet they render differently.

Background

I need to replicate the typography from site #1 ("Sample Site") to site #2 ("Client Site").

I've set up the typography on Client Site to match Sample Site, yet they render slightly differently. It's enough of a difference that they don't look the same, even to the untrained eye.

After looking into it extensively, I can't figure out why they appear different.

I am seeking help on determining the cause.

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

Client Site / Site #2 is www.vivation.org

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

font-family: "Open Sans" ...; font-size: 14px; font-weight: 400; line-height: 20px margin: 0 0 10px;

The color on Sample Site is #888, and Client Site it is currently using #666, for reasons unknown to me, which is an issue with the theme. But even when I change the color to #888 on the fly, it doesn't resolve the issue of the typography looking different.

Note: Both are sourcing the same font file from Google Fonts.

One thing I do note is that the WhatFont info panel (it's a Chrome extension that gives font info), says "Via Google Webfonts" on site #2. Yet, I've checked, and I'm pretty certain site #1 is using the same font from GoogleFonts.

Here are screenshots of how they each render (color correction applied), and other related info: (you'll also note the titles look very different, even through they also have exactly the same CSS applied)

Client Site render example:

Sample Site render example:

Client site font info:

[

Font Source

Sample site font info:

Font Source

QUESTION

My question is: what is it I am over-looking which, when addressed, will make the typography appear the same on the Client Site (#2) as it does on the Sample Site (#1)?

Answer 1

Okay taking a quick look, I can see that letter spacing is definitely different which has a huge impact on the visual appearance of font.

On one site it's: letter-spacing: 0.7px;
On other site it's: letter-spacing: 1px;

Both sites seem to be using V15 of Open Sans as different version numbers change the font appearance as well.

Also, to easily check all of the rules being applied to a certain section of font, just use the "Computed" tab in developer tools and then compare the two sites and you'll easily find the difference.