SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast thehung1724's Avatar
    Join Date
    Sep 2013
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Which the best way use line-height in CSS?

    I'm newbie in CSS and hardest pard (for me) that how to use line-height perfectly. How can I convert from px to em in line-height or how to combine them. Hope anyone give me some advices?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by thehung1724 View Post
    I'm newbie in CSS and hardest pard (for me) that how to use line-height perfectly. How can I convert from px to em in line-height or how to combine them. Hope anyone give me some advices?
    Hi,

    It all depends on what you are trying to do exactly as in most cases you don't have to do anything special as such.

    Line-height is the space between lines of text and you just set them to suit the design and the size of the text. I usually just set a "unitless" line-height on the body of 1.4 and that will cascade down into the page as required. A unitless line-height (as opposed to em or px) passes a scaling factor down to the children and thus maintains the 1.4 relationship for all sizes of text in the document (there may be browser variances but in most cases is fine).

    If you set a px line-height then you would usually base it on the size of the font and then add extra so that you have room around the text. e.g. if you have 14px high text you might want a 20px line-height.

    If you are using em then you would usually use something between 1.3em and 1.5em for good readability.

    Generally between 1.3 or 1.5 times the font size is a fair guess at a reasonable line height.

  3. #3
    SitePoint Enthusiast thehung1724's Avatar
    Join Date
    Sep 2013
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That mean I should set body line-height 1.4, dude? And how can I calculate line-height value?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by thehung1724 View Post
    That mean I should set body line-height 1.4, dude? And how can I calculate line-height value?
    If you set the body to line-height:1.4 (body{line-height:1.4}) then the value for the line-height will be 1.4 x whatever the default font-size is. Assuming a default of 16px (not guaranteed in the slightest as users may over-ride this) then the line height would be 1.4 x 16 = 22.4px which would most likely be rounded down to 24px.

    The bigger question is why you want to know this value? What problem are you trying to overcome?

    You don't specifically need to know the value. You either set line-height at the value you want and then you know what it is exactly, or you use a multiplier (1.4), or percentage value (140% ( which is equivalent to 1.4em)) and based on the font-size of the element concerned.

    If you have an example of where you are having a problem I might be able to give a more relevant answer to your problem.

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I always go back and forth depending on my site. Sometimes I like a px line height then the space of the p and the h1 are the same. If you use unitless line height them the h1 would have a larger space above and below it usually.

  6. #6
    SitePoint Enthusiast thehung1724's Avatar
    Join Date
    Sep 2013
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you set the body to line-height:1.4 (body{line-height:1.4}) then the value for the line-height will be 1.4 x whatever the default font-size is. Assuming a default of 16px (not guaranteed in the slightest as users may over-ride this) then the line height would be 1.4 x 16 = 22.4px which would most likely be rounded down to 24px.

    The bigger question is why you want to know this value? What problem are you trying to overcome?

    You don't specifically need to know the value. You either set line-height at the value you want and then you know what it is exactly, or you use a multiplier (1.4), or percentage value (140% ( which is equivalent to 1.4em)) and based on the font-size of the element concerned.

    If you have an example of where you are having a problem I might be able to give a more relevant answer to your problem.
    Thanks for information because i watch some videos and don't know how they can't calculate line-height. I hope i can use as well with your advice


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
  •