HTML & 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.
You need to pick fonts that are roughly the same size so that the appearance doesn't change too dramatically when you switch between fonts. This isn't a serif vs sans-serif issue, you have just picked one ont that is relatively small compared to the other when at the same font size.
It is nothing to do with "serif vs sans serif", and everything to do with "Georgia vs Arial". Some serif fonts are larger than others, some sans serif fonts are smaller than others.
If you enlarge Georgia and Arial, you'll find that:
- capital letters are the same height
- lower case letters are fractionally taller in Arial
- ascenders rise slightly higher in Georgia
You've got several options:
- Find a pair of serif and sans-serif fonts that look similar sizes
- Tweak the default size slightly to see if you can get the fonts to look the same (it might be that rounding errors will affect one font differently to another)
- Have the font switcher change the text size as well as the font face to maintain a similar overall size
- Or just live with it!
Or just make your temnplates/theme flexible enough to accomodate differing sizes?
Thanks for your answers! I think I'm going to allow users to adjust the font size (in relation to the base font size) so that they can tweak it their liking. This way, if they need it slightly smaller or slightly larger, they can do so on a font-by-font basis.
That's true, and an essential part of web design, but the way I see it, the OP is asking a valid question - if people switch between fonts, without ostensibly changing the font size or zoom level, you wouldn't expect the font to appear to change size dramatically - that should only happen if the user changes the font size or zoom level.
You'll run into a similar issue with verdana vs times/times new roman. Or normal fonts vs most of the new Vista fonts : (
Yeah. The only way I can see to work around this issue is to:
- Let the site admin choose the a font stack to use for headlines, body copy and menus
- Let them choose a base font size for the entire site
- Let them tweak the font sizes of various elements by knocking their size up or down a percentage. E.g. default body copy is set at 108% of the base font size. if they choose 12px Arial as base font, the body copy may look too large So they can kick that copy down a few percentage points. Possible choices: 100% (base font), 105%, 108%, 110%, etc. Or I may just have them enter a number.
What needs to be done is to place fonts in the font stack which are similarly sized rather than including fonts that appear to be different sizes when displayed at the same size.
You might find Verdana a closer match in size to Georgia than Arial is since it too has slightly larger lower case letters.
And that's where the websites that list websafe font's come in, most of them have previews so you can examine the font as it would appear and then pick typefaces which closely match your own typefaces in scale and spacing. The below websites all give you "visuals" of the fonts anatomy as it will appear.
I'll give plusses to Alex' last link, a padded cell. I use it to visually check out fonts. With verdana I usually add bitstream vera sans and dejavu sans because they're all a bit on the heavier side. Lawlz, big-boned fonts.
The problem with A Padded Cell is they haven't upgraded the list to account for Vista / Windows7 as those typefaces are now in heavy distribution and worthy of consideration. Though I've got some other useful typography (websafe) font stacking links which may be useful.
http://www.speaking-in-styles.com/web-typography/Web-Safe-Fonts/ <<< this one is awesome.
Nothing happens on that site. Back to a padded cell (which does have vista fonts... they're all really tiny like Calibri).
Really? It works perfectly for me... has a complete listing of all the web safe fonts that exist.
Lawlz do I sound bitter? : )
No you don't - but the owner of that site certainly sounds ignorant or stupid (depending on whether they deliberately broke their own site's functionality or not).