Why is the font size in Safari on Mac OS so much smaller?

Question

I have a website which uses CSS for all of its styling, and in Windows, the line-spacing and font sizes are all consistant accross Firefox, Opera, IE, Safari, Chrome.

I have just tried it under Firefox on the Mac (Snow Leopard) and whilst the fonts generally look a little more bold than on windows, the general sizing looks about the same.

However, in Safari on the Mac, all of the fonts appear so much smaller, line-spacing is much tighter also.

What is the likely cause of this? Is it a known scenario, perhaps with a nice workaround?

If you would like to check the situation, the site in question is: http://www.marcusstarnes.co.uk

Thanks

Answer 1

Since you set font-size in em (a good thing - don't change that!) the font-size depends on the browser settings / user preferences. You've probably got a smaller font set on Safari.

On the other hand, if you are in the "all browsers must look a-like, or the world will end" camp, then you shouldn't be using ems.

I'm unsure about the line-height: 1 in the reset style sheet. That just seems wrong to me...

EDIT: Oh wait, I just discovered font-size:62.5%;. Doesn't change what I said, but that is uncomfortably small for many, because you are using two thirds of the users preferred size.

Answer 2

I know this is an older post, but I recently ran into the same issue. The only browser I was having trouble with was Safari on Mac. What I ended up doing to resolve the issue was change my reset from :

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

to

html { font-size: 16px; overflow-y: scroll; -webkit-text-size-adjust: 16px; -ms-text-size-adjust: 16px; }

This just forced the browsers to all use the "medium" font size and then scaled it from there. The only reason I am adding this is because there really wasn't an answer given. Hopefully this will help someone that comes across this.