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

Posted by orbit82 on Stack Overflow See other posts from Stack Overflow or by orbit82
Published on 2010-04-20T03:20:46Z Indexed on 2010/04/20 3:23 UTC
Read the original article Hit count: 366

Filed under:

fonts

|

css

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.

© Stack Overflow or respective owner

Related posts about fonts

Netbeans and LibreOffice do not recognize the new fonts in /usr/share/fonts

as seen on Ask Ubuntu - Search for 'Ask Ubuntu'
I installed some new fonts following this guide https://wiki.ubuntu.com/Fonts. Netbeans and LibreOffice do not recognize the new fonts in /usr/share/fonts and Mousepad recognizes them. Netbeans7.4(from Netbeans.com) recognizes the fonts if they are located in .fonts/ in my home folder. How can I… >>> More
Upgrading from 13.04 to 13.10 stops

as seen on Ask Ubuntu - Search for 'Ask Ubuntu'
The upgrade to 13.10 stops after a lot of error messages about texlive packages, that I could close. The upgrade goes then further, but now it is stopped. What can I do to initiate the process again? The following are the last messages from the command window.: g multiple <family> in <alias>… >>> More
How to know which fonts are used in selected part of a PDF document

as seen on Super User - Search for 'Super User'
I'm using Foxit Reader as default PDF viewer. How can I see what type of font is used for a selected part of a PDF document? >>> More
Size Mismatch Between Swing Fonts and Printable Fonts in Java

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi All, I've got a panel displaying a JTextPane backed by a StyledDocument. When I print a string of text in, say Arial 16, the text it prints is of a different size than the Arial 16 Word prints. Is there some sort of flaw in the translation of Swing fonts to Windows system fonts or something… >>> More
problem in fonts type and fonts size on printing

as seen on Stack Overflow - Search for 'Stack Overflow'
hello i have a application on php that i show a report in the table , i want to print this page i can see my page fine in print preview , but when i send thuis page to printer ,the fonts are small and diffrent fonts that i set in css file this is my css file @page { size: A4 landscape; margin-top:2cm; … >>> More

Related posts about css

HTMLUNIT Facebook javascript warning

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi I am trying to create simple application that would be able to search people on facebook using given e-mail. I am already able to log into an account using the HTMLunit tool and even create a page, which should throw result of my search. But when I try to print the result as XML the file is missing… >>> More
$this->headLink() includes duplicated script

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, Just like I did before, I used the following code for my new project. <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/button.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/inputText.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/fancyTable… >>> More
How much multiple style sheets slow down to website?

as seen on Stack Overflow - Search for 'Stack Overflow'
Here is 3 css file (one is only for IE) <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie… >>> More
mod_pagespeed is rewriting but not combining

as seen on Stack Overflow - Search for 'Stack Overflow'
I have the following problem. I installed mod_pagespeed but i am not getting the results i want! It does rewrite my css and changes the to the cache url but its not combining the css files. I have seached the web and stackoverflow for it but did not find a solution. Here are the tags <link… >>> More
CSS import or multiple CSS files

as seen on Stack Overflow - Search for 'Stack Overflow'
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. I have created a test page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional… >>> More