Different menu font weights on chrome vs firefox etc?

[mhote]

Hi,

Not sure why, but firefox shows font weights (of menus) much stronger than Chrome.

We’re trying to keep it looking like chrome. How can we do this in the theme? Thks

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.full-center nav#main-navigation ul.menu > li.menu-item {
    font-weight: normal !important;
}

Thanks
Mohammad

[mhote]

Thanks Mohammad, but that makes it different between Chrome and Firefox still

Trying for weight to be same on both browsers and it’s not doing this automatically

[tiago]

hi mhote,

I came in curious as to what the Swift team might respond to this. I don’t know how much you know about this issue… Major browsers render fonts differently, sometimes even line weights and colours. Chrome renders in a quite different size from most major browsers, generally speaking much smaller text. IE comes closest, with Edge, Opera and Firefox rendering significantly larger.

I doubt you’ll find templates that adjust to these differences automatically. For traditional typography loving print designers (like myself), initially this is a headache (heresy!), but it’s something I got to accept; that I cannot fully control type on the web (hell!).

There are a few solutions out there to minimize such differences, like using ’em’, ‘%’ or ‘px’ units on font sizes instead of ‘pt’, though some developers don’t recommend ‘px’. There is also the CSS reset, which must be tailored to your own website styles, so I guess putting this on a template-base doesn’t make sense, since a lot of people change their styles throughout.

You may find these two articles interesting:
http://stackoverflow.com/questions/521832/consistent-font-size-across-browsers-web-development
http://stackoverflow.com/questions/30876894/how-to-prevent-different-browsers-rendering-fonts-differently

Regards
Tiago

[Mohammad – SUPPORT]

Hi,

@tiago – Thanks for sharing solution.
Mohammad

[tiago]

Most welcome, Mohammad.

mhote, the following article is also quite interesting, as it explains the pros and cons of using either ‘px’ or ’em’ (no perfect solution, you have to choose the least worst) and also introduces a new unit I hadn’t heard about for CSS3; ‘rem’

https://snook.ca/archives/html_and_css/font-size-with-rem

Regards
Tiago

[tiago]

Just a p.s. correcting an earlier statement. Edge actually renders similar sizes to Chrome and IE. I hadn’t noticed, but I had the zoom set to 125% :p

[mhote]

Great reading Tiago and Mohammad, thanks muchly

[David Martin – Support]

Thanks all for the above suggestions and resources.

– David.

[tiago]

Just an additional note that I was reading the comments on the later article last night (always a good thing since other people may offer a different view and suggestions of improvement) and I did find a couple of comments warning against using a root % with rem.

The root % is related to the navigator’s standard font size, which for a while has been 16pt, quite big and why the author suggests using 62.5%, which is equivalent to a 10pt root.

The problem with this solution is that a user may change the navigator’s standard font size, making it smaller or bigger. This means that whatever percentage we set will apply to their custom configuration and may have a big effect on font sizes. Say the user chooses 10pt size as a standard, 62.5% root will be equivalent to 6pt, which is very small.

Instead, you can set your root size in pt or px, with the difference being in allowing the user change font sizes (pt) or only scaling the entire page (px) using the zoom tool.

Having said this, another commenter suggested that it is easier to use ’em’ than ‘rem’, since the later requires adding fallback ‘px’ sizes for older navigators, while ’em’ only requires a reset for nested lists to prevent compounding sizes.

Worth investigating deeper before just picking whatever solution.

[David Martin – Support]

Very true, rem is a modern approach that will likely be the norm going forward. But as you mention, there are pros & cons for each.

– David.