0

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:

client site render sample

Sample Site render example:

sample site render sample

Client site font info:

[client site font info[2]

Font Source

client site font source

Sample site font info:

sample site font info

Font Source

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

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.

using dev tools 'Compute' option

  • Hi Richard. Thanks very much. When I check letter-spacing (in Computed) on Site #2 (Client Site) it always shows normal. I do now see that on the Site #1 (Sample Site) is has 1px. Where were you able to see the CSS on Site #2 has 0.7px ? – inspirednz Mar 17 at 1:02
  • Also, I note that when I change it on the fly from normal to 0.7px it renders quite differently from how it is before changing it, implying that normal on my browser is resulting in a different spacing for me than it is for you. My understanding is, normal leaves it up to the browser to determine how it renders. When I set the letter-spacing to 1px it doesn't effect that fact that the Sample Site font seems a little bolder/heavier than the client site. I am not sure why it looks bolder, since they use the same font version and respective weights. – inspirednz Mar 17 at 1:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.