SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 71
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Relative font sizes?

    Hi,

    I've heard about them, but what is the best way to include relative font sizes in a web site? Is it right the default font should be 76% for the p tag?
    I just need it so when the text resize is used on the browser, the site will change gracefully.

    Does this mean I need to also look at my width/height values in my CSS for <div> elements?

    I've seen the following:
    HTML Code:
    h1 { font-size: 160%; }
    h2 { font-size: 140%; }
    h3 { font-size: 120%; }
    h4 { font-size: 100%; }
    h5 { font-size: 85%; }
    p, ul, ol, td { font-size: 85%; }
    
    ul ul { font-size: 100%; }
    td p { font-size: 100%; }
    
    body { font-size: 80%; } 
    used previously, but don't want to mess up my layout


    Thanks for any advice.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I reset everything in one fell swoop while paying no attention to what an "ideal" font size should be since the user will have ultimate control over that anyway.

    What I tend to do is set the font size to 85&#37; and then the leading (line-height) to 1.5 so that the fonts can scale nicely - and if using an elastic layout, the containers as well (when sized using EM).

    I'll also set the heading sizes to 1em as well. Here's a rough example...

    Code CSS:
    body {
    	background: #FFF;
    	color: #000;
    	font: 85%/1.5 verdana, arial, helvetica, sans-serif;
    }
     
    h1, h2, h3, h4, h5, h6 {
    	font: bold 1em/1.5 georgia, garamond, "times new roman", times, serif;
    }

    From there, I can declare what I need to be larger or smaller by targeting a specific selector within a particular element or attribute (classes or IDs).

    Don't get fooled into thinking that 62.5% = 10px because it doesn't. Not only do certain browsers actually obey the system metric (the operating system), such as Internet Explorer and Opera, but others also use 16px as a default no matter what (Gecko browsers such as Firefox), and then to make matters worse you have Safari, which IIRC uses 14px (or thereabouts) as well.

    And then if that wasn't bad enough you also have some people who have their .dpi settings set to "large" (100 .dpi on Linux, or 120 .dpi on Windows) rather than "normal" (75 .dpi on Linux, or 96 .dpi on Windows), which results in the fonts being approximately 25% larger (this can be simulated in Firefox by increasing the text two sizes by using the control button and mouse wheel).

    Just remember that when you use the example code above (should you decide to use it), that you're setting the font size to be 85% of whatever the user's browser has it set to, and the line-height will be 1 1/2 times that (to allow for sufficient white space between lines of text), and that EM measurements (such as the headings) will be set to that baseline - in this case the 1em of the headings will be the same size as regular body text, but can be over-ridden individually on an as-needed basis.

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using one relative font size for body and another for paragraphs, lists, tables, etc. is not a good idea. The issues of nesting elements will cause a nightmare and result in unnecesssarily bloated CSS.

    Instead, set the desired font size on body and be done with it.

    Forget the silly stuff about 'converting ems to pixels', because that's a fallacy. It's like comparing apples to oranges. Think in ems instead of pixels and everything becomes much easier.
    Birnam wood is come to Dunsinane

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I use this method that sets all browsers to have a 13px font size by default.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    body{    font-size: 13px}
    </style>
    <!--[if IE ]>
    <style type="text/css">
    /* IE CSS Document */
    body {font-size:x-small;f\ont-size:small}/*ie5 and 5.5. that are one size out*/
    body table{font-size:x-small;f\ont-size:small}
    </style>
    <![endif]-->
    </head>
    <body>
    </body>
    </html>
    This assumes the user hasn't changed the browser settings to ignore fonts or use their own definitions etc.

    By setting the font-size in the body to 13px you sidestep the issue of what the default font size setting is because if you said 75&#37; then that would only be 75% of the default which may vary between browsers.

    To get over the fact that IE won't scale font sizes the keywords are used as a base instead which will allow scaling and the keywords chosen will equate to 13px also.

    From then on in the inernal elements in your page you can increase/decrease the font sizes using percentages by what ever percentage you need and the relationship will be stable. There is a chart on the yahoo font page that tells you roughly what percentages to use to effect pixel changes.

    Be careful when setting font-sizes on elements that are nested because the relative size will compound. If you had a nested list where the parent was set to 85% the a nested ul would be set to be 85% smaller than its parent and so on. Compounding is an issue you will need to understand in order to avoid or correct it.

    In nested lists you could do this.
    Code:
    ul{font-size:85%}
    ul ul{font-size:100%}
    Of course you will need to make sure that the elements that hold your text content can grow also. This doesn't always mean sizing then in ems as well although if you did the scaling would be much better. Just make sure that if elements have a height and contain text then set a min-height instead (or no height at all) and then they can grow with the text even if they may look a little odd at times.

    Remember that ultimately the user has control so all we can really strive for is a best fit type of scenario.

    Here's a very old em demo:

    http://www.pmob.co.uk/temp/emdemo.htm

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    lol - three different opinions to choose from

  6. #6
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Depending on the site, I usually set my body font size to 0.75 or 0.8em, and then go from there. Headings slightly larger, footers slightly smaller. And that's really all you have to worry about.

  7. #7
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haha no kidding. Many thanks for such a positive and speedy set of replies.
    I'm off to try implement one of them, and hopefully it'll work out ok

    Thanks again!

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, and Paul, I think I can trump your old EM demo with this: http://www.dan-schulz.com/temp/4columnlayout/

  9. #9
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Instead, set the desired font size on body and be done with it.
    So if I went with:
    HTML Code:
    body {
    font : 75% arial, sans-serif;
    }
    I wouldn't have to declare font sizes in the rest of my CSS ?

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want the font sizes to all be the same size (75&#37; of whatever the browser says the default font size), yes. I do the same thing with my reset example above, as you can see in the link I provided a couple posts up.

  11. #11
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aaa yes, this one I see that, looks great. I think I'll try something similar for mine, or perhaps even try using the first example I put up and see what happens
    Thanks.
    I'll be back

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by karpie
    I usually set my body font size to 0.75 or 0.8em
    That will incur an incorrect scaling bug in IE and you should use 75&#37; or 80% instead.

    I wouldn't have to declare font sizes in the rest of my CSS ?
    So all the text is going to be the same size everywhere. Seems unlikely to me. However, that is no different to all the other methods above in that respect as they all set the font size for the body. My method is the only one that you can guarantee (as much as you can guarantee these things) will set text at 13px though

    Quote Originally Posted by dan
    Oh, and Paul, I think I can trump your old EM demo with this: http://www.dan-schulz.com/temp/4columnlayout/
    Looks good Dan

    The only comment I would make is that my demo scales the whole layout so that it is still the same uniform layout but only bigger/smaller. I'm not saying that it's any better and may indeed be worse if you don't like sideways scrolling but just a different approach. Your method is good for keeping the content on the same viewport and saves that sideways scroll effect although it may change the look of the layout a little.

  13. #13
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well you know me, I like adaptive layouts and HATE horizontal scrolling, though that's the Opera user in me talking.

  14. #14
    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 invision2 View Post
    So if I went with:
    HTML Code:
    body {
    font : 75&#37; arial, sans-serif;
    }
    I wouldn't have to declare font sizes in the rest of my CSS ?
    Not if you want all normal text to be 75% of what the user prefers and accept that the font sizes of headings are a browser-dependent factor multiplied by that. You'll usually end up with a 12px base font, which may be a bit small for a hi-res monitor. It depends on your target audience, though.

    Me, I'll often set the base font size (on html or body) to 81.25%. That will make it 13px in most contemporary browsers, unless the user has changed his/her settings. Paul's method is another way, although it doesn't respect user preferences quite as much. Of course, the only real way to do that would be to use 100%, but most users don't change the defaults and 16px is too large for comfort with most fonts.

    I'll also specify the font sizes for headings, since the browser defaults aren't very aesthetically pleasing. For those I'll use percentages or ems, i.e., make them relative to the base font size to preserve the proportions if the user changes the text size.

    I use em for the dimensions of all containers, as well as for most paddings and margins. That also helps preserve proportions.

    Setting the base font size as a percentage has the added benefit of fixing an IE bug that otherwise makes sub-one-em font sizes microscopic. I don't know if Paul's way does that, too, or if he simply avoids using sub-one-ems.
    Birnam wood is come to Dunsinane

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Tommy
    IE bug that otherwise makes sub-one-em font sizes microscopic. I don't know if Paul's way does that, too, or if he simply avoids using sub-one-ems.
    The keyword method avoids this bug also.

    Paul's method is another way, although it doesn't respect user preferences quite as much
    Yes agreed - although we are all doing that in some respects if we reduce the size via the body element.

  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 Paul O'B View Post
    The keyword method avoids this bug also.
    Good to know. Thanks, Paul!

    Quote Originally Posted by Paul O'B View Post
    Yes agreed - although we are all doing that in some respects if we reduce the size via the body element.
    Absolutely. I meant to write that, too, but I guess it didn't come out very explicitly.
    Birnam wood is come to Dunsinane

  17. #17
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hi Guys,

    I see that none of you guys do it this way so I thought I'd add my two cents in order to give another opinion. This is the way I do it - the 62.5% way. It's clean and easy to understand - that's why I use this method.

    The fact remains that you have to give the base font size a percent value or key words to prevent the IE bug. So if that's the case, then why not give it a 62.5% instead of 75% or 81.25% in order to make things a little easier. But that's just me - everyones brain works differently. Which ever method is the easiest for "you" to wrap your brain around is the one that you should use. All the methods explained here in this thread are solid.

    body {
    height: 100%; /* helps make height 100% */
    font: 62.5%/1.5 Tahoma, Arial, Helvetica, sans-serif; /* 62.5% makes font-size 1em = 10px, 1.2em = 12px, etc */
    background-color: #FDFDFD;
    color: #333;
    }
    /* ------------------ Typography ------------------- */
    h1, h2, h3, h4, h5, h6, p, pre, blockquote, address {
    margin: 0 0 1em;
    }
    h1 {
    font-size: 2.2em;
    }
    h2 {
    font-size: 2em;
    }
    h3 {
    font-size: 1.8em;
    }
    h4 {
    font-size: 1.6em;
    }
    h5 {
    font-size: 1.4em;
    }
    h6 {
    font-size: 1.2em;
    }
    p, ul {
    font-size: 1.2em;
    }
    ul {
    margin: 0 0 1em 25px;
    list-style: none;
    }
    ul ul { /* fixes nested lists */
    font-size: 100%;
    font-weight: normal;
    }
    Last edited by PicnicTutorials; Aug 13, 2008 at 17:16.

  18. #18
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have taken the time and trouble to set the default font size in my browser at 20 pixels, which is what my ageing eyes need to see print clearly on an LCD monitor. Now you decide that when I visit your site that my preferences don't matter, and that you are going to present me with text that is smaller than optimum for my eyesite. So I have to do extra work to enlarge the fonts when I visit your page.

    Ever consider that I might not bother with the extra work and just go away to some site where they treat my preferences with more respect in the first place?

    Do you just not want money or business from older folks, is that your plan?
    Ed Seedhouse

  19. #19
    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 ewwatson View Post
    The fact remains that you have to give the base font size a percent value or key words to prevent the IE bug. So if that's the case, then why not give it a 62.5% instead of 75% or 81.25% in order to make things a little easier.
    Because 62.5% is likely to be 10px for many users, which is way too small to read unless you've got the eye-sight of an eagle or run a 21" monitor at 800600.

    You then need to increase the font size for all elements, which causes lots of trouble when nesting elements. Why bother with that when you can set a more legible size from the start?

    There is no reason whatsoever to set the base font size as small as 62.5%, since the notion that this will equal 10px is utterly false. Ed's reply above is a prime example of that. He'll get 12px or 13px, and if you've relied on the belief that 1em=10px the layout will fall apart.

    Quote Originally Posted by Ed Seedhouse View Post
    I have taken the time and trouble to set the default font size in my browser at 20 pixels, which is what my ageing eyes need to see print clearly on an LCD monitor.
    I've got a question for you, Ed: Did you set the size to 20px because you need it to be 20px, or because that gives you a good size on pages that set the font to 75%–80%?
    Birnam wood is come to Dunsinane

  20. #20
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Ed, I think you may have overlooked some important statements throughout this thread.
    Of course you will need to make sure that the elements that hold your text content can grow also. This doesn't always mean sizing then in ems as well although if you did the scaling would be much better. Just make sure that if elements have a height and contain text then set a min-height instead (or no height at all) and then they can grow with the text even if they may look a little odd at times.

    Remember that ultimately the user has control so all we can really strive for is a best fit type of scenario.
    As Paul has stated, and as most people are aware of, is that at the end of the day the user is still the one that is in total control of text size.

    With all of the methods described above it is just an effort to create a layout that will hold together and look decent through various font size changes on the users end.

    I have taken the time and trouble to set the default font size in my browser at 20 pixels
    I guarantee you it takes a lot more time and trouble to develop a website that is accessible to all people and there have already been two examples posted so far. With most modern browsers supporting zoom features now there is no one with eyesight that has been left out. Those using FireFox can just press the Ctrl key and scroll the mouse to increase font size.

    In my opinion Elastic layouts are the most user friendly as the whole site scales with font changes.

  21. #21
    SitePoint Addict
    Join Date
    Jan 2008
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i just use YUI css

    saves alot of hassle

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ionix5891
    i just use YUI css
    The method I use is very similar to the YUI font reset except mine validates

  23. #23
    SitePoint Addict
    Join Date
    Jan 2008
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The method I use is very similar to the YUI font reset except mine validates
    hmm interesting never knew there were css validators


    anyways my main reason for YUI :
    * i heavily use their library thruout my sites
    * dont have issues with it in major browsers
    * saves me alot of time
    * and most importantly i can link to their library hosted on their CDN ( all my sites get over million page views a day so this not only cuts my bill but speeds up the loading times for my users )

  24. #24
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    There is no reason whatsoever to set the base font size as small as 62.5&#37;, since the notion that this will equal 10px is utterly false. Ed's reply above is a prime example of that. He'll get 12px or 13px, and if you've relied on the belief that 1em=10px the layout will fall apart.
    Looks pretty good to me - I see no discrepancy between px and ems - do you? I am only talking about applying the ratio of ems to pxs on text - not div sizes or any of that.

    http://www.visibilityinherit.com/pro...size-test.html

  25. #25
    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 ewwatson View Post
    Looks pretty good to me - I see no discrepancy between px and ems - do you?
    Yes (see attached screenshot).

    Quote Originally Posted by ewwatson View Post
    I am only talking about applying the ratio of ems to pxs on text - not div sizes or any of that.
    Maybe I'm dense, but I don't understand why you need to do that. Could you explain?

    The usual reason when people set the font size to 62.5% is that they believe it's the same as 10px and use it to compute container dimensions in pixels. That may work for a lot of visitors, but not all of them.
    Attached Images Attached Images
    Birnam wood is come to Dunsinane


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
  •