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)?