SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Font attribute

  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,529
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Font attribute

    What do these two lines mean??

    Code:
    	font: 100%/1.3 arial, helvetica, sans-serif;
    Code:
    	font: bold 14px/16px arial, helvetica, sans-serif;
    Thanks,


    Debbie

  2. #2
    SitePoint Zealot Gar onn's Avatar
    Join Date
    Feb 2011
    Location
    Belgium
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    font: bold 14px/16px arial, helvetica, sans-serif;

    means:
    font-size: 14px;
    line-height: 16px;

    note: some mail clients do NOT support this.

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,529
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Gar onn View Post
    font: bold 14px/16px arial, helvetica, sans-serif;

    means:
    font-size: 14px;
    line-height: 16px;

    note: some mail clients do NOT support this.
    So

    Code:
    font: 100%/1.3
    means...

    font-size: 100% (of base font wherever that must be set?!)
    line-height: 1.3 times the font-size

    Is that correct????

    Also, what exactly is the difference between line-height and using padding??



    Debbie

  4. #4
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,824
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    And in the first example, it's a font size of 100% and a line height of 1.3em

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,731
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    font-size: 100% (of base font wherever that must be set?!)
    actually, it means 100% of the parent element's font size... so be careful if you have nested styles.

    example:

    body { font-size:32px} /*ridiculously large for ease of math later on*/
    body > div { font: 100%/1.3 arial, helvetica, sans-serif;}
    .first { font: 75%/1.3 arial, helvetica, sans-serif;}
    .second{ font: 50%/1.3 arial, helvetica, sans-serif;}
    .second p{ font: 50%/1.3 arial, helvetica, sans-serif;}

    <body>
    this text is 32 px, as you expect.
    <div> this text is STILL 32 px, as you expect.
    <div class="first"> this text is 24px, as you still expect.
    <div class="second">this text... is 12px.. wait you didnt expect that did you
    <p> this text is 6px, were you expectin that?!?</p>
    </div></div><div>
    <div class="second">another class='second' but this time the text is 16px</div>
    </body>

    So math has to be applied.

    line-height and padding don't alter each other. think of line height as the rules on notebook paper. the space between the lines of text will vary in relation to the size of your line height. ... 1.0 = "college ruled", 2.0 ="regular" 3.0="pre-school"...

    the size of the line hight is PROPORTION to the size of the text. so line-height:2 is a space TWICE of what is set in font-size. another thing this allows you to do is set WHERE in the line the text sits. Using the notebook analogy again . if you have pre-school line-height (3.0) for example.. you could write directly on the line, just bellow the top of the previous line or center it. for this you use: vertical-align: [top, middle, bottom, baseline...and so forth]

    hope this rant has been enlightening for you.

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,529
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    actually, it means 100% of the parent element's font size... so be careful if you have nested styles.

    example:

    body { font-size:32px} /*ridiculously large for ease of math later on*/
    body > div { font: 100%/1.3 arial, helvetica, sans-serif;}
    .first { font: 75%/1.3 arial, helvetica, sans-serif;}
    .second{ font: 50%/1.3 arial, helvetica, sans-serif;}
    .second p{ font: 50%/1.3 arial, helvetica, sans-serif;}

    <body>
    this text is 32 px, as you expect.
    <div> this text is STILL 32 px, as you expect.
    <div class="first"> this text is 24px, as you still expect.
    <div class="second">this text... is 12px.. wait you didnt expect that did you
    <p> this text is 6px, were you expectin that?!?</p>
    </div></div><div>
    <div class="second">another class='second' but this time the text is 16px</div>
    </body>
    Why did the results come out as you describe above?


    So math has to be applied.

    line-height and padding don't alter each other. think of line height as the rules on notebook paper. the space between the lines of text will vary in relation to the size of your line height. ... 1.0 = "college ruled", 2.0 ="regular" 3.0="pre-school"...

    the size of the line hight is PROPORTION to the size of the text. so line-height:2 is a space TWICE of what is set in font-size. another thing this allows you to do is set WHERE in the line the text sits. Using the notebook analogy again . if you have pre-school line-height (3.0) for example.. you could write directly on the line, just bellow the top of the previous line or center it. for this you use: vertical-align: [top, middle, bottom, baseline...and so forth]

    hope this rant has been enlightening for you.
    Yes, thanks.


    Debbie

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Stevie D View Post
    And in the first example, it's a font size of 100% and a line height of 1.3em

    1.3 and 1.3 em are not the same things (but I guess you knew that)

    Although initially they have the same effect the 1.3 is a multiplier that is inherited into child elements. On the other hand 1.3em produces a computed line height that is applied to the child elements irrespective of the childrens font-size.

    If you had a smaller font in a nested element then then the unitless 1.3 line-height would ensure that the line-height maintains the correct proportion to that font-size. Whereas 1.3em on the parent produces a set line height that even the children will inherit.

    Unitless line heights.

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A nice graphic explanation, my favourites

    http://www.impressivewebs.com/css-fo...y-cheat-sheet/

  9. #9
    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
    Although initially they have the same effect the 1.3 is a multiplier that is inherited into child elements. On the other hand 1.3em produces a computed line height that is applied to the child elements irrespective of the childrens font-size.
    So there IS a difference? That might explain why I've found omitting the metric to be a completely useless train-wreck cross browser despite everyone else's wild claims that you can omit it.

    Though my rule of thumb remains state your metric -- it's only two characters, and ALWAYS restate your line-height if you change font-size... and NEVER trust the default line-height.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    So there IS a difference?
    Yes the scaling factor is passed to the child and not the computed line-height.

    That might explain why I've found omitting the metric to be a completely useless train-wreck cross browser despite everyone else's wild claims that you can omit it.

    Though my rule of thumb remains state your metric -- it's only two characters, and ALWAYS restate your line-height if you change font-size... and NEVER trust the default line-height.
    It depends how you work I suppose. If you take care with the line-height (as you do) then it doesn't matter what you use.

    The unitless line height was meant to maintain the relationship between nested font sizes and the line-height. If for example a div has a font-size of 24px and a line-height of 2em the a nested elements will all have a line height of 48px (even nested elements with very small font sizes will have a line height of 48px).

    On the other hand a unitless line passes down the scaling factor so that smaller nested font-sizes get smaller line-height to maintain the relationship.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    p {margin:0 0 1px;background:#fcc}
    .test1,.test2 {
        font-size:30px;
        line-height:2em;
        margin:0 0 25px;
    }
    .test2 {line-height:2}
    .smaller {font-size:10px;background:#f00}
    </style>
    </head>
    <body>
    <div class="test1">
        <p>This has a computed line-height of 60px</p>
        <p class="smaller">This smaller font also has a computed line height of 60px which looks odd</p>
        <p>This has a computed line-height of 60px</p>
    </div>
    <div class="test2">
        <p>This has a computed line-height of 60px</p>
        <p class="smaller">This smaller font also a computed line height of 20px which matches the text size</p>
        <p>This has a computed line-height of 60px</p>
    </div>
    </body>
    </html>
    But as you say if you set the line-height at the same times as the font-size then you don't need to worry about it.


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
  •