SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is there a scalable absoulte font size unit?

    Hi,

    I've been using 'pixels' to define my font size since I've started coding for the web. However, I keep seeing people often complaining about how, unlike 'em' and percentages for example, users can't change its size.

    So, is there an absoulte unit that I could use for font sizes? I don't use relative units mainly because they're a mess. And if I change the parent's font size, I have to adjust its children as well. (correct me if I'm wrong)

    Appreciate your help

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That would be an oxymoron. If something is absolute, it cannot be changed.

    Relative units are not a mess if you do things properly. If you're 'thinking in pixels' and try to 'convert' those measurements into relative units, then you're creating a mess.

    If you use pixels for image dimensions and border widths, and em or % for everything else, there won't be a mess.
    Birnam wood is come to Dunsinane

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    And if I change the parent's font size, I have to adjust its children as well. (correct me if I'm wrong)
    No you are correct and that's the beauty of using ems

    If a user scales the text then all the text scales accordingly because it is all related.

    Using pixels is a problem because IE7 and under don't scale text when it is sized in pixels (although IE7 does have a zoom feature). Once IE6 usage is zero it won't be a problem and you can use pixels if you wish although you will still have issues with layouts breaking when scaled unless the containers are sized in ems also (or allowances have been made).

    It's quite easy to use relative font size but you need to have a logical approach and not apply sizes to elements that may be nested without controlling them or they will compound.

    Problems can arise if at a later date you wanted the parent a larger size but keep the children the same. A single change to the parent would affect any nested children also that have ems applied and you would then need to re adjust the size of the children accordingly. However I don't think this is a problem that will likely happen very often.

    I use ems for font sizes on all the work I do and rarely run into issues although it does take slightly longer at design time to work out what percentage to use.

    You can base your font sizes on the Yahoo font reset which has a basic cheat sheet to show the differences between percentages although it makes assumptions on what the defaults of browsers usually are which is not always the case.

    These are the choices we have to make and ultimately you can never control the font size on a visitors browser because they can always over-ride you in one way or another; so you make it the best you can

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure exactly if this is answering your question, but if you use the following:
    body {font-size:62.5%;}

    this sets the base font-size ( 1em) to about 10px in most (all?) browsers. So then if you want eg a header to have font-size 22px you would add eth css rule

    h2 {font-size:2.2em}

    It can get a bit tricksy sometimes. If you have eg

    h2 {font-size:2.2em}
    span {font-size: 1.2em}

    and

    <h2>Header with <span>bigger text</span></h2>

    then the text inside the span will be 1.2em x 2.2em = 2.64em = 26.4px big. If you change the h2 font-size then the span font-size will also change.

    But if you had a more specific selector

    h2 {font-size:2.2em}
    h2 span {font-size: 1.2em}

    then the text inside the span would only be 1.2em tall, as it's (not sure what the technical term woudl be) more singled out by the selector. You can change the h2 font-size all you liek and it won't affect the span.

    So you can set it up so that either the children's font-size is dependent on the parent, or is independent of it.

    Hope this helps

    Rhys
    Last edited by Rhysickle; Aug 3, 2008 at 09:53. Reason: more info

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Rhys
    But if you had a more specific selector

    h2 {font-size:2.2em}
    h2 span {font-size: 1.2em}

    then the text inside the span would only be 1.2em tall, as it's (not sure what the technical term would be) more singled out by the selector. You can change the h2 font-size all you like and it won't affect the span.
    I think you have confused yourself a bit there

    It will make no difference how you target the span as it will always be 120&#37; bigger than the parent whether you say h2 span {font-size:1.2em} or just span{font-size:1.2em}.

    The em size of the span will always be relative to its parent size and you cannot bypass the mechanism. You could of course use the following instead to ensure the span stays at the same size as the h2 if you have defined other rules for spans elsewhere.

    h2 span {font-size:100%}

    That will ensure the span stays at the same size as the parent assuming that styles of a greater weight don't exist.

  6. #6
    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)
    Quote Originally Posted by Rhysickle View Post
    Not sure exactly if this is answering your question, but if you use the following:
    body {font-size:62.5&#37;;}

    this sets the base font-size ( 1em) to about 10px in most (all?) browsers.
    Not really, because it assumes that all browsers are set to 16px by default (Firefox is, that much I know - IE and Opera obey the system metric, and I'm not too sure about Safari, but if I had to gander a guess I'd say 14px for that browser). Not only that but you have users who have their computers set to 120 .dpi (or 100 on Linux) which they tend to call "large fonts" which increases the text size by about 25% on average thereby making the 62.5% = 10px arguement fall flat on its face.

  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 Dan Schulz View Post
    Not really, because it assumes that all browsers are set to 16px by default
    Not only that, but it also assumes that the user hasn't changed the font size setting/zoom from Default or 100%. That's easy to do inadvertently by moving the mouse scrollwheel while holding down the Ctrl key. I've seen beginners do this many times, and they have no idea why the text on all websites is suddenly so large or small.

    More advanced users may do this deliberately, if they need larger text because of a slight visual impairment.
    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
  •