CSS line-height

S

sachaburnett

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
 
D

dorayme

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.
 
C

Chris F.A. Johnson

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;
 
J

Jukka K. Korpela

dorayme said:
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.
 
D

dorayme

"Jukka K. Korpela said:
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...
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top