Various CSS (Font-weight) on Mac OSX and Windows. Why is the font size different?

Question

I ran into a problem in which "font-weight" looks different on different operating systems, in my case Windows and Mac OSX. Here are some examples of how a font is rendered:

• Windows:

• Max. OSX:

The same text, the same browser, but different operating systems. On a Mac device, I checked every browser, including Firefox, Opera, Google Chrome, Safari, and the website displays the same. As soon as I open the site on a Windows device, the font will be displayed in a “bold” way, since the text looks bold, although I do not have 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 that I refer to the CSS code being executed correctly. My font family is "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; if that helps. After much research, I tried using the following CSS code, which helped many users find similar problems for mine:

 -webkit-font-smoothing: antialiased; 

Unfortunately, the result is the same and looks like this:

• Windows:

• Mac OSX:

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

Best wishes!!

Answer 1

My guess is that on Windows, the display font is Arial , and on Mac OS X the display font is Helvetica Neue . The second version of Windows does not have Helvetica fonts by default, so it goes back to Arial.

However, Arial is very similar to Helvetica. I make this assumption based on the crossbar of capital Q. If you made an example with capital R or G, you could confirm my suspicions.

Since Arial does not have additional weight classes that Helvetica does, it is displayed by the next nearest weight class. This way you get the differences between the two OSs.

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

Answer 2

CLEAR, these are two different fonts. Pay attention to the dot above the "i". Pay attention to the width "h". This is not the weight of the font.

If you want everything to look the same, you need to use a font available on both systems.