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

Question

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

I am trying to encode a stylesheet so that the font sizes are the same regardless of whether or not they choose Georgia versus Arial.

The problem is that when it looks good on me with a serif font, it looks too big when in sans-serif. When I then tweak it to look beautiful in a sans-serif font, it looks too small in the serial.

Is there an ideal font size and line height that works well with both serifs and serifs?

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

PS I set the base font size on the body to 12 pixels, and then set the remaining font sizes as a percentage of the base. Of course, this basic font size can be set in ems or as a percentage, because interest rates will still scale proportionally.

Answer 1

The problem you are facing is related to the different relative x-heights of different fonts, which simply repeats your original problem in technical terms: Georgia @ 12px does not match Arial @ 12px. This is due to the meaning of the font aspect.

css3 "font-size-adjust", x-height , , . @http://www.fonttester.com/help/css_property/font-size-adjust.html

, javascript:

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

, , w3 :

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

, .

Answer 2

, %. 12px 1,25 1,5 em (15 18 ). , ... . " ", , .

Answer 3

. . - , . "" .