Safari displays text in a noticeably bigger font size compared to other browsers

Question

Safari displays text in a noticeably bigger font size compared to other browsers

I'm currently working on a website and have noticed that the fonts appear larger on Mac's Safari compared to other browsers.

We are using the 'Open Sans' font from Google Fonts for our website. For example, here is a CSS snippet for titles:

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

When viewed on Chrome, Firefox, and IE, it looks like this:

However, when viewed on Mac's Safari, it appears like this:

It seems that Safari adds an extra 1px to all fonts. Can someone assist me in resolving this issue?

html css safari

Answer 1

Answer №1

If you're looking to enhance font clarity, you might want to experiment with the following CSS properties:

-webkit-font-smoothing: subpixel-antialiased;

Alternatively, you can also try:

-webkit-font-smoothing: antialiased;

Answer 2

If you're looking to enhance font clarity, you might want to experiment with the following CSS properties:

-webkit-font-smoothing: subpixel-antialiased;

Alternatively, you can also try:

-webkit-font-smoothing: antialiased;

Answer 3

Answer №2

If you ever find yourself needing to identify whether the browser is Safari using JavaScript, one unconventional approach is to decrease font sizes by 1px. While not the most orthodox method, it can get the job done:

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

This technique was sourced from Javascript - How To Detect Browsers And here's a brief explanation:

Safari: Utilizes a specific naming convention for its constructors. Although this method may not be foolproof due to updates, we use SafariRemoteNotification introduced after version 7.1 to encompass all Safaris from 3.0 onwards.

To adjust font sizes, there's an outdated yet functional way:

document.body.fontSize(-1);

If that doesn't work, consider utilizing CSS Relative Font Sizes:

document.body.style.fontSize = ""; //Input percentages (90%) or EM
//EM adapts font-size based on browser
//Percentages alter values mathematically (110% of 16px)

Hopefully, these methods prove to be useful!

Answer 4

If you ever find yourself needing to identify whether the browser is Safari using JavaScript, one unconventional approach is to decrease font sizes by 1px. While not the most orthodox method, it can get the job done:

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

This technique was sourced from Javascript - How To Detect Browsers And here's a brief explanation:

Safari: Utilizes a specific naming convention for its constructors. Although this method may not be foolproof due to updates, we use SafariRemoteNotification introduced after version 7.1 to encompass all Safaris from 3.0 onwards.

To adjust font sizes, there's an outdated yet functional way:

document.body.fontSize(-1);

If that doesn't work, consider utilizing CSS Relative Font Sizes:

document.body.style.fontSize = ""; //Input percentages (90%) or EM
//EM adapts font-size based on browser
//Percentages alter values mathematically (110% of 16px)

Hopefully, these methods prove to be useful!

Answer 5

Answer №3

Perhaps you just need to ensure that the Font has consistent Weight across all Browsers.

You might want to experiment with something like this:

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

If it still doesn't appear thin enough, consider adjusting the font-weight value.

Hope this proves helpful :)

Answer 6

Perhaps you just need to ensure that the Font has consistent Weight across all Browsers.

You might want to experiment with something like this:

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

If it still doesn't appear thin enough, consider adjusting the font-weight value.

Hope this proves helpful :)

Safari displays text in a noticeably bigger font size compared to other browsers

Answer №1

Answer №2

Answer №3

Similar questions

Enhance User Experience with a Responsive Website Dropdown Menu

Is there a way for me to choose all the classNames that conclude with a specific word within the MUI sx property?

What factors influence the timing of Chrome's spell-check feature for a particular word?

Tips for personalizing text and icon colors in the TableSortText element of Material-ui

Please provide the text input for the specified version numbers (1.1, 1.2, 3.0, etc.)

Ensuring draggable div remains fixed while scrolling through the page

JavaScript allows for inserting one HTML tag into another by using the `appendChild()` method. This method

My JavaScript functions are not compliant with the HTML5 required tag

Tips for retrieving user input and displaying it on an HTML page

Instead of modifying the selected class, jQuery generates inline styles

How to verify in HTML with Angular whether a variable is undefined

Showing the outcome of a PHP function within a div container

I am looking to insert a jQuery value or variable into the plugin options

Is it possible to simultaneously center and display an iframe inline?

The React Material UI table is having trouble stretching to fill the space

Movement occurring outside the boundaries of the element

How can I make a sticky element appear behind a different element?

What is the best way to incorporate background colors into menu items?

Mixing strings with missing slashes in links

Issue with IE7 causing rollover navigation blocks to disappear when hovering over content