SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: Font sizing

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    North Carolina
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Font sizing

    Why do my h1 tags have different font sizes in the browsers when they both possess the identical rules?

    HTML Code:
    <div class="one">
           <h1>Hello</h1>
       </div>
    
       <h1 class="two">Hello</h1>

    Code:
    body {
      background:#fff;
      font-family:Trebuchet MS, Arial, Tahoma, sans-serif;
      font-size:14px; 
      letter-spacing:1px; 
      color:#000;
    }
    .one {
      font-size: 40px;
    }
    .two {
      font-size: 40px;
    }

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    An <h1> tag does not inherit its size from a parent <div>.
    The first <h1> is not described in css, so the font-family and font-size rendered depend on the browser's (user's) default font settings.

    The second <h1> tag should render the same *size* in both browsers, although it might appear to differ if the default *font-family* is different.

    The above statements assume that both browsers have no "zoom" applied.

    If the browsers are on different computers, then screen pixel density is a factor, too.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    North Carolina
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Honestly I'm not really understanding at this point. I just can't wrap my head around the fact that the first h1 tag, that is nested within a div, is larger than the h1 tag that isn't. Sure, I can get around it by applying zoom:2 property to it, but before It comes to that I wish to understand why I am getting this result. Keep in mind I am working locally using the lastest version of chrome.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Brandon, can you post the full code for the test page including the doctype and head, etc? Also, name the browsers and list the default font settings in both.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    North Carolina
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem sir.

    HTML Code:
    <!DOCTYPE html>
    
    <!--[if lt IE 7]> <html class="ie ie6 no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>><html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <title></title>
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width">
            <script src="js/vendor/modernizr-2.6.2.min.js"></script>
            <script scr="js/less.js"></script>
            <link rel="stylesheet" href="css/mastersheet.css">
        </head>
        <body>
        
        <div class="nested">
            <h1>Hello World</h1>
        </div>
    
        <h1 class="not-nested">Hello World</h1>
    
        <!-- le google analytics -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.js"><\/script>')</script>
        <!-- le javascript -->
    
        <script>
    
                var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
                (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
                g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
                s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>
    
        </body>
    </html>
    Code:
    @import url("normalize.css");
    
    .nested {
      font-size: 40px;
    }
    .not-nested {
      font-size: 40px;
    }
    Using the latest version of chrome as well as normalize as a reset ( deleted h1 defaults in my reset )

    Defaults for chrome ( User agent stylesheet ):

    Code:
    h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
    }
    Code:
    h1 {
    margin: 0.67em 0;
    }

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You would need this:

    Code:
    .nested h1 {
      font-size: 40px;
    }
    .not-nested {
      font-size: 40px;
    }
    Otherwise, the browser has its own default size for the h1 that is more specific and thus will apply.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    The <h1> element is assigned its size in "em"s. ems are a relational unit of measure that is based on its immediate parent, not a fixed unit of measure. (your first example didn't indicate the ems assigned to h1 )

    In your new example:
    The outer container div.nested has a font size of 40px assigned.
    When nested, the 2ems assigned to the h1 element doubles the parent font-size so <h1> renders as if it were 80px.


    There was a good discussion here a few days ago that might shed more light on ems:

    http://www.sitepoint.com/forums/show...with-base-font

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    North Carolina
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    The <h1> element is assigned its size in "em"s. ems are a relational unit of measure that is based on its immediate parent, not a fixed unit of measure. (your first example didn't indicate the ems assigned to h1 )

    In your new example:
    The outer container div.nested has a font size of 40px assigned.
    When nested, the 2ems assigned to the h1 element doubles the parent font-size so <h1> renders as if it were 80px.


    There was a good discussion here a few days ago that might shed more light on ems:

    http://www.sitepoint.com/forums/show...with-base-font
    For some reason I still am unable to wrap my head around this. How can I grasp this concept?

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    You could try equating ems to percent. 2ems would be the same as 200% of the parent font size. (That was mentioned in the thread.)

    I feel for you because I've been in similar situations before where understanding a concept eluded me.

    I'm not sure what else to suggest other than more reading and experimentation.

    Perhaps you can describe the "disconnect" and perhaps another poster might have another way of explaining the font size relationship that rings a bell with you. Keep at it... it WILL sink in.

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    North Carolina
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    You could try equating ems to percent. 2ems would be the same as 200% of the parent font size. (That was mentioned in the thread.)

    I feel for you because I've been in similar situations before where understanding a concept eluded me.

    I'm not sure what else to suggest other than more reading and experimentation.

    Perhaps you can describe the "disconnect" and perhaps another poster might have another way of explaining the font size relationship that rings a bell with you. Keep at it... it WILL sink in.
    My disconnect is that I keep referencing the "cascade" with this issue. For some reason I keep thinking that if I would have applied a certain font size to the parent element, in my case ".nested", then every other element that is nested within the parent, would inherit that property as well. That is where the confusion lies at the moment. If that were the case my font size would be 40px, but it's not. Why is the nested h1 doubling in size? Can I override the default browser h1 rule? Why or Why not? Does this quirk only apply to em's? :/

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Let's give this a try....

    The outer div.nested has been assigned a font-size of 40px.

    All <h1>s have been assigned a font-size of 2em.

    As far as the inner <h1> is concerned, it sees its parent container, div.nested, as 1em; ie. 40px = 1em to the inner <h1> (remember ems are relative units... proportional to their parent). Because the inner <h1> is assigned a font-size of 2em, it doubles the font-size of its parent container and renders 80px. That is the inheritance effect at work; and yes, that is the awkward but expected behavior of ems and percent units of measure.

    h1 has been assigned a font-size of 2em. h1.nested has been assigned a fixed font-size of 40px.
    h1.nested is more specific than just h1 alone and thus, overrides the 2em assignment. That is the specificity effect.

    How did we do this time?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Ron has explained it very well above but perhaps another explanation won't hurt.

    ems are based on the font-size of the parent (whatever that may be). As far as font sizes are concerned then em and % are the same thing and interchangeable.

    If you say font-size:2em or font-size:200% then that element will have 200% the font-size of the parent.

    Code:
    My disconnect is that I keep referencing the "cascade" with this issue. For some reason I keep thinking that if I would have applied a certain font size to the parent element, in my case ".nested", then every other element that is nested within the parent, would inherit that property as well
    An element will only inherit certain properties (not all properties are inherited) and will inherit those properties only when no more specific rules apply.

    Browsers have a default stylesheet that set the size of certain elements by default (heading tags for example) and to over-ride these you have to be more specific and apply your rules to those elements directly. That's the reason that Reset and normalise style sheets have been invented in order to start all browsers on a level playing field as they all have different defaults.

    Setting font-size to a div is probably not a good thing to do as you most likely won't want all the elements in a div to have that font-size except for special cases of limited content ( e.g most divs will contains headings, paragraphs, lists, form elements etc and you would not want then all to be the same size. Usually you would target the elements more specifically and set thee size of the heading tags and p elements etc directly).

    I usually set the body font-size of the page to the most commonly used font in that page which is usually the size for the readable text content and that saves a few rules as you then only need to define the differences but you still do need to take into account the browsers default stylesheet for certain elements.

    You have to imagine that the browsers stylesheet is sitting at the top of the page and so any rules in that stylesheet will affect your layout. Here is en example of a default stylesheet but browsers all differ on the finer details which is why most "resets" set up a standard base stylesheet to begin with.

  13. #13
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    North Carolina
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just had my "AH-HA!" moment. I finally figured it out after 2 days. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Learning this just changed my entire mood for the day. Ahh, the joys of learning. Many thanks to all of you for taking the time to assist me.


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
  •