Difference Size Font Rendering on Windows Vs Macos. How to Solve

Difference size font rendering on Windows VS MacOS. How to solve?

(This is from a comment, but I'll post as an answer.)

This is nothing on your end, and the culprit is different font rendering engines. Mac OS X tries to render fonts exactly as they were designed, whereas Windows tries to alter them slightly to make them more readable. The problem is, with certain fonts and sizes, it actually makes them look worse. (This article is a good read on the subject.)

If you make the font bigger, it will probably make it look better on Windows. I would venture to say that if you removed the bold font-weight, it would also look cleaner. You could also try a different font.

Overall though, all you can do is just play with different settings and see what looks good and what doesn't; the actual rendering is out of your control.

Font-Size between Windows and Mac OS X

There are many possible reasons:

1. Different fonts. Very few Mac fonts are identical to fonts on Windows. (It's not clear if you're expecting the Windows results to match the Mac results or just for them to be consistent on Windows.)

2. Different default sizes. Most browsers have defaults for font and size, and they may not all be the same.

3. Different interpretations of font size. When you say you want (for example) a 10-point font, it's not entirely well-defined what that means. There are true points (1/72.27 inch) but more commonly computer points (1/72 inch). Do you want the character cell height? With or without internal leading? Or did you mean the actual character height or merely the font's ascent? Different browsers may choose to interpret sizes differently.

4. Different resolutions. Browsers may handle different screen resolutions differently. Windows has a concept of a "logical inch", which is typically larger than a true inch on displays. But how much larger is customizable by the user. Some browsers may ignore the logical inch and use the actual DPI of the device (or at least what they think the DPI is--the OS may not actually know).

5. Different rendering technologies. Whether you use hinting, antialiasing, subpixel rendering (e.g., ClearType), or some combination of these can slightly affect the width of text (even if everyone agrees on the exact font and the exact vertical size).

6. Different scales. Most browsers provide a scaling feature, and it's possible that they aren't defaulting to the same value on different browsers. Also note that as you change the scale, the text width often won't scale linearly (see #5).

Any one of these issues can lead to differences in text width (which can cascade into different word wrapping choices), making pages look different from browser to browser and machine to machine. In many cases, you might have a combination of these issues thwarting consistency.

The solution is to design layouts to be flexible. Don't create implicit dependencies on font sizes by hardcoding things (like the size of a ) and expect the text to always fit. Generally, choose sizes relative to the size of the text, and be prepared for variation in the actual text size.

Font Rendering differently when using MAC vs PC

Fonts are going to render differently on any system you test it on. That is life on the web... as it should be. Websites aren't supposed to look identical... they are supposed to display in a variety of formats and ways.

Since you are using a web-safe font, I suspect the issue has to do with the difference between Microsoft's "ClearType" rendering and the anti-aliasing method on a Mac.

The best you can do is test using a service such as http://www.browsershots.org and be aware of the differences.

You may be tempted to use images for your text... don't do this.

custom font looks different (higher) on Mac OS X

http://www.fontsquirrel.com/tools/webfont-generator is one possibility.

There is a checkbox: Rendering: Fix Vertical Metrics (Normalize across browsers):

At least when the checkbox is checked or not generates different vertical metrics in generated ttf-file.

Fix Vertical Metrics not checked (when inspected in FontCreator):

Fix Vertical Metrics checked:

Downloaded kit has also ccs-file, but seems that there are not browser-specific hacks. I assume that this could be handled in font side by fixing metrics.

To check my assumption I used font from Typekit.net and compared the generated css file (Typekit fonts are base64-encoded in css) with OSX Chrome and Win Chrome and the base64-encoded font files were identical. This seems to confirm that it is possible to fix font metrics in a cross-browser way.

So I think that the accepted answer that suggests generating browser-specific css fixes is not necessary.

However I don't know how good FontSquirrel is in this normalization. If you test it, please report your findings :)

Mac vs. Windows Browser Font Height Rendering Issue

The font's ascent is too small. The Windows browsers (and Mac Safari, too, in my testing) just throw out the ascent value as incorrect, whereas Firefox and Opera on the Mac accept it.

The easiest way to fix this is with ttx, part of FontTools.

Use it like this:

% ttx bubbleboy-2.ttf
[...]
% edit bubbleboy-2.ttx

Change the ascent value to 1100 (or whatever works for you):

  <hhea>
    <tableVersion value="1.0"/>
    <ascent value="1100"/>

Then reconstitute the font:

% ttx bubbleboy-2.ttx 
Compiling "bubbleboy-2.ttx" to "bubbleboy-2#1.ttf"...
[...]

This new font should be fixed; you can check by opening it in Font Book.

If you want a more visual picture of the problem, try FontForge, though be warned its interface is rather baroque. Once you've opened the font, double-click a capital letter; you'll see a horizontal line bisecting the glyph. This is the (wrong) ascent. You can fix the ascent in Element > Font Info, then click General. Uncheck "Scale Outlines" or the ascent will be bigger but still wrong. :-)

However, to modify the font, I would recommend ttx over FontForge for small changes like this because it's less likely to destroy what it doesn't understand.

Font positioning differences in a span between Mac and Windows

elveti linked the following post (in a comment, I would accept that comment as the solution if possible): Font Rendering / Line-Height Issue on Mac/PC (outside of element) which outlines the same issue and contained the solution.

Sadly FontSquirrel was not an option as it blocks Adobe fonts. But I edited the font using FontForge as mentioned in the post by Luke: https://stackoverflow.com/a/38508202/1084239

For me none of the checkboxes were checked but the "Win ..." metrics were different than the other metrics. I copied the "Win Ascent" and "Win Descent" values into the corresponding "Typo" and "HHead" fields as my issue was that mac displayed the font incorrectly (and left all the checkboxes unchecked). After exporting the font as ttf using the default settings and ignoring any warnings, it generated a font that finally worked correctly on both mac and windows.

Font rendering differently on all OS X browsers

That's not rendered "badly", it uses an overall different font rendering strategy than Windows. OS X tends to preserve the original shape of the character better, while Windows attempts to shove characters into a pixel grid. The results look different, not "worse". And yes, you need to take this into account as part of your design.

For reference, see A Closer Look At Font Rendering, Coding Horror: What's Wrong With Apple's Font Rendering? etc.

---

Related Topics