I have a text with the following color and font-size:

color: rgb(60,128,124);
font-size: 16px;

But they look completely different on when rendered by Chrome (when compared to what I get on Adobe XD and Firefox). The Firefox render is much more similar to Adobe XD. And Adobe XD is exactly what my designer intended.

enter image description here enter image description here

Look how the "i" on Chrome is basically gray tones. Look how the Adobe XD version renders basically green tones, making a much more vivid color.

Note1: If I make the font-size larger and larger, these differences tend go away. And they all look the same.

Note2: What is even weirder is that the print above from the Adobe XD was taken on the very same Chrome, using the "Share for development" link. It's not a print from the Adobe XD desktop software. Even though it was rendered on Chrome, somehow, the render result looks completely different.

Is there a way to have similar render results on colors for small font-sizes across browsers?


I'm using the following font and this is how I'm adding it to my CSS:

@font-face {
  font-family: ProximaNova;
  src: url('/fonts/ProximaNova-Regular.ttf');
  font-weight: normal;
  font-style: normal;
  font-display: block;
  • There's no secret every browser uses a different rendering, so they will never output the exact same thing 100%.
    – Lucian
    Jan 6 '20 at 16:54
  • @Lucian thanks! Nothing much to do in this case. Maybe I'm using a color where this difference became more apparent. It was the first time I've noticed a "strong" difference like that. Jan 6 '20 at 18:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.