Banner

Web Fonts Appearing Bolder On Mac Computers

Back to Blog Listing


Have you ever encountered a problem where the text on your Mac is appearing bolder (heavier) than it should be? If so, you have come to the right place! We may just have the answer you were looking for!

This rare and rather annoying problem appears on a mac when you have a light coloured font sitting on-top of a darker coloured background. The reason behind this is a little mysterious, relating to the OSX quartz system that is used to render text on a mac. This only appears to affect those rare situations where the text and background have differing contrasts, such as light text on dark backgrounds. We stumbled across this problem on our website when creating the tiles located on our home and hub pages. In our case, we have multiple coloured boxes which have white text on top differing background colours such as purple, pink and blue. We found that these displayed correctly on PCs in all browsers, but didn’t look great for Mac users. When taking a closer look, we noticed that each background colour displayed the fonts in different weights, but were defined the same in our main style-sheet – eek!

Mac Bold Fonts

After much research, we came across a solution which fixed our problem. In order to resolve this issue, you are required to update your web-site style sheet with a few additional values. If you don’t know much about CSS then the next step may be a little out of your depth. In our example, our headings are the problem. We therefore created a new class called .heading in our style-sheet, which was to be used to add the below styles into.

.heading {
     opacity:0.99;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}

So what’s going on here? What are these styles actually doing? Well to cut a long story short, you don’t really need to worry about the ins and outs of what each line is doing. In truth it’s one of these mystery problems which should be resolved at browser level, not by a web-developer. Browsers work in mysterious ways, and by shifting the opacity 1% from 100% to 0.99% and amending some font-smoothing settings, we can resolve the problem! I’m not guaranteeing this will work for everyone, but it certainly did fix our issue.

Let us know if this has helped you fix your problem.


19 Nov 2013

About the Author

James CTwo is our blogging alter ego for the Dynamics CRM and Web experts here at C2. We have a passion for anything CRM, Web Design or Social Media. We love writing about it! Find us on YouTube & Twitter.

comments powered by Disqus

Our White Papers

Discover the content that matters to you on business transformation. Explore how you can drive customer engagement, empower your team, optimise your businesses and revolutionise your products with the next digital revolution. For more information visit our white paper library.

Library

C2 Newsletter

Our newsletter is sent on a quarterly basis, offering detailed insights into all aspects of business transformation with Microsoft cloud technologies. We also promote upcoming events and special offers throughout the year. Sign up to get involved today.

Dynamics 365 Office 365 Power BI Silver Partner