Display fonts in different browsers

Question

There is a design drawn in Zepplin. There is a font

font-family: HelveticaNeue;
font-size: 16px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #888888;

But for some reason in the browser it is displayed much thinner than in design. What could be the problem?

In the picture the design below the browser at the top:

Answer 1

here you hape put the font-weight property just put the value to 600 like below

font-weight: 600;

the reason behind that is when we put font-weight below 600 it shows the text normal, while if we put the font-weight between 600-900 it shows the weighted text

Answer 2

you can use font-weight: bold :- if you need text be look like bold or else you can give some value 500-900 to match the design in the zeplin.

hope it will work fine in all the browsers if give value as "bold".

Answer 3

@Alexandr Kizilow some fonts varies browser to browser. Use below:

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

if not then make font-weight:500 (font-weight also varies from font to font)according to font you are using, it will make font bold.