I'm creating an HTML/CSS site and I have the font size adjusted the way I want it when I look at the site on Firefox in Windows (which is what I'm developing on). But when I look at the site in OS X (either Safari or FF), the font size is too big. Not massively bigger, but bigger than my client wants. But if I reduce the font any more, it's going to be too small for Windows machines.

I'm specifying all font sizes in ems in my CSS doc.

I realize that different browsers and platforms render things differently, and there's no way to control exactly how the page will look. But this seems like a pretty big issue and I'm wondering if there is some simple solution that I should know about. And if not, what is the complicated solution?

Thanks in advance.

  • can we see the url? a lot depends on how you've set it up and what font stack you're using. Tony Crockford over 9 years ago
  • Sure, it's here (in progress): http://greenpenqa.com/apples/about.html johnnyb10 over 9 years ago

2 answers

3
points
This was chosen as the best answer

It looks to me like the font-stack you've chosen is the issue. Calibri is quite a small font compared to Arial and Verdana and Calibri is unlikely to be available on OS X machines.

You probably need to play around with different font stacks some more or maybe try font-size-adjust.

see:

http://www.typetester.org/

http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#propdef-font-size-adjust

For comparison, I installed Calibri on my Mac and took a screen grab of the first three fonts in your stack:

http://skitch.com/boldfish/nd9qq/typetester-compare-fonts-for-the-screen

as you can see substituting Arial when Calibri isn't available will make quite a size difference.

Answered over 9 years ago by Tony Crockford
  • Wow, thank you! Extremely helpful... johnnyb10 over 9 years ago
1
point

I assume the following is your problem:

Em is a relative measurement, and your baseline font size is probably different for each browser your testing. Try setting a default font size in px for your body and/or html declarations, so that all your relative sizes (ems) will have a consistent baseline measurement.

Answered over 9 years ago by Dwayne Anderson