Internet Explorer Developer Center >
> 
> 
CSS Font Sizes as Percentages.

Answered CSS Font Sizes as Percentages.

  • Friday, February 17, 2012 6:02 AM
     
     
    Sign In to Vote
    0

    Hello Forum,

    I'm developing a web interface which will mainly be used throught Internet Explorer 9 (and IE 10 when it comes out), and screens of all sizes. The specification states that font sizes should be defined as a percentage (%). That is fine. In doing so I've seen an inconsistency which I would like to see if my work around is correct, or whether I am missing something. OK here I go;

    The <body> font is 100%; body {...; font-size: 100%;...;}. Which is equivalent to 16px.

    A <h2> font is 87.5%; h2 {font-size: 87.5%;}. Which is equivalent to 14px.

    Within the <h2>, I have a <span> or <em> such that 1 character is larger than the rest of the word/title. CSS definition, h2 span {font-size: 140%;}. Which is equivalent to 22px. The issue being that if I have a larger percentage value for a font, than the parent, the larger value doen't size to its' true or mapped size.

    Examples:

    body {font-size:100%;}      h2 {font-size: 87.5%;}      h2 span {font-size: 140%;}

    <h2><span>T</span>his Is an <span>E</span>xample</h2>

    In this example the T and E (within the span) does not size to the equivalent of 22px, that is OK but its' nowhere near it, still larger than the h2 text.

    <span>T</span><h2>his Is an <span>E</span>xample</h2>

    In this case the T is the equivalent size of 22px.

    To increase the size of the T and E, I re-define the font-size as 160% (~26px) to get it as ~22px (140%). I guess my question is, is there anyway to stop the parent container affecting its' child regarding font sizes expressed as percentages? Or is my best bet to increase the %-size of the child element to attain my desired result? Or is there something I am missing?

    Using: html5, css3

    Thanks and regards,

    BotRot


    • Edited by Cods Wallop Friday, February 17, 2012 6:04 AM Appearance
    •  
     

All Replies

  • Friday, February 17, 2012 7:39 PM
     
     Answered
    Sign In to Vote
    1

    Hi,

    style rules are inherited, browsers differ in the default style rules that are applied to elemens... use a reset.css.

    the standard design pattern is to use a <div> as the first child of the body (usually called 'wrapper' or 'pagewrapper')

    The default font size is 16 pt  (View>Text Size>Meduim)

    / copy reset.css to the top of your first stylesheet */

    #wrapper{font-size:100.1%} /* 100.1% is required for the js change fornt size functions  to allow 10% increments without rounding errors*/

    h1.thick{font-size:200%; line-height:3em} or {font-size:2em} "*/ add a line-height rule to accommodate .extrabig */

    em.extrabig, span .extrabig {font-size:250%} or  {font-size:2.5em}

    em tags are depreciated... use spans instead, you can still use them in your styleheets so you can reuse them in legacy web sites.

    the common design pattern for a document layout is

    <hn class="thick"><span class="extrabig">Y</span>our paragraph header</hn>

    <p> your paragraph text</p>

    viz.... text nodes inherit the font-size of the body...place text within a <p> or <span> to impart the inherited font-size of p or spans.

    further reading: https://www.google.com/search?q=typology%20of%20web%20design

    Rob^_^


     
  • Tuesday, February 21, 2012 4:16 PM
     
     
    Sign In to Vote
    1

    On Fri, 17 Feb 2012 19:39:20 +0000, IECUSTOMIZER [MVP] wrote:

    em tags are depreciated... use spans instead, you can still use them in your styleheets so you can reuse them in legacy web sites.

    W3schools says that em is not deprecated.

    I view em as a semantic tag (it indicates emphasized text, without
    explicitly requiring it to be emphasized in any particular way), which
    can have CSS applied to it, both for default styling and with classes,
    IDs, languages, etc., to fine-tune the styling for particular instances.

    Span is not semantic; all it says is that the enclosed text/html is a
    chunk that you want to apply specified styles to. It gives no indication
    of why you wanted the presentation that way, which makes it more
    difficult to determine the best way to update it, if the original
    designer didn't use semantically-oriented class names or IDs.

    -- Jeff Zeitlin