SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 38
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Where to set Font-Size?

    Where is the smartest place to set Font-Size?

    While looking at some old HTML/CSS I see that someone on SitePoint used this...

    Code:
    body{
    	font-family: Helvetica, Arial, Sans-Serif;
    	line-height: 1.4em;
    	font-size: 0.9em;
    	background: #FFF;
    }
    Is that a good idea?

    If you re-size the Font in body, then everything in your website will be increasing/decreasing a "Base Font" that is only 90% the size of the default browser Font Size, right?

    That seems kinda dangerous, because when you get deep into your website and code, now when you type...
    Code:
    someClass{
    	font-size: 2em;
    }
    you are really getting...
    Code:
    someClass{
    	font-size: 1.8em;  /* 0.9em X 2em = 1.8em */
    }
    Follow me?


    Debbie

  2. #2
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I set the family in the body, that way I don't have to constantly repeat the family in practically all my classes and IDs. I also set the font size in the body, and honestly, I rely more on my eyes than the mathematics for sizes. Although I use sites like http://www.pxtoem.com so see what the conversions are without calculating, I like setting a base font em or % because if I need to adjust the size of the whole site, it gives me the power to do it accross the board, AND if the line heights are in ems, it will adjust those naturally too.

    However, yes you do have to be careful because when you set your fonts in ems, the cascade will change the sizes. So if you have 1em in your body, then .8em in a parent, then .8em in the child will be even smaller than the .8em in the parent because it is calculated based on the cascade not the original size. To me that is the real potential hazard of ems and %, a hazard that exists whether you base the font in the body or not.

    Browsers all have default font sizes, so if you don't set your body font size, you are still basing the em on SOMETHING, usually 16px. I might be wrong about any of the above, but it's how I understand it.

  3. #3
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The bottom line here is that the user can totally over-ride in their browser any font sizes you set anywhere on your website.

    I always set "my" default font sizes for the <body> and <h1> to <h4> elements in em's. With em's the font sizes will be that fraction of whatever the user has as the default size in their browser. But as I said, the user can totally ignore any font sizes you specify and they can specify their own font sizes in their browser.

    There is no danger in using em's or % for font sizes in the <body>, or anywhere else for that matter, provided you know what you are doing and understand how the font sizes for rendering are calculated when setting font sizes in child elements.

    In my experience, the perception of using em's or % as being dangerous comes from those who don't understand fully how font sizing works.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I do, since the default size in most (all?) browsers is 16px, is to set the body font-size to 62.5% (10px) and work from there. I found out that working with em's from a base size of 10px is a lot easier than working from 16px.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Hueij View Post
    What I do, since the default size in most (all?) browsers is 16px, is to set the body font-size to 62.5% (10px) and work from there. I found out that working with em's from a base size of 10px is a lot easier than working from 16px.
    So you do...
    Code:
    body{
      .625em;  // Can you do a decimal like that?
    }
    Does anyone else agree with this approach?


    Debbie

  6. #6
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you do a decimal like that?
    Did it work when you tried it?

    You can use whatever default size you want and specify it however you like, as long as it is valid of course. But remember, the user can choose to totally ignore any font sizes you specify and instead specify their own font sizes for any elements they like in their browser.

  7. #7
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    So you do...
    Code:
    body{
      .625em;  // Can you do a decimal like that?
    }
    Does anyone else agree with this approach?


    Debbie
    That's what I do. I set it at .875em which is about the size of 14px.

  8. #8
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Where is the smartest place to set Font-Size?

    That seems kinda dangerous, because when you get deep into your website and code, now when you type...
    Code:
    someClass{
    	font-size: 2em;
    }
    you are really getting...
    Code:
    someClass{
    	font-size: 1.8em;  /* 0.9em X 2em = 1.8em */
    }
    Follow me?


    Debbie
    I guess I do not understand your line of reasoning. Doing a conversion like that doesn't seem to be even necessary because you are just comparing apples to oranges at that point, right? If you set your base font size to .875em in the body, and the original text size is 16px, that means the base size is now 14px. That means that if you set someClass {2em}, it is now 28px. What's the problem?

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    So you do...
    Code:
    body{
      .625em;  // Can you do a decimal like that?
    }
    Does anyone else agree with this approach?
    That appraoch was popular for a while (the 62.5% sizing, that is), but is discredited now, as it has the potential to make text completely unreadable for some users. It can potentially lead to extremely small font rendering, so better avoided. You can easily Google the arguments against it.

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Hueij View Post
    What I do, since the default size in most (all?) browsers is 16px, is to set the body font-size to 62.5% (10px) and work from there. I found out that working with em's from a base size of 10px is a lot easier than working from 16px.
    .. and on computers like mine where the default is 20px and not 16? Or my media center where it's 24px? Or my old phone where it was 12?

    62.5% does NOT equal 10px on all systems, so that's a very FOOLISH choice -- as I've said MANY, MANY, MANY times on these forums, I'd like to find who started the 62.5%=10px bull -- and introduce them to my buddy Shawn...

    Once there was this girl who
    swore that one day she would be a figure skating champion.
    ... and when she finally made it... she... saw...
    some other girl who was better.
    ...and so she hired some guy to club her in the kneecap...


    As to DoubleDee's question, I usually set 85 to 100% on body depending on the face (serifs generally need larger font, not all faces are the same) -- entirely BECAUSE it cascades down through the page. I want larger I can say larger, I want smaller I can say smaller -- I do NOT worry about 'exactly the right size' because the size will be different depending on the user's choice -- which is the ENTIRE REASON TO BE USING %/EM IN THE FIRST PLACE!!!

    NOT that you should be changing sizes 'all over the place' like most people seem to. Headings a little bigger (120-150%)... Much like the VERY good advice you'll hear from time to time of "only use one or two font faces on a page" -- the same should be applied to sizes for the most part. for 95% of the text on your page (pulling a percentage out of my ****) setting your font size should be a matter of "set it and forget it".

    ... and BODY does a great job of that.

    I think that's what a lot of people coming from the whole "what do you mean I shouldn't use px" mentality never quite grasp -- the entire POINT of using %/EM is that it's dynamic and inherits... and frankly if you're nesting them enough for it to be an issue, there's probably something wrong with how you're building the page.

  11. #11
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Based on some of the comments, it seems that some people are missing my original question(s).

    I don't have a problem with EMs. After all, I'm using them!

    And I don't have an issue with "cascading".

    What does seem strange to me is starting off with the highest level (i.e. <body>) being 0.90em.

    To me that says, "Whatever size the User has chosen as their defaults font (e.g. 20px for DeathShadow, 10px for Hueij) it is TOO BIG so I need to knock it down 10% to 0.90em!)

    That seems strange...

    First, it presupposes that everyone is viewing my website in font that is too big?!

    Next, to my original question, it just seems like you are starting off with a weird size and then from there everything is a derivation of a derivation of a derivation...

    Assuming my browser is set to the default FireFox size, and assuming everything I develop looks *reasonably* good/readable, then I guess it doesn't matter what ___em I am using when and where, but I'm big on SIMPLIFICATION and SYMMETRY and I just guessed that you'd leave <body> at "1em" and then increase/decrease from there?!



    Debbie

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    To me that says, "Whatever size the User has chosen as their defaults font ... it is TOO BIG so I need to knock it down ..."
    Yep, that's exactly what it says, and it's quite arrogant, although most people probably don't set their font size themselves, but accept what the browser/system default dishes up, so designers want some control, thinking the larger sizes don't look good. Still, it won't kill users to hit Command +/- (or whatever the PC equivalent is).

    If anything, I always set the body font size to 100% (which should be unnecessary, but apparently helps some older crap browsers).

  13. #13
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yep, that's exactly what it says, and it's quite arrogant,.....
    I think "ärrogant" is a bit harsh. I normally set the default font-size for plain text in the <body> to 0.9em, which is the size I would like if I was visiting the site.

    I suppose I could go tweak the default text size set in the browser, but like you say, most people leave the default setting.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ralph.m View Post

    If anything, I always set the body font size to 100% (which should be unnecessary, but apparently helps some older crap browsers).
    That's to help IE6 which has a scaling bug if you use em (although they are exactly the same thing as far as font-size is concerned). If you use em on the body (or nothing at all) and the user changes the text size it jumps up wildly. So use percent on the body and then you can use ems or percent everywhere else where needed.

    You just need to be sensible with your font-choices and if you start very small then older browsers will never be able to get the text large enough to read. In reality there's no difference from setting the font-size to 100% and then setting all the inner elements to 85% as there is from setting the body to 85% to start with. As others have said you just create a relationship between the font sizes on your page without worrying too much about what pixel size that equates to.

    To get around the compounding issue css3 has introduced the rem (root em) unit but I'm yet to be convinced of its usefulness although I could see it being useful for small islands of content that you drop into a page and don't want to be effected by context.

  15. #15
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    That seems strange...
    It's not strange when, as I mentioned, different font faces are NOT the same size or have the same legibility needs. The default size is typically for a serif font like Times New Roman - you put 16px times next to 16px arial and...

    Actually, let's make this clear as a bell as to the 'why'...

    Code:
    <style type="text/css">
    span {
    	display:inline-block;
    	width:10em;
    }
    
    body {
    	font-size:16px;
    }
    
    div {
    	font-size:20px;
    }
    </style>
    <h2>16px == default on 96dpi</h2>
    <span>This is a test</span>default (times new roman)<br>
    <font face="arial"><span>This is a test</span>arial</font><br>
    <font face="comic sans"><span>This is a test</span>comic sans</font><br>
    <font face="corbel"><span>This is a test</span>corbel</font><br>
    <font face="courier new"><span>This is a test</span>courier new</font><br>
    <font face="dejavu sans"><span>This is a test</span>dejavu sans</font><br>
    <font face="dejavu serif"><span>This is a test</span>dejavu serif</font><br>
    <font face="franklin gothic"><span>This is a test</span>franklin gothic</font><br>
    <font face="georgia"><span>This is a test</span>georgia</font><br>
    <font face="impact"><span>This is a test</span>impact</font><br>
    <font face="segoe ui"><span>This is a test</span>segoe ui</font><br>
    <font face="tahoma"><span>This is a test</span>tahoma</font><br>
    <font face="times new roman"><span>This is a test</span>times new roman</font><br>
    <font face="trebuchet ms"><span>This is a test</span>trebuchet ms</font><br>
    <font face="verdana"><span>This is a test</span>verdana</font><br>
    <div>
    <h2>20px == default on 120dpi</h2>
    <span>This is a test</span>default (times new roman)<br>
    <font face="arial"><span>This is a test</span>arial</font><br>
    <font face="comic sans"><span>This is a test</span>comic sans</font><br>
    <font face="corbel"><span>This is a test</span>corbel</font><br>
    <font face="courier new"><span>This is a test</span>courier new</font><br>
    <font face="dejavu sans"><span>This is a test</span>dejavu sans</font><br>
    <font face="dejavu serif"><span>This is a test</span>dejavu serif</font><br>
    <font face="franklin gothic"><span>This is a test</span>franklin gothic</font><br>
    <font face="georgia"><span>This is a test</span>georgia</font><br>
    <font face="impact"><span>This is a test</span>impact</font><br>
    <font face="segoe ui"><span>This is a test</span>segoe ui</font><br>
    <font face="tahoma"><span>This is a test</span>tahoma</font><br>
    <font face="times new roman"><span>This is a test</span>times new roman</font><br>
    <font face="trebuchet ms"><span>This is a test</span>trebuchet ms</font><br>
    <font face="verdana"><span>This is a test</span>verdana</font><br>
    </div>
    Which renders thus:


    at the same font size, different font faces don't render the same size... I think that's part of what you're missing. See how Arial is so much larger than the default/times? Get a load of DejaVu, Courier new and Verdana, some of the worst offenders in that department.

    You change the face, want the same size, you have to adjust -- which is why when using serif fonts I typically leave it at 100%, while on sans-serif I go smaller... how much smaller depends on what font family and stack I'm using.

    It's also where EM can be annoying in browser, as the fonts don't report the actual width of a letter M -- so saying "10 em".. well, all of the spans making the column above are 10em -- does it look like those fonts would have the same width caps M? It can be REALLY annoying when dealing with monospace fonts.

    Like "courier new" in the above demo. I'm declaring 10EM... its' a monospace font... that means the fourteen character long "this is a test" shouldn't even fit.

    It's why you can't predict font size across platforms and typically should plan for 15-20% growth of an area even when using %/em.. or even pixels for that matter! It's another reason why fixed width layouts and fixed width/height containers on elements are a miserable /FAIL/ at web design and development!

    I also think it's why some folks favor verdana -- they don't realize that the other sans-serif fonts would be just as legible if you increased their size 15-20%; they get tricked into thinking it's got better glyphs just because it's larger at the same declared size... which is why many sites designed with Verdana are useless without zooming in on systems that don't have said font available.

    Bottom line, I want arial at the same approximate size as times new roman is at the default size, I need to declare it at 85% of that default. The default isn't just about size, it's about face.

  16. #16
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    To get around the compounding issue css3 has introduced the rem (root em) unit but I'm yet to be convinced of its usefulness although I could see it being useful for small islands of content that you drop into a page and don't want to be effected by context.
    That's an interesting idea. I've been able to avoid the compounding issues so far. If I have defined the size in the BODY, I just define any variations at the child text element level rather than a parent level. So, if I have a side bar with smaller text overall than the rest, I define that in the p element, like .sidebar p = .8em, and combine that with .sidebar li and so on. So, then if I have headers that need to be the same size as the main content or bigger, I don't have to start overcompensating for the compounding in the H elements by all these strange em sizes, I want the em size variations to be based directly on the BODY as much as possible.

    To me, since I place all regular copy in <p> tags that is where I define my sizes. Anything I can do to keep from having a middleman between the body and the innermost children, I try to do it and it has worked out pretty well.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sdt76 View Post
    To me, since I place all regular copy in <p> tags that is where I define my sizes. Anything I can do to keep from having a middleman between the body and the innermost children, I try to do it and it has worked out pretty well.
    Yes that's much the same as I try to do which avoids using it on elements that may be nested.

  18. #18
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    To get around the compounding issue css3 has introduced the rem (root em) unit but I'm yet to be convinced of its usefulness although I could see it being useful for small islands of content that you drop into a page and don't want to be effected by context.
    Funny you should mention that, because I had the same idea not even knowing rem existed?!


    Debbie

  19. #19
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes that's much the same as I try to do which avoids using it on elements that may be nested.
    So you don't have a size on html or body but instead just on p??


    Debbie

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    So you don't have a size on html or body but instead just on p??


    Debbie

    No you can set the size on the body to start with (usually set a size that suits most of the elements on the page) then when needed apply the changes to the elements that need it but avoid doing things like:

    #test div {font-size:80%}

    The div is likely to be nested and will compound unlike the p element that actually holds the text.

    #test p{font-size:80%}

    For lists the same applies and avoid:

    #test ul {font-size:80%}

    but instead ul#nav {font-size:80%}

    Then nested lists won't compound.

    Which means also avoid :
    ul#nav li {font-size:80%}

    Because nested lists will be affected by the above.

    Of course you van compensate where things have to be nested.

    e.g.
    #test ul(font-size:80%)
    #test ul ul {font-size:100%}

    Which ensures the nested ul doesn't compound.

  21. #21
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    *edit Paul ninja'd me

    Debbie:
    if I understand std76 and Paul (and I believe I do), there's a base size set on the body element and from then on, of course you will want to adjust your individual elements, so also the p's etc. What you *don't* want to do is set font-sizes in ems on containers. That's the "danger" everyone's been hinting at, because then you start needing to do math and as Barbie once said to me math is hard and I personally go out of my way to avoid doing any math at all possible ever if I can avoid it.

    And yeah I'm a girl but that should mean I *do* get to perpetuate stereotypes. Nerdy WolframAlpha girls, go away or I'll steal your lunchmoney.

    So here's what I do, I think it's pretty similar to what most of the others in this thread do regarding ems and setting fonts:

    body {
    font: 100%/130% family, generic-family;
    }

    I'm just using 130% because it seems to work better than the 1.2em (120%, same thing) that I would usually use as default line-height...

    So right now most of the page text is set to whatever the user has set on their OS or their browser or their applications or whatever.

    The browser still has a default stylesheet which for example will make the header tags larger and bold (h1-h6) and some other small things.
    When you go to set whatever size *you* want on, say, your h1, you just set what you want on it, easy:

    h1 {
    font-size: 1.6em;
    }
    (supposing you want it to be .6 times bigger than your default text setting)

    Usually with headers I find I have to go all out and set line-heights too, though you'll only see that if you strip margins from them.

    You want most body text to be "normal" and right now p's are 1em. You don't have to set anything if you don't want to. But if you want all text in a particular container to be smaller than normal, you'd

    .someContainer p {
    font-size: .9em;
    }

    You've seen those diagrams where they have a tree showing DOM nodes? Like in a Javascript book? The ends of each branch eventually is either an element (or an attribute of an element or its text node). I set my font sizes on the ends of the branches: the elements.
    Meaning I don't do

    .someContainer {
    font-size: .9em;
    }

    People like to do this with px sometimes but here's where, if you've got different elements in someContainer and there's nesting going on, you start having to do math. I hate doing math, so I don't set on the container. if I set on the p inside the container, then any children of the p are the size I expect: same as the p.

  22. #22
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    *edit Paul ninja'd me
    Huh?


    Debbie:
    if I understand std76 and Paul (and I believe I do), there's a base size set on the body element and from then on, of course you will want to adjust your individual elements, so also the p's etc. What you *don't* want to do is set font-sizes in ems on containers. That's the "danger" everyone's been hinting at, because then you start needing to do math and as Barbie once said to me math is hard and I personally go out of my way to avoid doing any math at all possible ever if I can avoid it.

    And yeah I'm a girl but that should mean I *do* get to perpetuate stereotypes. Nerdy WolframAlpha girls, go away or I'll steal your lunchmoney.
    If you set the font size on <body> or <h1> or <p> how does that not create the same propagation issue as with <div>?


    So here's what I do, I think it's pretty similar to what most of the others in this thread do regarding ems and setting fonts:

    body {
    font: 100%/130% family, generic-family;
    }

    I'm just using 130% because it seems to work better than the 1.2em (120%, same thing) that I would usually use as default line-height...
    Not following you?

    How does percentage vary from em?


    So right now most of the page text is set to whatever the user has set on their OS or their browser or their applications or whatever.
    Rumor has it that is too big?!


    You want most body text to be "normal" and right now p's are 1em. You don't have to set anything if you don't want to.
    So 100% = 1em?


    But if you want all text in a particular container to be smaller than normal, you'd

    .someContainer p {
    font-size: .9em;
    }
    How does that compare to

    body{
    font-size: .9em;
    }

    or

    body p{
    font-size: .9em;
    }


    You've seen those diagrams where they have a tree showing DOM nodes? Like in a Javascript book? The ends of each branch eventually is either an element (or an attribute of an element or its text node). I set my font sizes on the ends of the branches: the elements.
    Meaning I don't do

    .someContainer {
    font-size: .9em;
    }

    People like to do this with px sometimes but here's where, if you've got different elements in someContainer and there's nesting going on, you start having to do math. I hate doing math, so I don't set on the container. if I set on the p inside the container, then any children of the p are the size I expect: same as the p.
    Why are children of <p> the same as <p> but children of <div> inherit from <div>??


    Debbie

  23. #23
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    How does percentage vary from em?
    Not much, but as Paul said—"IE6 ... has a scaling bug if you use em"

    So 100% = 1em?
    Yes.

    Why are children of <p> the same as <p> but children of <div> inherit from <div>??
    Not sure what you mean? Font sizes are inherited by both in the same way.

  24. #24
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    If you set the font size on <body> or <h1> or <p> how does that not create the same propagation issue as with <div>?
    Why is that and issue... what issue?

    I think that's what I'm not grasping about your question -- I just don't see the problem. Set it on body, scale on semantic children when there's a reason to resize, not "just because" -- where's the problem?

  25. #25
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Crusty
    I think that's what I'm not grasping about your question -- I just don't see the problem. Set it on body, scale on semantic children when there's a reason to resize, not "just because" -- where's the problem?
    That question I think is about when people set em's on containers and then start getting nested elements at unexpected sizes.

    I did look through some old code of mine (not that old) and I noticed I *did* actually set a container to .9em, on a terms&conditions page. Pretty much, everything in that box was just a bit smaller. I like making people squint to read legalese. The whole point is to discourage people from actually reading it, of course.
    Still wasn't a problem because although header tags in general also had a set (in em) font-size, I didn't go around setting font sizes on everyone else inside. I don't believe I set *any* differing font sizes inside that container at all. Avoided the math problem.


    Quote Originally Posted by Debbie
    Huh?
    If someone ninjas a post in, it means while you were still typing your reply, another one got submitted to the thread by someone else, so what you typed doesn't take into account the new last post, cause you didn't see it (like a ninja!).

    If you set the font size on <body> or <h1> or <p> how does that not create the same propagation issue as with <div>?
    One reason I set it to 100%, so nothing changes... but Paul's answer that came in right before me explains it pretty well.

    Putting the font-size on containers like divs means that if the children inside the div have children and then you go trying to set more sizes inside that container, it can start turning into math hell. Ideally, you're not going around manually setting font-sizes on a whole lot of elements anyway.


    Not following you?

    How does percentage vary from em?
    As ralph said, it doesn't. Em can be considered a unit equal to %, and if % makes more sense, go ahead and use it.
    Actually, line-height is special: you can leave the unit off if you want. Have you ever seen this?
    font: bold 90%/1 somefamily;
    ?
    That 1 means "100%" or "1em" or whatever. Line-height basically gets an assumed unit. I say "130%" in my body because I'm using 100% for the font-size, so I like to keep them using the same units, but I don't have to. I also don't have to even set a line-height but as Crusty will point out, that can cause issues 'cause browsers don't all use the same relative line-height. It's safest to set a line-height wherever you set a font-size really.

    Rumor has it that is too big?!
    You know why? Everyone makes these websites with 9px light grey text on white. People just get used to squinting. So when someone finally makes a site that uses the user's default sizes, it tends to look bigger... especially if you use a large x-height font like Verdana. Like this page, even my boss mentioned how large the text seemed to him. Cause he's used to sites that look like this one (which uses the 62.5% body font size thing).

    BTW on that 62.5% thing... the guy who came up with it, he always re-enlarged everything on a container who enclosed the whole page (so a div inside the body that still otherwise held everything else). Nobody else seems to remember this part, which is why when people use the 62.5% it's too damn small. They're doing it wrong.


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
  •