CSS - Font appears bolder on devices with higher dpi

Question

I have been testing my web page on different devices an the text appears bolder on devices with higher device pixel ratios (iPhone, for example). I have tested this on the chrome emulator as well : The text looks perfect at DPR 1 and appears much bolder at DPR 2.

At DPR 1

AT DPR 2

Is there any 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, rest is aligning and media queries for 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 might need to change some of the numbers though to get the result you want this is just an example.

There isn't really any other way to do this that I know of because font-weight is really always different even if the number is the same. Plus it's not really that big of a difference on the DPR 2.0

It looks good :)