Font size inconsistent in different browsers

I’m developing for this client. Fixing a site they already had. They have told me that the font size in the left hand menu is smaller in some Chrome browsers for some users. From what I understand the size issue is occurring on Mac and Windows.

The difference occurs on different pages:
http://www.steinberg.us.com/people/
VS
http://www.steinberg.us.com/work/

When I view the inspector it is rendering a particular size.

Question: I don’t believe there is anything I need to fix on my end. I am not convinced it’s an issue with the code. Instead it’s some sort of viewing issue. I’m trying to brainstorm on all the variables that may be at play. I may not be aware of them all.

The variables I am aware of so far:

  • Some users have their browser zoomed in or zoomed out?
  • ??? I don’t know what else

Can anyone suggest other variables I need to consider so that I can help my client view the page properly?

OR

Might there be a CSS issue that results in inconsistent font-size rendering?

It looks the same size to me in Mac and windows (both on chrome).

It’s either that users have zoomed the page smaller (assuming that the whole page is smaller as zooming would not affect the left menu only) or that users have older browsers that don’t recognise rem units as you set the left menu to 1.3rem. Maybe have a fallback of 13px before the rem setting.

Lastly I see you are using a custom font and if the font doesn’t load for some reason then the text will appear to be a different size.

The only real way to debug is to get hold of the person who is seeing the page at a different size and inspect their code with devtools to see what’s happening, There’s only so much you can do from a screenshot.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.