Two web sites have the same font, set up with the same typography. Yet they render differently.
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" ...;
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:
Sample site font info:
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)?