Safari shows larger font size than other broswers

Question

I'm working on a website, on which fonts are much larger on Mac's Safari than on the other browsers,

The website is using the 'Open Sans' font from Google Fonts.

Example, this a CSS snippet for titles:

h2.protitlesnbm{
    color: #404040;
    font-size: 22px;
    text-transform: uppercase;
    float: none;
} 

This shows up like below on Chrome, Firefox and IE:

But on Mac's Safari, it is shown like this:

Somehow, Safari seems to add 1px for all fonts.

Can anyone help me to fix this issue?

Answer 1

You could try using

-webkit-font-smoothing: subpixel-antialiased;

or

-webkit-font-smoothing: antialiased;

Answer 2

You can always use JavaScript check if the browser is Safari, and if it is, just minimize the font sizes by 1px. I know that this is not a conventional way of doing things, but as long as it works:

var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) {
    return p.toString() === "[object SafariRemoteNotification]";
})(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));

This method was taken from Javascript - How To Detect Browsers And its explanation:

Safari: A unique naming pattern in its naming of constructors. This is the least durable method of all listed properties and guess what? In Safari 9.1.3 it was fixed. So we are checking against SafariRemoteNotification, which was introduced after version 7.1, to cover all Safaris from 3.0 and upwards.

In order to change font sizes, there is a deprecated method that could still work:

document.body.fontSize(-1);

If not, try CSS Relative Font Sizes:

document.body.style.fontSize = ""; //Either Enter Percentages (90%) or EM
//EM Will Automatically Change Font-Size According To Browser
//%-ages Will Change Values Through Math (110% of 16px)

Hope that helps!