CSS - how can I handle the size difference between serif and sans-serif fonts?

Question

I'm working on a WordPress that will allow the site administrator to switch between sans-serif and serif fonts.

I'm trying to code the stylesheet in such a way that the font sizes are similar whether or not they choose Georgia vs Arial.

The problem is that when I have it looking nice with a serif font, it looks WAY too big when in sans-serif. When I then adjust it to look nice in a sans-serif font, it looks WAY too small in serif.

Is there an ideal font size and line-height that works well with both serif and sans-serif?

Or do I need to make separate stylesheets (a serf version and a sans-serif version)?

P.S. I've set a base font size on the body at 12px, and then set the rest of the font sizes as a percentage of the base. Of course, this base font size could be set in ems or in percent, because the percentages will still scale proportionally.

Answer 1

Well first I would use em unless you have a compelling reason to use %. Also at a 12px base font size I like to set my line height to 1.25 or 1.5 em (15 or 18 px). Then you need to find a serif font that approximates the spacing of the sans serif... or vice versa. If you research "font stacks" you can find some good information on what fonts are good to use together.

Answer 2

The issue you're running into is related to the different relative x-height of different fonts, which is just repeating your original issue in technical terms: Georgia @ 12px does not equal Arial @ 12px. This is due to the fonts' aspect value.

There is a css3 property "font-size-adjust" which will in theory equalize the x-height of all fonts to the one you specify, but I'm not sure if it's widely supported, or supported at all. You can read about it @ http://www.fonttester.com/help/css_property/font-size-adjust.html

You can check out this page, which has a javascript solution:

http://www.brunildo.org/test/xheight.pl

And finally, the w3 documentation for your issue:

http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro

hope some of that helps.

Answer 3

Thanks for both of your answers. Very helpful information here. I learned some things about font stacks and relative sizes that I didn't know before. I'm going to offer users the ability to change their font sizes and "tweak" them to match their liking.