1.4.8: Visual Presentation - line spacing (leading) clarification

[patrickhlauke]

One of the points of 1.4.8 Visual Presentation states:

• Line spacing (leading) is at least space-and-a-half within paragraphs ...

In the understanding document https://w3c.github.io/wcag/understanding/visual-presentation.html it expands this further to

By space and a half within paragraphs we mean that top of one line is 150% further from the top of the line below it than would be true when the text is 'single spaced' (the default spacing for the font). ...

Now, in CSS, the closest property to influence the spacing of lines is line-height. Line height is the height of the font itself, plus the leading (half-leading at the top and bottom).

The default spacing for the font, when you just don't touch line-height, or have it set to line-height: normal, will vary for each font - it will be whatever the user agent deems to be the ideal default line-height (top and bottom half-leading) based on the font metrics (supposedly anyway - see https://www.w3.org/TR/css-inline-3/#line-height-property which is still in draft).

Anecdotally, from some testing, for the standard Times New Roman in Windows (at least on my machine), Chrome makes line-height: normal about equivalent to line-height: 1.14. So, when 1.4.8 asks for 150% further space, does this mean that for that particular font, an author must define a minimum line-height: 1.71 (1.14 * 1.5 = 1.71)? And for each font used, must authors first try and guess what the actual line-height: normal equates to, to be able to then do the 150% of it?

This would further be complicated by the fact that authors cannot guarantee which exact font will be used on a user's machine in the end - with font substitutions, possibility that a web font won't load, etc (and even differences in metrics across different versions/cuts of the same font with nominally the same name).

Or, for simplicity and consistency, are we treating line-height: 1 to be the default spacing for the font, meaning that to pass this an author must define a minimum of line-height: 1.5? (I've seen this interpretation being used on a few AAA audits, anyway)

This latter interpretation would also gel with what I've seen in a few of the "text-spacing bookmarklets" for testing 1.4.12 Text spacing https://w3c.github.io/wcag/understanding/text-spacing - these generally set line-height: 1.5.

If this is indeed the case, the example pictures in https://w3c.github.io/wcag/understanding/visual-presentation probably could do with being amended, as they seem to not use line-height: 1 as their basis, but rather use whatever the line-height: auto is, and then eyeballed (?) the space and a half and double space based on that actual rendered size (as a line-height: 1 would be slightly tighter in the left-most example, and line-height: 1.5 and line-height: 2 would also be slightly tighter together)

Made a live example in codepen https://codepen.io/patrickhlauke/pen/oNoKrdw using line-height: normal and then the exact line-height: 1 / line-height: 1.5 / line-height: 2. It's subtle, but I think it is ever so slightly tighter than the example image in 1.4.8 - and you should be able to see the subtle difference between line-height: normal and line-height: 1 (and this will vary by actual font defined/used).

[patrickhlauke]

Depending on the answer to this, there might need to be a small note/clarification in the understanding (particularly around what default spacing for the font, as the anchor for the other 1.5x calculation, actually means in practice), and possibly a technique with the live example code.

[awkawk]

My understanding is that the default spacing of a font is not related to the determination of what space and a half line spacing means. We have a technique (CSS21) that shows that line-spacing: 150% on paragraph text is sufficient as this is 1.5x line-spacing:100% - as you point out, the default for a given font might be to have a line-height that is some value other than 100%. If you choose a font with a default line height of 1.5/150% or more then this SC can be tested just by looking at the page.

I do think that the "(the default spacing for the font)" is confusing and we should remove that.

[patrickhlauke]

probably worth then also rewriting the understanding bit to be more specific / relating it to the font-size (1em) rather than the (variable term) default spacing. so having some (re)definition of the normative wording (which we're not touching here) "Line spacing (leading) is at least space-and-a-half within paragraphs" to clarify it means that the line height (height of the text plus leading) is 150% the height of the text (these are all admittedly still vague wordings, as things like x-height and em size etc vary between fonts too), i.e. where 1em is the height of the text, then the line-height needs to be at least 1.5.

[awkawk]

@patrickhlauke I don't think that 1em works because the 1em measurement is the height of the capital M but the baseline to baseline measurement represents the line-height and that varies by font also.

[patrickhlauke]

If you choose a font with a default line height of 1.5/150% or more then this SC can be tested just by looking at the page.

so it wouldn't necessarily be a default "line height" in the CSS sense, but just the way the font metrics shake out? it would be reported as having line-height: normal or even line-height: 1em, but by virtue of how the font itself is constructed it has sufficient built-in leading? that starts getting confusing again in terms of testability / authors not being able to guarantee which actual font is used on the user's system in the end.

so probably best to talk more specifically about cap height or similar (to borrow the graph from wikipedia here)

...and then leaving it as an exercise for the reader to work out, maybe even a bit subjectively/eyeballing it, if the leading is 0.5 the cap height

[patrickhlauke]

@patrickhlauke I don't think that 1em works because the 1em measurement is the height of the capital M but the baseline to baseline measurement represents the line-height and that varies by font also.

ok, but we need to ideally anchor this somewhere. baseline to baseline must be 1.5 times the em height, i.e. leading must be 0.5 of the em height?

keeping in mind also that 1em in CSS / for a font is not necessarily the typographic em as in the cap height, at least not precisely. and indeed when you're setting line-height: 1em you're not butting up the baselines to be 1 typographic em apart, as it still accounts for ascenders and descenders. if you look at the screenshot here of my codepen, even with line-height: 1 (which is 1em) the baseline-to-baseline distance is more than a capital M...

as everything can be variable (depending on how the font was constructed/how accurate its reported metrics were), it may make sense to handwave it and say outright that our assumption is that 1em is the "M"/cap height, and that the line-height must be a minimum of 1.5em, and leaving it at that? (in a note) if an author wants to make absolutely sure that they pass this part of the SC, then they'd be advised to explicitly set line-height: 1.5 or more in their CSS, to account for the fact that some font substitutions/browser heuristics might end up with a default line-height: normal that's below that. unless they can guarantee that their specific font will be used, and that THAT font is always given an ample-enough default line height by the browsers, in all conditions.

(again thinking here of some kind of note that hints at the wooliness that can potentially happen, and advises authors to explicitly set the line height themselves rather than relying on whatever the UA decides is the default)

[patrickhlauke]

i guess in the end, simply removing (the default spacing for the font) may be sufficient (as it removes the explicit mention of default which can vary by browser, operating system, user agent, actual font used, the font's metrics) and anchors the 150% on "when the text is 'single spaced' " ... but that would then still fail to define exactly what that means in practice (so again, anchored on a non-defined and variable measure). perhaps then in https://w3c.github.io/wcag/techniques/css/C21 it could do with a note explaining something along the lines of "by 'single spaced' we mean text that has a line-height: 100% (which may be different from line-height: normal that browsers will default to, which can vary across browsers/fonts, so can't be relied on as a basis for measurement). given that, using line-height: 150% - will get you space-and-a-half, which will pass this part of the criterion."

[patrickhlauke]

looking over https://www.w3.org/TR/CSS2/visudet.html#line-height

normal Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as . We recommend a used value for 'normal' between 1.0 to 1.2. The computed value is 'normal'. [...]

number The used value of the property is this number multiplied by the element's font size. Negative values are illegal. The computed value is the same as the specified value.

percentage The computed value of the property is this percentage multiplied by the element's computed font size. Negative values are illegal.

so perhaps the fudge/simple way to sidestep all my circular thoughts about line-height already including some leading, how 1em doesn't really relate to "M" height, etc ... would be to anchor the definition of single spaced to the font size (which in itself is a vague term, but at least one that authors can understand/relate to)

By space and a half within paragraphs we mean that top of one line is 150% further from the top of the line below it than would be true when the text is 'single spaced' (where the distance between the top of one line and the top of the following line corresponds to the font size)

[patrickhlauke]

ok, made a fairly boiled-down PR https://github.com/w3c/wcag/pull/2262 that should ideally correct/clarify this (Without getting into all the weeds above about what user agents do by default if you don't specify a line height in CSS etc)

[patrickhlauke]

some more discussion/thoughts on the PR comments, but I think a rather fundamental aspect (copying this back over here):

note that, fundamentally, I also think the normative text of the SC is wrong in how it uses the term "Line spacing (leading)", because it's not saying the leading per se (i.e. the empty space between lines) needs to be a space-and-a-half (as that would equate to line-height: 250% (100% for the text itself, 150% for the leading), but that the "Line height" needs to be 1.5 times the regular font size (100% for the font itself, and leading effectively 50% of the font size)... not going to touch the normative side here. but that is certainly the root cause of the weird confusion ... and only the fact that this is AAA, so not revisited all that often by authors/auditors, has masked this problem for so long.

otherwise, the normative text should really be changed from

Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.

to

Line height (including leading) is at least space-and-a-half within paragraphs, and paragraph spacing is also at least space-and-a-half.

if the SC indeed intended to mean that leading needs to be 150% (leading to a line height of 250% altogether), then the images/examples provided in the understanding are wrong, as is technique C21 https://www.w3.org/WAI/WCAG21/Techniques/css/C21 (as then that should set line-height: 2.5 rather than line-height: 1.5)

[patrickhlauke]

Currently, in the examples for the understanding, it shows this

which seems to be (though i may well be wrong, as just eyeballing it) an example of a line height of about a space and a half (or just slightly over?), not an example of leading set to space and a half

for comparison, a screenshot of my live codepen https://codepen.io/patrickhlauke/pen/oNoKrdw

[patrickhlauke]

The answer here may even be that because line-height in CSS isn't actually very clearly related to just leading, it's all a lot more dependent on the actual font used (with all the problems this entails due to the variability of not knowing which exact font will actuall display on the user's machine/user agent), and that line-height: 1.5 per se doesn't guarantee passing this SC at all, but requires actual "set it to something, get the ruler out, try to measure the actual leading" assessment (as I can see that in technique C21 in the test part it does start to handwave between 1.5 and 2)

as i've seen folks take the idea that line-height: 150% is sufficient to pass this SC - particularly since example 2 includes Setting a class to 1.5 line height (space-and-a-half line spacing) - this probably then needs to be stressed/clarified a lot more if that's the case.

[patrickhlauke]

probably worth discussing a bit further here, rather than being ready for a survey...

[patrickhlauke]

further language oddity (in the understanding document) that is worth somehow ironing out in all this:

Line spacing (leading) is at least space-and-a-half within paragraphs

versus (emphasis mine)

By space and a half within paragraphs we mean that top of one line is *150% further* from the top of the line below it than would be true when the text is 'single spaced'

150% further means 250%. it's either "50% further", or that the distance is "150% (of the original value)"

[Myndex]

This SC is unfortunately not well conceived, as noted, the defined leading of a font, and relative to the font's x-height, varies per font family, as does tracking and kerning (letter spacing). Therefore, setting a guideline based on an abstracted value is less than ideal.

What would be ideal is to define spacing based on the x-height. Also, this SC does not allow for or give credit to the use of an indent or combination indent + vertical space

Paragraph spacing

As for using line-height for spacing in between paragraphs, that is inappropriate. Line-height should only be set for the full block of text, trying to use a <span> to set line-height for one line to make a paragraph space can result in reflow problems.

The best way, as far as consistency is:

p {margin-bottom: 0.75em;}
` p:lastChild {margin-bottom: 0.25em;} Or whatever is needed after the last paragraph.

All that said

line-height: is in "essentially" in em (but with the instance font if em is not added), so line-height: 1; is the same length as the instance font size, i.e. 16px for a 16px font. This means with line-height: 1; that a paragraph spacing of margin-bottom: 0.5em; would be 150%.

But that is also too tight. A good line-height is 1.33 to 1.45, depending on the font (Line-height: should be set about 2.75 to 3.25 times the x-height for body text.)

Whatever the line-height is, divide it in half, and that is the margin-bottom: value in em which then equals 150% of the line height.

So for line-height 1.33, the margin-bottom should be 0.67em. For line height of 1.45, the margin bottom would be 0.725em, to equal 150%.

By itself, a paragraph space with no indenting, 150% is reasonable, though indenting is valid, and if indenting then less vertical spacing is needed. Personally, I don't like indent only—it's often that way in print where saving paper is a key motivation. But indent 5 spaces with a 125% space could be reasonable, depending on other characteristics.

[scottkellum]

For best readability line-height increases with the number of characters per line. This helps with tracking as people read. Headlines at a large font size also have fewer characters per line, therefore tracking is less of a problem and a line height closer to 1 can be used. It can be difficult to keep track of what line you are on with very wide paragraphs of small text making a taller line-height, closer to 1.5 helpful for tracking.

Edit: here is some additional context: https://tbrown.org/notes/2012/02/03/molten-leading-or-fluid-line-height/

Here is a quick demo: https://codepen.io/scottkellum/pen/rNvXJaO

[patrickhlauke]

dredging this topic up again ... any more thoughts on this? I know it's not urgent, but would be good to see if there's any more clarity that can be brought to the understanding document

[Myndex]

dredging this topic up again ... any more thoughts on this? I know it's not urgent, but would be good to see if there's any more clarity that can be brought to the understanding document

Hi Patrick @patrickhlauke,

For writing systems with mixed case, the line height for body text should be relative to the x-height. Glyph characteristics and the font design/font metrics are still a consideration, as is the average text line length in a column of body-text, and that column's padding, etc., all play a role.

As Scott pointed out above, other use cases such as headings/headlines may work better with different leadings. All this makes a reasonable, normative guideline more challenging. If we introduce use-cases (APCA Readability Criterion: Use Cases), then we can offer better guidance.

At a minimum:

1) Leading is set relative to the common line character size. For mixed-case, this is the x-height. If the text is set in all caps, then it would be the cap height.

2) Block use/use-case/density:

Click to expand on density & use-case

. "Text density" is the next generally applicable consideration, this being the total number of characters in a given container area, including padding. Smaller text has a higher density and therefore needs more leading. Large headings have a lower density and need less leading. Longer line lengths need more leading than shorter lines (as in number of characters). A column with an average of 35 characters per line needs less leading than block widths with an average of 80 characters per line. This theory probably extends to condensed fonts needing more leading than expanded fonts, and thin weight fonts needing more than bold fonts. The actual impact on readability for these glyph characteristics **_vs leading_** is not well defined in existing literature that I've seen. Use-case could be a useful way to indicate "text density" for guideline purposes. For instance, we could say that: - **body-text** requires 3 times the x-height for leading, and - **_other_** **fluent text** requires a baseline-to-baseline distance that is set no less than the smallest of any one of the following: - the font's built-in leading, - 2 times the x-height - 1.33 times the cap height - A CSS value of {line-height: 1} ^^^^^^^^^^^^^^^^

ex marks the spot

The line-height property, when unit-less, is based on em. However, a unit type can be added, and for our purposes, using the ex unit is particularly useful, as ex is (supposed to be) the font's rendered x-height.

p {line-height: 3ex}

Here, the line-height is set to three times the x-height. A typical font will have it's built-in leading at 2.25 times the x-height. For web content, 2.25ex is probably insufficient for body text, but fine for headings.

2.75ex to 3ex is probably a better minimum line-height: for body text.

ex-amples

I have a page full of font size and spacing examples for many different fonts. The leading using ex for body-text blocks is on panels four thru seven:

myndex.com/WEB/xheightExample

[patrickhlauke]

to be clear: this clarification here needs to be within the context of the (unchangeable) normative wording of the SC. this is not about finding better guidelines/advice, but clarifying what we're working with right now to provide clarity on what was originally meant. we're not workshopping better normative guidelines.

[Myndex]

to be clear: this clarification here needs to be within the context of the (unchangeable) normative wording of the SC.

Understood, my point being that the current SC is somewhat meaningless relative to the technology as it exists or lacking in evidentiary support, for the reasons I and others have stated in this thread.

this is not about finding better guidelines/advice, but clarifying what we're working with right now to provide clarity on what was originally meant.

For that your initial query answers itself:

By space and a half within paragraphs we mean that top of one line is 150% further from the top of the line below it than would be true when the text is 'single spaced' (the default spacing for the font)

This says specifically that it should be 150% of the default baseline-to-baseline distance per the default leading, which is usually about 1.1em to 1.25em, or thereabouts, and varies per font.

CSS does not provide a metric other than "normal" that references the font's built in leading, i.e. the "default spacing"(sic) for the font. Therefore a polyfill would be needed to first determine the font's default leading, etc.

On this point, other advice such as at Mozilla is to set p{line-height:1.5;}

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

But the "original intent" of the SC might most simply be addressed with p{line-height:1.8;}

Setting line-height to 1.8 is effectively similar to the "original intent" of the SC.

The SC could clarify with: "for many fonts, this can be achieved by setting line-height: to the unitless value of 1.8"

Bigger Confusion

A bigger confusion though is the next line in the SC Understanding, which reads:

By Paragraph spacing that is 1.5 times larger than the line spacing we mean that the spacing from the top of the last line of 1 paragraph is 250% farther from the Top of the first line of the next paragraph (i.e., that there is a blank line between the two paragraphs that is 150% of the single space blank line).

IMO that jumble is challenging to grok. If p{line-height:1.8;} then paragraph spacing (baselines) per this SC would be approximately 2.7em, subtract 1em for the font, so:

p {
  font-size: 1em;
  line-height: 1.8;
  padding-bottom: 1.7em
}

p:last-child {
  padding-bottom: 0.5em
}

This CSS block clarifies the intent to all, with no ambiguity, and with the bonus that it is using the available technology as it exists.

An alternate for line-height: 1.5:

p {
  font-size: 1em;
  line-height: 1.5;
  padding-bottom: 1.25em
}

p:last-child {
  padding-bottom: 0.5em
}

we're not workshopping better normative guidelines.

Well, I am

And I would submit that as an open standards organization, publicly viewable objections to existing standards, or suggestions of improved best practices, or the realities of science and math, should not be obstructed, suppressed, or censored, just because they don't align with existing beliefs.

Thank you for reading.

[patrickhlauke]

I would submit that as an open standards organization, publicly viewable objections to existing standards, or suggestions of improved best practices, or the realities of science and math, should not be obstructed, suppressed, or censored, just because they don't align with existing beliefs.

We can discuss how things should be improved in the next version of the specification ... in a separate thread. On a thread about tweaking the documentation for the current standard (which can't be normatively changed), it's really not that helpful.

There are many aspects in WCAG 2.x which are flawed or outright broken. But that is the spec that is currently referenced by requirements and legislations, so we have to work within those confines.

We've been over this already in the contrast ratio discussions...

[Myndex]

Hi @patrickhlauke

Yes, I realize that some times what I post is not taken as intended. Sometimes, this is because I myself misinterpreted the focal point of the thread. This concerns me, and seems to be the case for some posts here.

Other times, I "bury my lead" under a mountain of foundational material, or the relevance of the post is not clear, or using tangential language. Perhaps that's the case in my last post immediately above, which was presenting a practical means of applying the original intent.

End of the rainbow

In an attempt to be helpful, I tested a random assortment of common and less common fonts. line-height:normal; is usually very close to line-height:1.2; for most fonts, of course there are fonts with more or less leading.

If line-height:1.2 equals normal then line-height:1.85 is 1.5x normal.

Since, normal varies per font family, we can't know how to be exactly 1.5x of normal. On the other hand, if we use line-height:1.85, it will provide a generally consistent line spacing, virtually equivalent to a standard font at 1.5x normal.

One could argue that this is the actual, original intent, as this is the most consistent, with results that are the functional intent of 1.5 times a normal leading.

Each sample is arranged as per:	left column	center column	right column
line-height:1.2	line-height:normal	line-height:1.85
typically 12 lines	6 to 16 lines	typically 8 lines

Click sample for full size.

I hope this was helpful in some way.