Different CSS (Font-weight) in Mac OSX and Windows. Why does the font-weight render differently?

Question

I came across an issue in which the "font-weight" appears differently in different operating systems, in my case Windows and Mac OSX. These are some examples of how the font gets rendered:

• Windows :

• Max OSX :

Same text, same browser, but different operating systems. On the Mac device, I checked every browser including Firefox, Opera, Google Chrome, Safari and the website gets displayed the same. Once I open the website on a Windows device, the font gets displayed in a "boldish" way, its to say, the text appears bold although I have no such CSS code with this attribute. My custom CSS is as follows:

html,
body,
div,
applet,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
td,
input,
textarea {
  font-weight: 300 !important;
}
h1,
h2,
h5,
h6 {
  font-weight: 300 !important;
}
h3 {
  font-weight: 400 !important;
}
h4 {
  font-weight: 400 !important;
}
span,
strong,
th {
  font-weight: 500 !important;
}

This code works fine, and with this I refer to the fact the CSS code gets executed correctly. My font family is "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; if this is of any help. After a lot of research, I tried using the following CSS code which helped many users get around similar problems to mine:

-webkit-font-smoothing: antialiased;

Sadly, the result is still the same and looks like follows:

• Windows :

• Mac OSX :

How can I display the text on a Windows device with the same thickness as on a Mac OSX device? I want the text to be thinner on Windows.

Best Regards!!

Answer 1

My guess is that on Windows, the font being rendered is Arial and on Mac OS X, the font being rendered Helvetica Neue. IIRC Windows doesn't include Helvetica fonts by default, so it is falling back to Arial.

However, Arial is VERY similar to Helvetica. I'm making this guess based on the cross bar of the capital Q. If you made an example with a capital R or G you might be able to confirm my suspicion.

Since Arial doesn't have the additional weight classes that Helvetica does, it is being rendered with the next closest weight class. Thus, you are getting differences between the two OSes.

If you want consistency, I would recommend using a web font like Roboto or Open Sans or something.