CSS line-height

Discussion in 'HTML' started by sachaburnett@yahoo.com, Sep 11, 2006.

  1. Guest

    Hi all,

    I would like to know what is the most consistent way to display
    additional space in between lines of text considering all the different
    browsers, screen sizes, resolutions, etc...

    Is it better to specify a length value such as:

    line-height: 18px;

    or a percentage such as:

    line-height: 150%;

    Thanks!

    SB
     
    , Sep 11, 2006
    #1
    1. Advertising

  2. dorayme Guest

    In article
    <>,
    wrote:

    > Hi all,
    >
    > I would like to know what is the most consistent way to display
    > additional space in between lines of text considering all the different
    > browsers, screen sizes, resolutions, etc...
    >
    > Is it better to specify a length value such as:
    >
    > line-height: 18px;
    >
    > or a percentage such as:
    >
    > line-height: 150%;


    If you are going to use line-height (make sure you need to), use
    em.

    --
    dorayme
     
    dorayme, Sep 11, 2006
    #2
    1. Advertising

  3. On 2006-09-10, wrote:
    > Hi all,
    >
    > I would like to know what is the most consistent way to display
    > additional space in between lines of text considering all the different
    > browsers, screen sizes, resolutions, etc...
    >
    > Is it better to specify a length value such as:
    >
    > line-height: 18px;


    If you use fixed px sizes, you may not have enough room for a
    reader's font size (you cannot know what it is).

    > or a percentage such as:
    >
    > line-height: 150%;


    line-height: 1.5;

    --
    Chris F.A. Johnson <http://cfaj.freeshell.org>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
     
    Chris F.A. Johnson, Sep 11, 2006
    #3
  4. dorayme <> scripsit:

    > If you are going to use line-height (make sure you need to), use
    > em.


    No, it is best to use just numbers. The reason is that the line-height
    property is rather special. If you declare, say, line-height: 1.5 (there's
    seldom a reason for such a large value, but let's pretend there is, like the
    original question did), then the _declared value_ 1.5 gets inherited. This
    means that if there is an element with a different font size, the
    line-height value gets adapted to the font size. If you declare line-height:
    1.5em (or 150%), then the _computed value_ gets inherited.

    Note: This might look like a non-issue since you don't change the font size.
    But you might, in a later version, without remembering to consider the
    line-height impact, or someone else who maintains the page next year might
    do so. Besides, even browser and user style sheets may change font size.

    Actually authors _should_ generally use line-height. The reason is that
    browser defaults vary rather unpredictably and are generally too small,
    especially for fonts with large x height. Something like
    body { line-height: 1.25; }
    might be suitable in a typical case. If you think of using Verdana, stop
    that, but if you don't, line-height: 1.3 is not too much.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Sep 11, 2006
    #4
  5. dorayme Guest

    In article <DE7Ng.9357$>,
    "Jukka K. Korpela" <> wrote:

    > dorayme <> scripsit:
    >
    > > If you are going to use line-height (make sure you need to), use
    > > em.

    >
    > No, it is best to use just numbers. The reason is that the line-height
    > property is rather special. If you declare, say, line-height: 1.5 (there's
    > seldom a reason for such a large value, but let's pretend there is, like the
    > original question did), then the _declared value_ 1.5 gets inherited. This
    > means that if there is an element with a different font size, the
    > line-height value gets adapted to the font size. If you declare line-height:
    > 1.5em (or 150%), then the _computed value_ gets inherited.


    Oooee! This is a subtlety I never knew. Right. Now I do. And will
    read up on this sort of thing a bit more. I am sure that I learn
    at least about five new things on alt.html a week...

    --
    dorayme
     
    dorayme, Sep 11, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    0
    Views:
    570
  2. Wotney
    Replies:
    1
    Views:
    540
    Flinky Wisty Pomm
    Oct 25, 2006
  3. tshad
    Replies:
    1
    Views:
    1,710
    bruce barker
    Mar 8, 2007
  4. Bernd Meier
    Replies:
    6
    Views:
    529
    GTalbot
    Jan 14, 2008
  5. samer
    Replies:
    3
    Views:
    440
    Gregory A. Beamer
    Sep 28, 2009
Loading...

Share This Page