Georgia size is WAY different on Mac & PC

Safari 5, MacBook Air, OS X 10.6.3

Safari 5, MacBook Air, OS X 10.6.3

Knowing you can't control (only detect) the end user's screen resolution nor how their browser scales:

Pixel (.px) sized fonts offer reliable control and consistent scaling. An 11px font size will always retain the same relative scale to a 16px font when displayed on the same device and active resolution. The em unit scales consistently as well and has the added advantage of allowing the end-user to adjust the text size through settings available on a particular user agent.

The W3C favors the EM unit because of said advantage, especially when accessibility is concerned. Doing so means set a base font size (parent) and set everything else (children) relative to that.

Developers who want to minimize scaling use PX instead, just remember what you can't control - and there is no fix or special coding to make all displays render font size equally 100% of the time.

-jim

Yup, and there is nothing you can do about it. Fonts are wider in IE. Welcome to the world of web design.

LeeTom said:

I am bumping this to see if anyone out there with Parallels (in coherence) or VMWare (in unity) on their Mac would be willing to load the link above and compare in two windows: a Mac browser and a PC browser.

Georgia, especially in 13px and 15px is MUCH wider on a PC, and I'd like someone to verify this.

The above link simply shows Georgia from 36px down to 9px, and the font width is driving me crazy.

Thanks.

Click to expand...

I don't think you're really paying attention here. We know it's wider. We're telling you there's nothing you can do about it. Either use a different font (which may have it's own issues) or design your site so it doesn't break if the font happens to render a bit wider (the best way to go).

jW

Because the font wasn't designed particularly well?

Not significantly different for me

Hi, LeeTom. I compared the latest Firefox on OS X 10.6 against the latest IE on Windows XP under Parallels, and while Georgia is a bit wider on Windows, I'm not seeing the "MUCH wider" thing you are. Screenshots below.

I went into Font Book and I see I actually have two copies of Georgia installed. The one I believe is the active one is copyrighted 2006 and is in /Library/Fonts. I also have one in /Library/Fonts/Microsoft copyrighted 1996, but eyeballing their previews, the widths don't look very different (if at all).

BTW, I assume your avatar is not a photo of you?

LeeTom said:

I suspect it has to do with Windows or Mac OS X's version of font aliasing being slightly different. What a pain!

Click to expand...

yes, I think the "jankiness" you are describing is directly attributable to the very different font rendering philosophies of the two operating systems.

Apple generally believes that the goal of the type rendering algorithm should be to preserve the design of the typeface as much as possible, even at the cost of a little bit of blurriness.

Microsoft generally believes that the shape of each letter should be hammered into pixel boundaries to prevent blur and improve readability, even at the cost of not being true to the typeface.

Of course, which rendering engine you prefer is dependent on which one you look at the most... PC users find the thin, tight aliasing on Windows better... Mac folks like the fuzzy, darker letters better. Scientifically, the Windows rendering engine is probably better for onscreen reading... but the simple answer is that we read best what we read most. I prefer the MacOs system.

My guess why Georgia is having this problem and not the other fonts?

Laird Knox said:

Because the font wasn't designed particularly well?

Click to expand...

Actually, its the opposite. Georgia was designed by Matthew Carter and hinted by Tom Rickner... two of the best in the business. The font was designed for clarity on a computer monitor at small sizes and is excessively hinted -- far more than most typefaces. Hinting is data built into the typeface that helps define how to transform the curves of the letters into the screen's square pixels at small sizes. Its a very tedious process.

Because there is more information about how the font should draw itself at different sizes, you see more variation from size to size...

lucidmedia said:

My guess why Georgia is having this problem and not the other fonts?



... Georgia was designed by Matthew Carter and hinted by Tom Rickner... two of the best in the business. The font was designed for clarity on a computer monitor at small sizes and is excessively hinted -- far more than most typefaces. Hinting is data built into the typeface that helps define how to transform the curves of the letters into the screen's square pixels at small sizes. Its a very tedious process.

Because there is more information about how the font should draw itself at different sizes, you see more variation from size to size...

Click to expand...

I've come across similar issues in the past, but never really bothered questioning why. That's actually rather interesting — thanks for sharing!

/Doug

LeeTom said:

You can see the problem clearly in the two images in your post, without even enlarging them. Look at how linearly the Mac side flows from 16px down to 9px. Then look at how jankily the Windows side flows.

Click to expand...

Ah. Yes, I saw those relatively minor differences between the platforms, but didn't think that was what you were talking about, since cross-browser and cross-OS rendering differences of that scale are common. It sounded like you were talking about an order of magnitude difference or something just for the Georgia font. Anyhow, glad I was able to at least validate your finding.