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?

are you also sure that you have not set any custom font-size via the safari browser? could you clear the cache and recheck ? — Richard Pariath, Oct 19 '18 at 14:44
The font using in site is "Open Sans" via google fonts https://dev7.horecaworld.biz/opbergrek-45-5-x-91-cm-hendi-812204 — Suneth Kalhara, Oct 20 '18 at 04:27
Inspect the elements and make sure that the rendered fonts are the same (the CSS properties being the same is not enough, the browser inspector should tell you what font the glyphs are rendered with). Mac uses different text rendering than Windows, particularly anti-aliasing algorithms, so the two will never be identical. — skyline3000, Oct 23 '18 at 15:15
It Chrome and Safari font sizes look the same for me on OSX. What if you try `rem` units instead of `px`? — miir, Oct 24 '18 at 17:33
are you sure you didn't zoom-in in your browser? it looks zoom-in for me — Kira Hao, Oct 25 '18 at 02:42

score 6 · Answer 1 · answered Oct 15 '18 at 14:21

6

You could try using

-webkit-font-smoothing: subpixel-antialiased;

or

-webkit-font-smoothing: antialiased;

answered Oct 15 '18 at 14:21

Chillie

1,030
10
28

I tired that but nothing changed – Suneth Kalhara Oct 15 '18 at 15:49
what style did you try adding it to? – Chillie Oct 15 '18 at 19:24
both i added to body and html selected and tested not worked then tried by adding to above h2 selector it also not worked – Suneth Kalhara Oct 16 '18 at 05:57

score 1 · Answer 2 · answered Oct 23 '18 at 05:55

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!

score 1 · Answer 3 · edited Nov 10 '20 at 03:16

1

May you just need to make sure the Font is the same Weight on all Browsers.

you could try something like

h2.protitles{
    color: #404040;
    font-size: 22px;
    text-transform: uppercase;
    float: none;
    font-weight: 400; /* This should be the normal font-weight in Chrome */
}

If its still not thin enough you can try to play around with the font-weight value.

May it Helps :)

edited Nov 10 '20 at 03:16

Justin Grant

44,807
15
124
208

answered Oct 25 '18 at 08:40

Sandro Schaurer

416
4
13

Safari shows larger font size than other broswers

3 Answers3