Skip to main content

Forums

This topic contains 3 replies, has 3 voices, and was last updated by  lrelia 5 years, 10 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #151688

    lrelia
    Participant
    line-height: 1.2

    Is it right? what does 1.2 mean?

    #151691

    jurotek
    Participant

    This reply has been reported for inappropriate content.

    1.2 x of font size (height), so if font size is 14px with line height of 1.2 that one line of text will be approximately 17px tall. For good readability I would use no less than 1.5 line height.

    #151693

    paulob
    Participant

    To expand on what was correctly said above:

    Unitless line-height (line-height:1.2) differs from line-height with units (line-height:1.2em etc) in that it is the “scaling factor of 1.2” that is passed down to children so a child will get 1.2 times the line-height of its own font-size.

    On the other hand a line-height with a unit is converted by the browser into a fixed pixel value and it is this pixel-value that gets handed down to the child even if the child has a smaller line-height (unless you re-define line-height for the child of course).

    As an example a parent with a font-size of 20px will get a line-height of 24px if line-height:1.2 was used. The same holds true if the parent was given a line-height of 1.2em. Both would get a line-height of 24px.

    However, if a child of those parents has a font-size: of 10px then the line-height will be 12px and 24px respectively. 12px where the parent has a unit-less line-height and 24px where the parent’s line-height was stated with a unit.

    It can therefore be seen that the difference can be considerable.

    Unit-less line-heights can lead to layouts that perform better as the relationship is maintained with the font-size of the children.

    #151758

    lrelia
    Participant

    Thanks a lot

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star