Mac Font Size Couple Pixels smaller than PC?

Never come across this at all.

For some reason a site on Mac (safari/ff etc) the P tag body copy is clearly a couple of sizes smaller than on a PC…

Site in question…

The usual CSS start…

body{font-size:62.5%; font-family:Georgia,Times,"Times New Roman",serif}

Yet the main navigation is obviously the same.

WTF?? :shifty:

Any ideas?

Many thanks for any help :slight_smile:

Different Operating System can have different default dpi setting for the the text, usually Windows is 96 dpi and Mac 72 dpi. Obviously the user can change them but nonetheless that might be what you are experiencing (just going by the image).

That’s true. You could also try it out on different PCs and get different results. Font size varies between different operating systems, screen setups and browsers, and you can’t rely on it being a precise pixel size.

I had the same issue a few weeks back and it turned out in my case that for some reason the problem was 62,5% georgia. When I switched to 100% and then set the fonts for <p> etc smaller so the end result was the same the difference was gone. I haven’t done any more tests, so I don’t have details / explanation, sorry.

  1. starting out at the uselessly small 62.5% is probably nothing but headaches… the only reason to use it is the myth that said setting equals 10px, which is 100% unadulterated horse manure. That small a setting is probably hitting up against the minimum font-size restrictions in Opera… much less the problems it can cause on handhelds. (combined with a serif font – that’s got to be an illegible mess)

  2. not all fonts are available on all systems, or appear at the same size even when called at the same size. Your font family list is a bit confusing in it’s order too… but you’re calling multiple different fonts, so when one isn’t available the next is used – and each of those can be a different size.

  3. different font renderers can render the same font file differently… and since winblows, linsux and quack all use different font rendering engines…

  4. xhtmlcoder mentioned the font metric – BROWSERS on the mac also assume 96dpi so he’s wrong on that (in fact Mac browsers ignore the 72dpi system metric)… but windows machines can vary from 75dpi right up to over 1200dpi if the user so chooses, and some browsers (IE and Opera) will obey that. (while FF/Chrome you have to change the default size by hand).

Bottom line, if you are relying on the idea of the font always looking the same or coming out the same size cross-browser, you’ve already failed to grasp that the web is not print.

Which said site kind-of screams. It’s got problems top to bottom from illegibly small serif fonts, to color contrasts of text below accessibility norms (the grey on white being effectively invisible to most users), fixed widht layout that isn’t 1024 friendly, and that’s before we talk the nonsensical heading orders, classes for nothing, absolute URL’s for nothing, endless javascript for christmas only knows what, ENDLESS IE conditionals on a page so simple it shouldn’t need any, P+STRONG doing heading tag’s job, use of HTML 5 when it’s not ready for use on production websites no matter what some whackjobs out there will try to tell you, etc, etc, etc…

… and that’s before talking the rubbish markup turdpress has saddled you with – explaining how you have 16.5k of markup for 3.8k of content… meaning around 6.5 to 9k of useless bloat to top off it being an accessibility train wreck.

Err thanks for input guys :injured:

The design is not mine, the use of JS is not mine, the use of strong elements etc is not mine its for ease of use of client editing content.

Apple seem to do fine using HTML5, crackpots that they are.