SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Thread: Font Size CSS

  1. #1
    SitePoint Member
    Join Date
    May 2003
    Location
    Fontana, Ca
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Font Size CSS

    I am a beginer utilzing CSS in my site and am trying to learn as much as possible, however most tutorials and sites tell you what syntax to enter (and the variations thereof) but don't tell you why.

    My question is I see several ways of defining font size;

    h2 {font-size: 130%} or using the small / xx-small etc.

    Are these the two ways to do it? I am guessing there are more, and you don't have to take the time to baffle me with the amount that are out there.

    My questions are simple, which one to use? And why? Also, when you list it as percentage {font-size: 130%} what is it 130% of? Compared to the normal state of h2? I would just like to be more knowedgable about what I am doing rather than copy/pasting syntax into a site from a tutorail or editor.

    Many thanks.

  2. #2
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Give this a read: http://thenoodleincident.com/tutoria...ont/index.html

    Then the conclusions from the above: http://www.thenoodleincident.com/tut...phy/index.html

    And that should help a bit.

    100% = the size of the base font (so the user defined base font. If you care about NN4 which you probably shouldn't, NN4 is (not really surprisingly) buggy here)

    Regards,
    Douglas
    Hello World

  3. #3
    SitePoint Enthusiast Debs's Avatar
    Join Date
    Aug 2003
    Location
    new york
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I noticed in some style sheets that font size is listed like this:

    font: 12px/16px arial, helvetica, verdana, sans-serif;

    What would be the reason for the 12px/16px? Is it a good model to use?

  4. #4
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That just sets line-height and font-size at the same time.

    With pixels, nearly all browsers will render the font at that size (in pixels).

    There are two problems with it:
    No central font-size control
    No ability for IE/Win users to resize the fonts.

    Avoid pixel font sizes if you care about accessibility (while IE is the number one browser).

    Douglas

    Edit:

    FontSize
    Last edited by DougBTX; Sep 5, 2003 at 01:40.
    Hello World

  5. #5
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I recently invested some time into looking into font sizes I discovered the following:
    • In order to maintain accessability you should really allow the user to change the font size if they want to using there broswer options. This means using a proportional font size (i.e. not px, pt, pc, mm, cm, in)
      Off Topic:

      Douglas is IE really the only browser that doesn't scale these, I thought they all didn't
    • Uing xx-small, x-small etc is problematic because IE5.x displays fonts secified that way 1 size smaller than everyone else (i.e. medium on IE5.x appears at the same size as small everywhere else)
    • That leaves em, ex and percent. For some reason no-one really sugests using ex (and anyway they appear to equivelent to em/2) and in my experience (which is limited) em operates in a more standard way across the different broswers (IE, NN, Opera) so I use em rather than percent.
    • For some reason (that I hope Douglas will explain to use) people seem to saying that setting font-size: 100% on you body tag increases reliabilty/standardisation of font sizing even though it should be the equivelent of saying display the font at the size you where going to display it at anyway

  6. #6
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BenANFA
    I recently invested some time into looking into font sizes I discovered the following:
    And you didn't find out that only IE doesn't let you size pixels

    Well, Mozilla will let you size anything, and Opera will size everything (including images, background images, widths of divs, everything).

    IE has bugs with ems, but not with percents (Funny thing: if you set font-size: 200% in IE3, it will set the font-size to 200px ). Setting font-size in percents on the body tag should stop IE going into micro-font mode.

    This is what I use:

    Code:
    body { font-size: 80% }
    h1 { font-size: 1.3em; }
    p { font-size: 1em; }
    Another advantage of this, is if you want to make all the fonts in your site bigger, you just have to change the body line

    Douglas

    Hello World

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Seattle
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using ems is dangerous, too, however. As Zeldman points out, "Unfortunately, the browsers make this impossible for the time being. Netscape 4 ignores em and ex units. IE3 treats em units as pixels. Thus, 2em is mis-translated as 2 pixels tall. Let us repeat that. Two freakin' pixels tall. It takes a village to raise a child and it takes at least 9 pixels to render a font. Length units are therefore not recommended. What is recommended? Pixels, baby. Or nothing."

  8. #8
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you telling me that you design for IE3?

    If so, I have nothing more to say about it.

    Douglas
    Hello World

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Seattle
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, but obviously Zeldman does. And Netscape 4, which also ignores ems. I realize that it is a continuum, and one has to decide where to start and stop for their given project...I just wanted to make it known that those people out there still using Netscape 4 (usually because their employer forces them to) will not get the intended effect from your CSS if you're using ems...

  10. #10
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The flip side is that on his site, he uses pixels, but hides his style sheet from IE3 and NN4.

    Douglas
    Hello World

  11. #11
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Indicator
    I just wanted to make it known that those people out there still using Netscape 4 (usually because their employer forces them to) will not get the intended effect from your CSS if you're using ems...
    I'd be surprised if people using Netscape 4 expect whiz-bang stuff from HTML and CSS. If you're using a 6-year-old browser when the normal lifecycle for software is 3-5 years, you know you're obsolete and shouldn't expect all the wonders of the modern Web.

  12. #12
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    I'd be surprised if people using Netscape 4 expect whiz-bang stuff from HTML and CSS.
    Unfortunately from other lists I learn that many people forced to use Netscape 4 are doing so because many associated applications were built using NS4 (especially in some US universities) and the on-cost of recoding those applications into something else is prohibitive. However they will be forced into doing something soon, I think, because of the demise of NS as a browser, although support will be ongoing, but for how long?

    Quote Originally Posted by vgarcia
    If you're using a 6-year-old browser when the normal lifecycle for software is 3-5 years, you know you're obsolete and shouldn't expect all the wonders of the modern Web.
    And as far as I see it, web browsing for the people mentioned above takes second place to the applications. It really is a no-win, no-win situation that people and institutions who have committed resources into developing applications to have the basis of their development withdrawn. And with no possible upgrade path.
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  13. #13
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Seattle
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that info, John. The question for me isn't really, "What are my users expecting?", but rather, "What experience do I want to give my users?". Regardless of browser and browser age, I want them to have a good experience so I'm going to work toward that, keeping in mind that I simply cannot do some things for the older browsers that I can for the new. Currently, I haven't hidden my style sheet from older browsers using @import, though I intend on doing that very soon. Thanks for the interesting discussion, all. I think I may research the scalable font sizes a bit more, as it seems that this is the only truly accessible way to go with conformant browsers. Doug, do you hide your style sheet from the browsers that get ems and percentages wrong?

  14. #14
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tend to put basic text things in my non-hidden style sheet (hidden begin behind an @import in a linked CSS file).

    For NN4 users, I don't see it as a problem if they use default fonts.

    I don't tihnk I've ever had an IE3 visitor so... it isn't really an issue. IE4 is around 0.3% usage at the moment or something like that, I'm sure IE3 usage is lower.

    I would favour my IE5/6 audience over my NN4 audience.

    Douglas
    Hello World

  15. #15
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Seattle
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've notice that Doug at www.stopdesign.com uses the @import technique within a linked stylesheet as well...I think that's the route I'll go. And I definitely favor IE5 and 6 visitors over NN4, but I still want NN4 folks to stick around and not run away screaming. ;-)


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
  •