{"id":1895,"date":"2012-09-05T12:05:39","date_gmt":"2012-09-05T17:05:39","guid":{"rendered":"http:\/\/www.uv.mx\/personal\/gvera\/?p=1895"},"modified":"2012-10-02T11:51:07","modified_gmt":"2012-10-02T16:51:07","slug":"stop-fonts-looking-bold-on-mac-browsers","status":"publish","type":"post","link":"https:\/\/www.uv.mx\/personal\/gvera\/2012\/09\/05\/stop-fonts-looking-bold-on-mac-browsers\/","title":{"rendered":"Stop fonts looking bold on Mac Browsers"},"content":{"rendered":"

In recent days I came across with a particularly problem where the text looks bold on a Mac browser (Firefox, Safari, Chrome) and at the same time, looks pretty fine on Windows browsers. This behavior doesn’t seem to affect all the text, but only for some fonts and a certain sizes and backgrounds.<\/p>\n

I don\u00b4t have a Mac, so I never considered this kind of problem until some Mac user let me know and sent me a screenshot of the issue on Chrome and Firefox. The problem seems to increase over a solid background. On Windows everthing looks fine no matter the browser but on Mac, especially on Firefox, everything looks thicker.<\/p>\n

This doesn’t apply for Windows. So grab a Mac and see these examples:<\/p>\n

Gill Sans<\/h3>\n
<div style=\u00bbfont-family: Gill Sans; font-size: 1.5em;\u00bb>Hello World<\/div><\/div>\n

Looks bold on Mac
\n(Gill Sans is a Mac font. If you are using Windows, probably only see Times New Roman because Gill Sans is not a safe web font. Use it carefully).<\/p>\n

Helvetica Neue<\/h3>\n
<div style=\u00bbfont-family: Helvetica Neue; font-size: 1.5em;\u00bb>Hello World<\/div><\/div>\n

(Helvetica Neue is a Mac font. If you are using Windows, probably only see Times New Roman because Gill Sans is not a safe web font. Use it carefully).<\/p>\n

Arial<\/h3>\n
<div style=\u00bbfont-family: Gill Sans; font-size: 1.5em;\u00bb>Hello World<\/div><\/div>\n

Looks bold on Mac
\n(Arial is a web safe font. It exists on almost every plataform. You should use it).<\/p>\n

\"\"<\/a>
Example 1 Google Chrome<\/figcaption><\/figure>\n

Solution<\/h3>\n

Mac uses subpixel rendering to increase the apparent resolution of the display, which helps render crispier, sharper text. That’s why the text seems bolder, even if it is not set. So, on Safari and Chrome browsers, you can turn subpixel rendering off and instead uses the standard antialiasing technique to make fonts look smoother.
\n
\nIt is not a bug of Mac, in fact this is for a very good reason. Each pixel on the screen isn\u00b4t one little square of light, it’s is actually three stripes colored red, green and blue. Each of these subpixels can be turned to different intensities, which allows them to be used for extra detail. So instead of using all 3 simultaneously as one pixel, we use these subpixels individually to draw sharper shapes at very small sizes. That’s why at larger font sizes, everything looks quite thicker and strong (at least compared to Windows). The reality is turning subpixels off just makes text less readable at smaller sizes. The irony is that the Apple’s home web site, turns off subpixel in their own style sheet called base.css:<\/p>\n

\/******* body rule of the Apple's home web site CSS on apple.com *****\/
\nbody { font: 12px\/18px \"Lucida Grande\", \"Lucida Sans Unicode\", Helvetica, Arial, Verdana, sans-serif; background-color: transparent; color: #333; -webkit-font-smoothing: antialiased; }
\n<\/code><\/p>\n

Option one<\/h3>\n

Lets turn subpixel off then. This will not work on Firefox. Lets try this interesting property of CSS called \u00abfont-smoothing\u00bb. There are three different values we can use for it.
\n
\n-webkit-font-smoothing: none; \/* Looks very thin and awful *\/
\n-webkit-font-smoothing: subpixel-antialiased; \/* It is the default and looks bolder *\/
\n-webkit-font-smoothing: antialiased; \/* Looks pretty much the same than Windows *\/
\n<\/code><\/p>\n

Let’s try antialiased on the examples above and see what happens. This will not work on Firefox.
\nThis doesn’t apply for Windows. So grab a Mac and see these examples:<\/p>\n

Gill Sans<\/h3>\n
<div style=\u00bbfont-family: Gill Sans; font-size: 1.5em;-webkit-font-smoothing: antialiased;\u00bb>Hello World<\/div><\/div>\n

See the difference? Looks thinner on Safari and Chrome.<\/p>\n

Helvetica Neue<\/h3>\n
<div style=\u00bbfont-family: Helvetica Neue; font-size: 1.5em;-webkit-font-smoothing: antialiased;\u00bb>Hello World<\/div><\/div>\n

See the difference? Looks thinner on Safari and Chrome.<\/p>\n

Arial<\/h3>\n
<div style=\u00bbfont-family: Gill Sans; font-size: 1.5em;-webkit-font-smoothing: antialiased;\u00bb>Hello World<\/div><\/div>\n

See the difference? Looks thinner on Safari and Chrome.<\/p>\n

\"\"<\/a>
Example 2 Google Chrome<\/figcaption><\/figure>\n
\"\"<\/a>
Example 2 Mozilla Firefox<\/figcaption><\/figure>\n

Option two for Firefox<\/h3>\n

Well it seems to solve things on webkit based browser, but what about Firefox? Well, if you really have to, you can accomplish these using a standard and nice property that we use almost never on Windows: font-weight. On Windows we set two values: normal (400) and bold (>600). That’s it. But on Mac we have to specify the thickness of the font and besides, this only works with font that support weight like Gill Sans (3 weights:300, 400, 600)<\/em>, Helvetica Neue (4 weights:100,300, 400, 600)<\/em> and others. Arial, Verdana, Helvetica and others do not support other weights than 400 (normal) and 600 (bold).<\/p>\n


\nfont-weight: lighter | normal | bold | bolder; \/* standard named weights *\/
\nfont-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; \/* 400 is the same as normal, 600 is the same as bold *\/
\n<\/code><\/p>\n

Lets try it instead of the font smoothing approach. This will work on Chrome, Safari and Firefox. This doesn’t apply for Windows. So grab a Mac and see these examples:<\/p>\n

Gill Sans<\/h3>\n
<div style=\u00bbfont-family: Gill Sans; font-size: 1.5em;font-weight:200;\u00bb>Hello World<\/div><\/div>\n

See the difference? Looks thinner. Just like on Windows.<\/p>\n

Helvetica Neue (weight 200)<\/h3>\n
<div style=\u00bbfont-family: Helvetica Neue; font-size: 1.5em;font-weight:200;\u00bb>Hello World<\/div><\/div>\n

See the difference? Looks thinner. Just like on Windows.<\/p>\n

Arial<\/h3>\n
<div style=\u00bbfont-family: Gill Sans; font-size: 1.5em;font-weight:200;\u00bb>Hello World<\/div><\/div>\n

No difference. Arial does not support others weights than normal and bold<\/p>\n

\"\"<\/a>
Example 3 Mozilla Firefox<\/figcaption><\/figure>\n

We can even use a lighter weight for Helvetica Neue:<\/p>\n

Helvetica Neue (weight 100)<\/h3>\n
<div style=\u00bbfont-family: Helvetica Neue; font-size: 1.5em;font-weight:100;\u00bb>Hello World<\/div><\/div>\n

See the difference? Looks super thinner<\/em>.<\/p>\n

\"\"<\/a>
Example 4 Mozilla Firefox<\/figcaption><\/figure>\n

So there you have it. I think the right thing to do is let the browser and the platform decide what kind of rendering is the best for it. That’s the beauty of HTML, standards, right? It is almost impossible that you try that your design looks exactly the same on every device on the planet, no matter how different they could be. But, I know the reality is far from this. You stomp with situations where you have to do \u00abyour magic\u00bb, even knowing it sounds crazy. So, lets put a smile on their faces and use this work around on our developments.<\/p>\n","protected":false},"excerpt":{"rendered":"

In recent days I came across with a particularly problem where the text looks bold on a Mac browser (Firefox, Safari, Chrome) and at the same time, looks pretty fine on Windows browsers. This behavior doesn’t seem to affect all the text, but only for some fonts and a certain sizes and backgrounds. I don\u00b4t…<\/p>\n","protected":false},"author":2,"featured_media":1924,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[11,104,16,78,97],"class_list":["post-1895","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-articulos-2","tag-css","tag-diario-2","tag-html5","tag-mac"],"_links":{"self":[{"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/posts\/1895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/comments?post=1895"}],"version-history":[{"count":0,"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/posts\/1895\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/media\/1924"}],"wp:attachment":[{"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/media?parent=1895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/categories?post=1895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/tags?post=1895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}