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
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.
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.
Since I have a mostly blank white page, they appear to have decided their information should only be available to those with Javascript. Since they didn’t bother to learn how to use a server, I wonder about their dedication to showing all web-safe fonts as well… I seriously don’t care for laziness on the part of a web designer. Me, I’m going to stick to sites who can give me content normally.
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).
