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

views:

answers:

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

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

+1 A:

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.

RoToRa 2010-07-23 11:00:52

Yes, I have the font-size set to 62.5% for the html element in the style sheet, but then set the font-size to 1.1em (which I believe comes out about 11px) for the body element.I understand from reading various articles online that this approach is used quite a lot so when you then specify your font-size as 'em', it's easier to understand how large that font-size will be (1.2em = 12px, 1.6em = 16px etc.).

marcusstarnes 2010-07-23 11:31:25

I don't know how these article come to that assumption. It assumes that 1em = 10px. But that's not the case. 1em is the size the user set in the browser preferences. It's probably an flawed attempt to combine a designers "need" for pixel perfection while trying to keep up the appearance of accessibility in HTML/CSS.

RoToRa 2010-07-23 11:54:47

They are indeed making an assumption that the users browser default is set to 'medium', which I believe is 16px.This is one of the articles I referred to: http://clagnut.com/blog/348/. Perhaps I shouldn't use this 62.5% approach.

marcusstarnes 2010-07-23 12:20:22

AFAIK only IE has a font size setting of "Medium". Other browsers just let the user set the size they want.

RoToRa 2010-07-23 13:10:20

OK, well at least I understand why it's happening now, thanks. I'll just have to figure out a better way of keeping scalable font sizes but also rendering them at a similar/sensible size under Safari on the Mac, so it looks 'fairly' consistant across each of these browsers.

marcusstarnes 2010-07-23 14:02:07

Unfortunately those are conflicting requirements. You can have either the fonts scalable or (more or less) consistent across browsers, but not both.

RoToRa 2010-07-23 14:13:08

I suggest you read this article about How To Sise Text In CSS. A List Apart is a very interesting site about web design and usability.

s.susini 2010-07-23 11:10:47

ansaurus

tags:

views:

answers:

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

related questions