SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    england
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Advice on the best way to achieve relative font-sizes with ems?

    Hi

    While there's a lot of websites telling you to use ems for font-sizes, I find not many give real world examples!

    Is this the correct way of going about defining font-size that is relative and accessible....

    body {
    font-size:0.8em;
    }

    or whatever the base font-size would be....
    and then in each tag use percentages, so

    h1 {
    font-size:250%;

    }
    h2 {
    font-size:150%;
    }
    .small {
    font-size:80%;
    }

    And all of those will be relative to the 0.8em base?

    I find when I do this sometimes IE and Firefox will behave differently, and what I think should be the base size is sometimes slightly smaller in one or the other. Would this suggest a fault in the way it's structured?

    Or is there a much better way to go about accessible relative font sizes?

    Advice very welcome!
    Thanks!

  2. #2
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,403
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    You're on the right track!

    Specifying the font size on the body tag sets the defeault font size unless you specify otherwise. So in your example of h1 the font would display at 2.0em (0.8 x 250&#37.

    One method I use is to set the body size to 0.625em, this equates to 10 pixels so if I wanted 12px the em equivilent is 1.2em.

  3. #3
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I always set the body tag to a percentage. This allows the user to change the type size. Within the body, I always use em. Not sure why I don't use percentages - maybe I read somewhere that they might stumble upon a bug. But using em works very well for me.

    Here's a link to an article I found useful in my early days: http://www.clagnut.com/blog/348/

    Hope this helps....
    mikem

  4. #4
    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)
    Bluedreamer, that'll only equate to 10px if the browser's default text size is set to 16px - and not all of them are not since people can (and will) change the default text size if it suits them.

    I personally go with 85%/140% on the body in my stylesheet and then just resize from there using EMs (saving px for things like images or columns that contain an image, like a sidebar with a calendar that has an image associated with the day, month, or whatever for example).

    And Mike, the user can resize the text inside the viewport unless the font size has been specified in an absolute unit of measurement or they are using Internet Explorer which will correctly not resize pixels (sorry CSS purists - I have to agree with Microsoft on this one since pixels are an absolute unit, not a relative unit as it's written in the CSS specification; afterall when the base measurement on the computer screen is a pixel, what is a pixel supposed to be relative to when its absolute size is defined as being equal to a dot on the screen?).

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Not sure why I don't use percentages - maybe I read somewhere that they might stumble upon a bug
    It's the other way around actually

    When you set the font size in ems on the body element then IE6 and under get the scaling all wrong. However if you use percentages (although they are exactly the same thing) the bug isn't triggered.

    On the rest of the elements ems or percentages are the same thing with relation to font:size. e.g. 0.8em = 80%.

    I use a method similar to the Yahoo reset which sets the body size in pixels and ensures that all browsers start at the same size. IE is given a keyword size that matches the pixel size exactly but also allows for the text to scale with the browser. The rest of the elements are then defined in percentages relative to this base.

    Code:
    body {
        line-height: 1;
        color: black;
        background: white;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px; 
    }

    IE only code through conditional comments:
    Code:
    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}

  6. #6
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,403
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Bluedreamer, that'll only equate to 10px if the browser's default text size is set to 16px - and not all of them are not since people can (and will) change the default text size if it suits them.
    Agreed, but that's for specifying the default size for when other elements on the page don't have a size associated with them?

  7. #7
    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)
    Only if the browser's default font size is declared as 16px. If I were to go into my browser settings and change the font size to 12px, your conversion would fall apart and I'd have to either resize the text in the browser window (text resize), use a browser that supports proper page zooming (read: Opera) or just leave because your site will be unusable to me.

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    england
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your replies on this.

    So I realize i'm not quite doing it correctly - I need to use a percentage on the body, and then use ems to specify each element's font-size e.g

    body {
    font-size:80%;
    }
    h1 {
    1.4em;
    }
    h2 {
    1.2em;
    }
    .small {
    0.7em;
    }

    I'll give that a try!

  9. #9
    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)
    Also be sure to specify a line-height. (I personally prefer 85%/140% but that's just me)

  10. #10
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im pretty sure that there is no problem using % on the elements as well, I prefer that as percentages make more logical sense.

    PS. Interesting method Paul. So a font-size of small equals to 13px (Using default settings)? Would be nice if x-small equaled 10px, so that it would be easier to calculate :P

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    So a font-size of small equals to 13px (Using default settings)? Would be nice if x-small equaled 10px, so that it would be easier to calculate
    Yes it equals 13px across all platforms irrespective of what the user default is set to and therefore provides a sound basis for starting from and also a reasonable default.

    If you look at the yahoo site (halfway down the page) there is a table of percentages that you can use to obtain the exact pixel size you want. It's a no-brainer really

    Just print it out and keep it with you

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by znebjosa
    Im pretty sure that there is no problem using % on the elements as well,
    For font size its exactly the same thing and as long as you declare the body in percent to avoid the IE scaling bug then the two are completely interchangeable.

    That is only true for font-size though and will have different meaning for other dimensions such as height,width and margins etc. (In these cases em is based on the parent font-size but percent is based on the width (or height depending on property) of the containing block)

  13. #13
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes it equals 13px across all platforms irrespective of what the user default is set to and therefore provides a sound basis for starting from and also a reasonable default.
    Sorry, buy how does this work?

    Dont different browsers have different scaling factors, and would not the user having set a different font-size (large/medium/small) or a different default size in pixels make the font-size different?

    In addition, Im wondering: the reason people like using pixels for font-size is due to pixel perfection? But if it can be changed by the user, it really is not much different from just using a percentage or a keyword?

    Thanks

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by znebojsa
    Dont different browsers have different scaling factors
    You are missing the point .

    13px is always 13px (allowing for minor variations on different systems)

    You are then setting the body to 13px and the setting your other elements in relation to the 13px and not the default font size (whatever that may be).

    When you set the body font size to 62.5% (or whatever (and going that small will limit the scaling factor)) then that size depends on what the user has set for their default. If their default is 28px then your layout will be based on that. In other browsers the default may be different and therefore your layout won't look the same.

    In the method I have shown it depends on 13px and gives you the consistent base from which to start i.e all browsers start at 13px.

    Of course the user can still scale their page up and down as they wish.

    But if it can be changed by the user, it really is not much different from just using a percentage or a keyword?
    The only reason pixels were evil was that IE would not allow them to scale via the browser controls. Only relative sizes and keywords would scale in IE and therefore pixels were considered bad for accessibility because the user couldn't change the text size.

    With the method I have shown you get a consistent start size and still allow the user to change the text size via the browser controls.

    You could change the method to use medium for IE6 which equates to 16px and therefore be more like the standard set up.

    Of course you still have to consider whether you should be changing the users default font-size at all

    If the user has set the default font-size to 28px then should you really be changing it at all as they will have to scale their layout back up to what they wanted.

    Also the user can change their settings to ignore fonts and font sizes altogether id they want. Ultimately you have little control so you should use a system that keeps most people happy but still allows for others to scale their pages if they wish.

    It's a complicated subject with no real answers because there is always an opposite opinion for nearly every way you turn.

  15. #15
    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)
    And as I've said before and elsewhere, it's one of the things that I believe Microsoft actually GOT RIGHT. Afterall, what is a pixel supposed to be relative to? The dot on the monitor that allows us to see what's on the screen in the first place, of course. Which by default makes it the baseline measurement.

    Why the W3C CSS Working Group decided to make the idiotic decision to make pixels a relative unit when in fact they're (in the rest of the computing world anyway) an absolute unit is beyond me.

  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)
    CSS makes a distinction between absolute and relative units. An absolute unit is a defined, physical length, like millimetre, inch, point (1/72 inch) and pica (1/6 inch).

    A pixel doesn't correspond to a fixed, universal length. Therefore it's not an absolute unit from a CSS point of view. Since it's not absolute, it's relative by default.

    Note, however, that this has nothing to do with the concepts of absolute vs relative from an accessibility point of view, such as in WCAG. Here, relative means that it's something that can easily be changed by the user, while absolute means that it's unchangeable. Pixels are neither, on many devices. Changing the display resolution or the display dimensions effectively alter the size of the pixels, but it's not something you can do 'easily'.
    Birnam wood is come to Dunsinane


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
  •