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*****@invalid.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&nbsp;of&nbsp;words 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/

[Jukka K. Korpela]

Scripsit Felix Miata:

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.

According to typographers, the line height should be selected according to
the properties (especially x height) of the font and the line length and the
horizontal margins in a balanced manner. This is an impossible equation in
web authoring, since users or their browsers may override anything we say in
CSS, e.g. override our font-family setting but nothing else. Everything is a
compomise then, and we should aim at something _reasonable_.

Too small line height reduces readability, whereas too large line height
(within reasonable limits) is mostly just an esthetic matter. Thus, I would
take my chances in setting line-height to something around 1.25 to 1.3 if I
set font-family to Arial, for example. Maybe we shouldn't set the font
family at all, but most authors do.

My default user stylesheet includes the
following:

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

It's your privilege to put anything you like in your user style sheet, but
that's a different issue. I find it odd, though, to enforce values like
medium and normal there. If you think that your browser's current
interpretations for them are really the best for you, why don't you use the
physical values in pixels or points?

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.

So why don't you set
* { line-height: normal !important; }
if that's what you want? The font size issue is different, but you could set
the font size of _all_ elements too.

From the authoring point of view, though, the point is that most users don't
set line height and have no idea of even being able to do it. So you should
set it to a value that matches your other settings and common defaults in
browsing.

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

[Stan Brown]

Wed, 1 Nov 2006 19:49:26 +0200 from Jukka K. Korpela
<jk******@cs.tut.fi>:

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.

And the underlining of links may disappear depending on ascenders in
the following line.

Example:
http://www.tc3.edu/instruct/sbrown/stat50/sked.htm
and in Print Preview look at the entry for Nov 28.

That's my page, as it happens. I've known for some time that I need
to fix the line-height in the print style sheet, but I keep
forgetting. Now I have an excuse: I have to leave the example there
for a few days. :-)

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

[Stan Brown]

Sun, 5 Nov 2006 15:41:00 -0500 from Stan Brown
<th************@fastmail.fm>:

Wed, 1 Nov 2006 19:49:26 +0200 from Jukka K. Korpela
<jk******@cs.tut.fi>:

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.

And the underlining of links may disappear depending on ascenders in
the following line.

Example:
http://www.tc3.edu/instruct/sbrown/stat50/sked.htm
and in Print Preview look at the entry for Nov 28.

That's my page, as it happens. I've known for some time that I need
to fix the line-height in the print style sheet, but I keep
forgetting. Now I have an excuse: I have to leave the example there
for a few days. :-)

By the bye, my CSS specifies line-height:normal, and that's obviously
not large enough.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

[Felix Miata]

On 2006/11/03 07:19 (GMT+0200) Jukka K. Korpela apparently typed:

Scripsit Felix Miata:

>My default user stylesheet includes the
following:

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

I find it odd, though, to enforce values like
medium and normal there. If you think that your browser's current
interpretations for them are really the best for you, why don't you use the
physical values in pixels or points?

When my eyes are tired and I have to boost the default to get through
the rest of the day, the line-height automatically follows right along.
Also, I somethings put that same elementary stylesheet on the computers
of others, and would hardly expect most users I've provided it to to
remember anything about where it is, much less how or when they might
need to change it.

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

So why don't you set
* { line-height: normal !important; }
if that's what you want?

You should try it sometime and see what happens on the gazillion web
sites that set container heights in px or use absolute positioning.

The font size issue is different, but you could set
the font size of _all_ elements too.

Iditis and classitis make such simplicity minimally effective. I used to
do that, but simply turning off site styles tends to be easier and more
effective.
--
"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/