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:

https://i.sstatic.net/dF3GJ.png

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

https://i.sstatic.net/I1w8x.png

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

Tips for maintaining accessibility to data while concealing input information

Retrieve a specific value in HTML <a> tag using JavaScript-Ajax in Django

What could be the reason for the lack of definition of the `pieceOfText

Assign the value from the list to a variable in order to execute an API call

Using Jquery and CSS to add a class with a 1-second delay when the mouse enters

Unable to view new content as window does not scroll when content fills it up

limitation in bootstrap ensures that only one collapse element is open at any

Guide on syncing Bootstrap 4 sliders using a single set of controls

To see website changes, refreshing with Ctrl + F5 is necessary in the browser

Tips for establishing a universal onkeydown listener for all frames within a webpage?

Utilizing inter-process communication in Electron to establish a global variable from the renderer process

How to eliminate arrow icons from Bootstrap Carousel

Adjust the alignment of two headers with varying sizes

Displaying background images as list items on a web page outside of

What is the best way to eliminate the gap between two columns of square containers?

Creating PDF files with PDFkit in Node.js while rendering HTML data

Looking to automatically dismiss a tooltip on mobile devices a few seconds after it's tapped

Show information from mysql in a dual-column format

Is it Necessary to Create a Separate Stylesheet for This, And if so, How Should it be Implemented? (Using PHP

Tips for keeping the DropDown Menu displayed even after moving the cursor away from the targeted element in Material-UI