SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 38 of 38
  1. #26
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Where is the smartest place to set Font-Size?
    On the highest element you can. That way, you only have to set it once.

    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?
    Nope. What's dangerous is
    Code:
    * {font-size:90%;}
    or
    Code:
    div {font-size:90%;}
    because then you can get nesting, and you find that once you've got your container <div> and then your content <div> and then your section <div> and suddenly you're down to a font size of 72%, which is likely to be way too small. But you can only have one <body> on a page, so there is no nesting conflict (aka Cuckoo Problem).

    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 */
    }
    That's exactly what you want to happen. By saying whatever {font-size:2em;}, you're saying that you want <whatever> to be double the size of the rest of the text. And that's what you've got. The reason for using ems (or %) relative to the <body> is to keep text size proportionate. It is very unlikely to matter what the exact computed font size is (on the basis that there will be a margin of error of maybe 25% across just regular setups, let alone people with more heavily customised browsers and computers), but what you want to ensure is the consistency of knowing that X will be double the body text, and Y will be 20% larger, etc.

  2. #27
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Too many cooks...


    Quote Originally Posted by Stevie D View Post
    On the highest element you can. That way, you only have to set it once.


    Nope. What's dangerous is
    Code:
    * {font-size:90%;}
    or
    Code:
    div {font-size:90%;}
    because then you can get nesting, and you find that once you've got your container <div> and then your content <div> and then your section <div> and suddenly you're down to a font size of 72%, which is likely to be way too small. But you can only have one <body> on a page, so there is no nesting conflict (aka Cuckoo Problem).


    That's exactly what you want to happen. By saying whatever {font-size:2em;}, you're saying that you want <whatever> to be double the size of the rest of the text. And that's what you've got.
    If I have...

    body{
    0.90em;
    }

    and then...

    h1{
    1.5em;
    }

    and

    div{
    0.90em;
    }

    and

    p{
    0.90em;
    }


    Then everything on <body> starts off at 90%, and...

    <body>
    <h1> // 0.90*1.5=1.35
    <div> // 0.90*0.90=0.81
    <p> // 0.90*0.90*0.90=0.729


    Right?


    I think it would make more sense if everything was sized off some "global em", for example, <body> or default browser font size

    So regardless of how much nesting, everything would be based off of that global em which should be "1em" in my mind.

    That way, I could have a paragraph nested in 19 div's, style <p> as p{2em} and it would be twice the size of the default browser size.

    Very simple...


    Debbie

  3. #28
    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
    <body>
    <h1> // 0.90*1.5=1.35
    <div> // 0.90*0.90=0.81
    <p> // 0.90*0.90*0.90=0.729

    Right?
    Yes, but it's not a good way to do it. Much more complicated than needed. As mentioned, just set body to your prefered size for most text (e.g. for <p>) and only change the size on an element where needed (as in the h1).

    I think it would make more sense if everything was sized off some "global em", for example, <body> or default browser font size
    That's what Paul was talking about in post #14 with the new rem.

  4. #29
    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 deathshadow60 View Post
    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?
    If you say, "My daughter is half my age and a quarter of a century old..." But *your* parents are 90 years old (versus 100) does that really make your daughter 22.5 years old instead??


    Debbie

  5. #30
    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
    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!).
    Cool!


    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.
    Maybe the trick is to just have 2-3 font sizes per page??


    Debbie

  6. #31
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with StevieD here and the way the nesting and rescaling of em's and %'s work in browsers is the way it should be.

    Obviously there will be others like you who, in your opinion, believe it would be simpler some other way and that is fine. But regardless of how people think it should work, the fact is you have to work with the way it actually works whether you agree with it or not.

    Since you appear to understand how the nesting and cascading of font sizes works with em's and % then I also agree with DeathShadow and I don't see what you're and about. There is no issue as far as I can see and if you want to use em's and/or %'s then you just have to use them with the way they work because you can't change the way they work. And assuming you can do simple multiplication it's a "no-brainer" to size fonts according to what you want.

  7. #32
    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
    If you say, "My daughter is half my age and a quarter of a century old..." But *your* parents are 90 years old (versus 100) does that really make your daughter 22.5 years old instead??
    That really has nothing to do with this issue, though.

    If your parents leave you $90K in their will but specify that you must give 50% of your inheritance to your daughter and that she must in turn give 50% of hers to her dog, you will get $45K, your daughter will will get $22.5K and so will her dog.

  8. #33
    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
    If I have...

    body{
    0.90em;
    }

    and then...

    h1{
    1.5em;
    }

    and

    div{
    0.90em;
    }

    and

    p{
    0.90em;
    }


    Then everything on <body> starts off at 90%, and...

    <body>
    <h1> // 0.90*1.5=1.35
    <div> // 0.90*0.90=0.81
    <p> // 0.90*0.90*0.90=0.729


    Right?
    Yes and no

    You missed the point of what most of us have been saying and you cannot possibly know what size the p element will be unless you know where it is.

    Using your example above the p element in the code below will be different in every setting.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body { font-size:90% }
    h1 { font-size:1.5em }
    div { font-size:0.90em }
    p { font-size:0.90em }
    </style>
    </head>
    
    <body>
    <div>
    		<p>small</p>
    </div>
    <div class="wrap">
    		<div>
    				<p>smaller</p>
    		</div>
    </div>
    <div class="wrap">
    		<div class="inner">
    				<div>
    						<p>smallest</p>
    				</div>
    		</div>
    </div>
    </body>
    </html>
    That's why we suggested not setting the font-size on containers like divs but applying directly to p elements and headings as required.

  9. #34
    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 Paul O'B View Post
    That's why we suggested not setting the font-size on containers like divs but applying directly to p elements and headings as required.
    I think that was what I was missing -- why the devil would you set it on a div that has child elements with semantic meanings. Methinks that's where the entire discussion lost me. The only time I MIGHT change it on a div would be in my #footer -- and that's usually because footers don't have elements of different font sizes in them... otherwise I'd NEVER set it on a div when it has perfectly good child elements like H2, P or LI --- which as rule don't/shouldn't contain other block level tags. (unless in the case of LI you have a UL/OL -- you put a H3 inside it, IMHO that ceased to need a lists semantic meaning).

  10. #35
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    2cents. Simple. Usually your p is going to take up most of your text. So... size the body whatever it is you want your p size to look like (font-size:75%). Done. You dont have to size that anymore. Now anything else you want bigger or smaller adjust accordingly. H1, h2, ul, li. Etc. You will now be sizing whatever else from the 75% value. h1 font-size:115%.

  11. #36
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    body{0.90em;}

    and then...

    h1{1.5em;}

    and

    div{0.90em;}

    and

    p{0.90em;}


    Then everything on <body> starts off at 90%, and...

    <body>
    <h1> // 0.90*1.5=1.35
    <div> // 0.90*0.90=0.81
    <p> // 0.90*0.90*0.90=0.729

    Right?
    Right. So why on earth would you set a font size of 0.9em on div and p? You don't need to, because you've already set it on body, which means that it will be inherited throughout every child and descendent element. You set the base font size once on the highest level element you can (usually body) and then you leave it alone. Sure, scale it up or down for specific elements that need to be bigger or smaller than the plain body text, but for generic blocks like div and p you leave the font size well alone, and the computer will get it right without needing you to interfere at every step of the way.

  12. #37
    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 Stevie D View Post
    Right. So why on earth would you set a font size of 0.9em on div and p? You don't need to, because you've already set it on body, which means that it will be inherited throughout every child and descendent element. You set the base font size once on the highest level element you can (usually body) and then you leave it alone. Sure, scale it up or down for specific elements that need to be bigger or smaller than the plain body text, but for generic blocks like div and p you leave the font size well alone, and the computer will get it right without needing you to interfere at every step of the way.
    It was an *example* of the cascading Math *if* things were nested as I implied they were in my unformatted example...


    Debbie

  13. #38
    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
    It was an *example* of the cascading Math *if* things were nested as I implied they were in my unformatted example...
    Well, then you created as an example a nasty case of "doctor, doctor, it hurts when I do this"...


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
  •