I am currently facing an issue with fonts, particularly Google's Roboto font. In my tests, I have noticed that the font appears bolder on dark backgrounds (using Chrome 62.0.3202.62 on OSX Sierra 10.12.6), while it looks fine on Google's dark font edition ( - Choose dark background).
Here is a comparison of how it appears in my test:
https://i.sstatic.net/nYSzJ.png
compared to Google's appearance (which is lighter):
https://i.sstatic.net/GNjvo.png
After testing this on multiple machines with different setups, I have realized that the issue remains consistent. Does anyone have any suggestions on how to resolve this discrepancy? Or perhaps an explanation for why there is a difference between Google's rendering and my test?
For testing purposes, you can visit this URL: https://jsfiddle.net/fb3umv2e/
.btn {
display: inline-block;
padding: 7px 8px;
text-align: center;
background: #fff;
color: #000;
font-family: "Roboto";
font-weight: 300;
text-decoration: none;
font-size: 20px;
}
.btn.inverted {
background: #222;
color: #fff;
}
Kind regards, Richard