SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    fontsize: good convention

    I have main navigation, sidebar navigation, body content. What size do you typically give for each?

  2. #2
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,214
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    body content: 1em
    main nav: 1em
    side nav: 0.937em
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    It depends on the design of course

    Web 2.0 style design for example uses large fonts.

    Just make it readable. Make the navigation stand out - usually a contrasting color is better than make the font-size really large.

    Rudy, what's with 0.937em for your sidebar?

  4. #4
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,214
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Rudy, what's with 0.937em for your sidebar?
    it's just a tiny wee smidgen bit slightly smaller than the user's preferred font size

    plus, it's a really neat number

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937 View Post
    side nav: 0.937em
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    are there any issues with using ems for font size? I'd always heard the "beware of pixels" use t-shirt sizes.

    And I typically use percents to define variations on the font-size. Isn't it circular reasoning to base the size of the font on the size a character? Probably just me being paranoid, but there it is.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chroniclemaster1 View Post
    are there any issues with using ems for font size?
    The only one I'm aware of is a bug in IE/Win that makes sub-1em font sizes microscopic. There's a simple remedy for that bug, though: define the base font size as a percentage.
    Code CSS:
    body {font-size:100%}

    Of course you may run into issues with rounding or truncating, if the em size computes to something like 12.6666667px. Some browsers may round up to 13px, others may truncate to 12px. As long as you're not using tiny text, it shouldn't be a major problem (especially since the user can resize the text).

    I often use em values (or percentages) that will yield an integer value when multiplied by 16, which is the default size in most browsers these days. For instance, 81.25% stands a good chance to compute as 13 pixels.
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Typically I use 100% in the body rule and 76% or there abouts in the main container rule.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you make the text about three quarters of the size your visitors have stated that they prefer?
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep - I'm just mean. I don't always downsize the main text - it depends on the site.

    (I do try my best to ensure that the text can be increased in size without everything going to hell).
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  11. #11
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Code:
    are there any issues with using ems for font size? I'd always heard the "beware of pixels" use t-shirt sizes.
    I recommend using em's or percentages always, but there are slight rounding differences which will make the text every so slightly different in some browsers.

    A recent site I worked on had the footer content at around .8em - Firefox on the mac displayed this a fair bit smaller than everything else.

  12. #12
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I dont mean to steal the thread, but I would like to ask a few questions of my own, on this topic.

    So as i see it, there are 3 (best?) ways of sizing fonts using css. ems, percentages and 't-shirt sizes'. A certain book im reading "Bulletproof Webdesign" recommendes using t-shirt (he usually uses small), with the IE5 fix, on the body and then percentages on the other elements.

    What is the difference between ems and percentages? (when dealing with fonts) 1 em is the current font size, while 100% is as well?

    Also why do many people use 100.01% on the body, what bug does the .01% fix?

    And why do many designers usually have less than default font-sizes on their body? I mean, if the user prefers smaller text, wouldnt they have set their text-size to small? Which means setting your site's to small as well would make it even smaller?

    thanks

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by znebojsa View Post
    What is the difference between ems and percentages? (when dealing with fonts) 1 em is the current font size, while 100% is as well?
    When dealing with font sizes the only difference is the position of the decimal point.
    When dealing with dimensions or positions, however, there is a major difference.

    Quote Originally Posted by znebojsa View Post
    Also why do many people use 100.01% on the body, what bug does the .01% fix?
    IIRC it's a workaround for a rounding bug in Opera, where 100% would give a font size one pixel smaller than the browser default.

    Quote Originally Posted by znebojsa View Post
    And why do many designers usually have less than default font-sizes on their body? I mean, if the user prefers smaller text, wouldnt they have set their text-size to small? Which means setting your site's to small as well would make it even smaller?
    Because they assume that most users haven't changed their defaults, because they think the default size is too large to be aesthetically pleasing, and because they suffer from the illusion of being in control.

    The irony is that this approach caters to those who are too lazy to learn the tools they're using, while punishing those who have special needs and adjust their browsers accordingly.
    Birnam wood is come to Dunsinane

  14. #14
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually go a little large with the text size. Everyone has their preference, but I for me readability and aesthetic attractiveness go very much hand in hand. I don't understand how you can have an aesthetically pleasing look that you can't see well enough to read comfortably. But then I'm always upping the default font size of my word processor up to 12 or 14 point font too, so maybe I'm just blind as a bat.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  15. #15
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    Because they assume that most users haven't changed their defaults, because they think the default size is too large to be aesthetically pleasing
    Isn't this true, though? I've not changed the default size (I use FF) and upon asking my flatmates (both IE users), they haven't either and didn't even consider it. How many people know it can be changed at all? In fact, I wonder how many people have even ventured into their browser's preferences.

    If designers respected the browser's default font size, I reckon people would start moaning about "too big text" because they're so used to websites where the designer has changed it to turn any size 16 text into about 12, or has just gone ahead and declared "13px" for the body (such as the BBC News site, I've just discovered).

  16. #16
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    If designers respected the browser's default font size, I reckon people would start moaning about "too big text"
    Eventually they might learn that it's up to them to say how they want their browser to behave by default. (It's not very likely, though.)

    It's a Catch-22. Designers think the default text is too large, so they set it smaller. Users won't change the default to something smaller, because then it becomes too small thanks to the designers overriding their decision. And, of course, browser vendors can't change the defaults either, for the same reason.
    Birnam wood is come to Dunsinane

  17. #17
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree Raffles. Ideally everyone would have used 100% text and we'd have the majority of people that would have reduced the text size but due to years of people using 11px or 12px, this just isn't an option now.

    In fact, I suspect that any user who does require larger font's just has their font's set a couple of sizes larger anyway and doesn't have any problems due to most sites declaring a font-size small than 100%.


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
  •