CSS - Font seems bolder on higher resolution devices

Question

I tested my webpage on different devices and the text seems bolder on devices with a higher pixel ratio of the device (like iPhone). I also tested this on the chrome emulator: the text looks perfect on DPR 1 and seems bolder in DPR 2.

In DPR 1

AT DPR 2

Is there a way to fix or reduce the effect? Any help would be appreciated.

HTML:

<div class="section" id="section3"> <h1>Projects</h1> </div> 

CSS

 /*to fix safari bold font*/ h1, h2, h3, h4, h5, strong, b { font-weight: 400; } #section4 h1,#section3 h1 { visibility: hidden; position: absolute; font-family: Graphik-Semibold, Roboto; font-weight: 600; margin: 0; top: 3.7%; } 

This is the most relevant code, the rest are alignment and media queries for the font size.

Answer 1

 @media only screen and (max-device-pixel-ratio: 2) { b { font-weight: 600; } } @media only screen and (min-device-pixel-ratio: 2) { b { font-size: 400; } } 

You may need to change some numbers, but to get the result you want is just an example.

Actually there is no other way to do this that I know about, because the font-weight is really always different, even if the number is the same. Plus it's not a big difference on DPR 2.0

Good looking:)