SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Size differences between sans-serif and serif-fonts

    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.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by twyst View Post
    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.
    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!

  4. #4
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,393
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Or just make your temnplates/theme flexible enough to accomodate differing sizes?

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by bluedreamer View Post
    Or just make your temnplates/theme flexible enough to accomodate differing sizes?
    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.

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    You'll run into a similar issue with verdana vs times/times new roman. Or normal fonts vs most of the new Vista fonts : (

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah. The only way I can see to work around this issue is to:

    1. Let the site admin choose the a font stack to use for headlines, body copy and menus
    2. Let them choose a base font size for the entire site
    3. 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&#37; 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.

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.

    http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
    http://www.codestyle.org/css/font-fa...sResults.shtml
    http://www.speaking-in-styles.com/we...eb-Safe-Fonts/
    http://www.apaddedcell.com/web-fonts

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

  12. #12
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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/we...eb-Safe-Fonts/ <<< this one is awesome.

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Nothing happens on that site. Back to a padded cell (which does have vista fonts... they're all really tiny like Calibri).

  14. #14
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Really? It works perfectly for me... has a complete listing of all the web safe fonts that exist.

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

    Lawlz do I sound bitter? : )

  16. #16
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •