appropriate values for line-height

[Haines Brown]

I have a style for a list:

dl { line-height: 1; margin-bottom: 1em; }

But the W3C CSS validator says:

Line: 124 Context : dl

Invalid number : line-height Parse Error - [empty string]

Why is "1" invalid? What "empty string"?

--

Haines Brown, KB1GRM

[Els]

Haines Brown wrote:

I have a style for a list:

dl { line-height: 1; margin-bottom: 1em; }

But the W3C CSS validator says:

Line: 124 Context : dl

Invalid number : line-height Parse Error - [empty string]

Why is "1" invalid? What "empty string"?

It's an error in the validator - it thinks a unit is needed. If you
make it 1em instead of 1, it will stop complaining. According to the
specs, there is no need for the unit though:
http://www.w3.org/TR/CSS21/visudet.h...ef-line-height
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[Spartanicus]

Haines Brown <br****@teufel. hartford-hwp.comwrote:

>I have a style for a list:

dl { line-height: 1; margin-bottom: 1em; }

Rarely is it smart to alter the line-height, leave it alone.

--
Spartanicus

[Jukka K. Korpela]

Scripsit Els:

It's an error in the validator - it thinks a unit is needed. If you
make it 1em instead of 1, it will stop complaining.

But that would be a wrong move, since the meaning is different. The reason
is that for 1em, the computed value is inherited, so you run into problems
if you ever change font size inside the element. For a pure number, that
number is inherited, which is fine.

Setting line-height: 1 isn't fine, though. It means that there is no spacing
between lines, i.e. the height of line is the size (height) of the font,
which generally means that ascenders may touch descenders of the previous
line. Reasonable values for line-height are typically from 1.2 to 1.3 or a
little higher, depending on the x-height.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Stephen Poley]

On Wed, 01 Nov 2006 15:00:19 +0000, Spartanicus
<in*****@invali d.invalidwrote:

>Haines Brown <br****@teufel. hartford-hwp.comwrote:

>>I have a style for a list:

dl { line-height: 1; margin-bottom: 1em; }

Rarely is it smart to alter the line-height, leave it alone.

To be a bit more explicit: the most usual (sensible) reason for
adjusting line-height is to increase it to make subscripts and/or
superscripts more legible. Typically one would be looking at values of
1.4 and upwards. It's very rarely (never?) a good idea to set a value
smaller than that.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Jukka K. Korpela]

Scripsit Stephen Poley:

>Rarely is it smart to alter the line-height, leave it alone.

To be a bit more explicit:

It is wise to be explicit about line-height, since browsers often have
rather small default values, and CSS specifications suggest even smaller,
like 1.1. A value of 1.2 (which is roughly what browsers tend to use as the
default) is typically suitable for common serif fonts, whereas sans-serif
fonts call for 1.25 or 1.3 for readability.

the most usual (sensible) reason for
adjusting line-height is to increase it to make subscripts and/or
superscripts more legible. Typically one would be looking at values of
1.4 and upwards. It's very rarely (never?) a good idea to set a value
smaller than that.

For subscripts and superscripts, it's probably best to set their font size
sufficiently small (around 70%) and declare their font as Verdana. This is a
bit questionable in principle, but it tends to solve the basic problems with
subscripts and superscripts.

Setting font-size: 1.4 is _not_ enough for getting even spacing between
lines when Arial is used, for example.

So it's quite the opposite. It's almost always a good idea to set
line-height for body to something reasonable, like 1.25.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Els]

Jukka K. Korpela wrote:

Scripsit Els:

>It's an error in the validator - it thinks a unit is needed. If you
make it 1em instead of 1, it will stop complaining.

But that would be a wrong move, since the meaning is different. The reason
is that for 1em, the computed value is inherited, so you run into problems
if you ever change font size inside the element. For a pure number, that
number is inherited, which is fine.

I never knew that (never run into the problem), but you're right. It
is quite easily solved though, by setting the same line-height value
for such child elements. Means it's definitely not a good idea to use
on the body element, which is good to know, thanks :-)

Setting line-height: 1 isn't fine, though. It means that there is no spacing
between lines, i.e. the height of line is the size (height) of the font,
which generally means that ascenders may touch descenders of the previous
line. Reasonable values for line-height are typically from 1.2 to 1.3 or a
little higher, depending on the x-height.

All true, but it does depend on what it's used for. I can imagine that
for a single word or set of words, it may be desirable to set a very
low line-height. Not for paragraphs, but headings for example, or
other stuff that doesn't wrap.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[Jukka K. Korpela]

Scripsit Els:

>>It's an error in the validator - it thinks a unit is needed. If you
make it 1em instead of 1, it will stop complaining.

But that would be a wrong move, since the meaning is different. The
reason is that for 1em, the computed value is inherited, so you run
into problems if you ever change font size inside the element. For a
pure number, that number is inherited, which is fine.

I never knew that (never run into the problem), but you're right. It
is quite easily solved though, by setting the same line-height value
for such child elements.

It is more easily solved by using a pure number. You can write
* { line-height: 1.3em; }
but it is more natural to write
body { line-height: 1.3; }

I can imagine that
for a single word or set of words, it may be desirable to set a very
low line-height. Not for paragraphs, but headings for example, or
other stuff that doesn't wrap.

How can you know that it doesn't wrap? Would you assume some minimum canvas
width?

For a heading, the key issue is vertical margins. Their effect is generally
much greater than that of line-height. Besides, if you use "a very low line
height", you take unnecessary risks. If you set it to 1, for example, some
characters may actually extend above or below the element's box. The font
size is just _roughly_ equal to the distance from the highest ascender to
the lowest descender.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Els]

Jukka K. Korpela wrote:

Scripsit Els:

>>>It's an error in the validator - it thinks a unit is needed. If you
make it 1em instead of 1, it will stop complaining.

But that would be a wrong move, since the meaning is different. The
reason is that for 1em, the computed value is inherited, so you run
into problems if you ever change font size inside the element. For a
pure number, that number is inherited, which is fine.

I never knew that (never run into the problem), but you're right. It
is quite easily solved though, by setting the same line-height value
for such child elements.

It is more easily solved by using a pure number. You can write
* { line-height: 1.3em; }
but it is more natural to write
body { line-height: 1.3; }

>I can imagine that
for a single word or set of words, it may be desirable to set a very
low line-height. Not for paragraphs, but headings for example, or
other stuff that doesn't wrap.

How can you know that it doesn't wrap? Would you assume some minimum canvas
width?

No, but there are still things that don't wrap.
One word lines for instance, or lines with just
a&nbsp;couple&n bsp;of&nbsp;wor ds glued together for whatever reason.
I'm not saying that it is common, or that it is probable, just that it
is possible.

For a heading, the key issue is vertical margins. Their effect is generally
much greater than that of line-height. Besides, if you use "a very low line
height", you take unnecessary risks. If you set it to 1, for example, some
characters may actually extend above or below the element's box. The font
size is just _roughly_ equal to the distance from the highest ascender to
the lowest descender.

Agree with all of that, just saying that I can still think of
situations where that is not an issue, and it can be desirable to set
a low line-height. Don't worry about it though, I still know that less
than 1.2 is not good for *most* situations :-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[Felix Miata]

On 2006/11/01 21:42 (GMT+0100) Stephen Poley apparently typed:

On Wed, 01 Nov 2006 15:00:19 +0000, Spartanicus wrote:

>>Rarely is it smart to alter the line-height, leave it alone.

I used to think the same, but not any more.

To be a bit more explicit: the most usual (sensible) reason for
adjusting line-height is to increase it to make subscripts and/or
superscripts more legible. Typically one would be looking at values of
1.4 and upwards. It's very rarely (never?) a good idea to set a value
smaller than that.

I find anything significantly more than "normal" (usually 1.1-1.2)
line-height to be rather annoying most of the time that excessive
line-lengths are not employed. My default user stylesheet includes the
following:

html>body {font-size: medium !important; line-height: normal !important;}

This cuts down a bit on the annoyance, but not nearly as much as I'd
like due to pervasive iditis and classitis and repeated font
specification for virtually every type of element.

All that said, if the amount of space text takes up is an important part
of a design, line-height really should be explicitly set. Various fonts
have their own line-heights, as different font systems have different
ways of interpreting them. You can't expect your first font family
choice to have the same as the actual font used by your visitor,
particularly if the relative ages of the fonts you specify aren't
similar. Newer fonts tend to be unicode types, which generally provide
more available height for their diacritics than older versions of common
M$ fonts. http://mrmazda.no-ip.com/auth/Font/f...ansuni-lh.html
provides a way to see a little of this.
--
"Rejoice and be glad, because great is your reward in heaven."
Matthew 5:12 NIV

Team OS/2 ** Reg. Linux User #211409

Felix Miata *** http://mrmazda.no-ip.com/