SPACING, Lookup Tables and Use Cases

[Myndex]

The current visible lookup table attempts to combine use cases (like body text vs other text) all into one.

There are concerns it makes it more confusing than necessary, thus it seems it might be better to split the LUTs into separate ones per use case.

See also discussion 39

Regarding separate LUTs or multi-dimensional LUTs, or other LUT thoughts, please comment in this thread.

Thank you!

[Munawwar]

I personally like it combined. We can pick what we want from the table.

Question though: Why does body text have different limits vs other primary text?

[Myndex]

Hi Munawwar @Munawwar Thank you for commenting

I personally like it combined. We can pick what we want from the table.

Good to know, some have said it has too much color and is confusing. I'm looking to provide the tools in the manner they function best for users.

Question though: Why does body text have different limits vs other primary text?

Use case differences are discussed a bit in discussion 39 but essentially, the effective spatial frequency increases when you put more characters together in a tighter space. Higher spatial frequencies = lower perceived contrast. You might find that you hold material that is a block of bodytext a bit closer than the same sized text as a single line for instance.

And there are other factors like spacing of characters, words, and elements. An important one is leading (line height) — increasing leading for blocks of text improves readability. Two isolated lines could have very little vertical space and be readable, but in a block of many lines, that same small vertical space would make the block hard to read. This is also true of character spacing. The font size and weight of course all play a part here.

And finally, a block of body text is content that is intended to be read fluently at best speed and comprehension, per Bailey/Lovie-Kitchin's research, a high contrast reserve is desired. In a classical design sense, body text is preferentially given the highest contrast, with "10:1" being a common target (that is using other standards, for WCAG_2 it would be about 11:1).

Let's look at this example. It is Lc80, 16px, 400 weight, tight leading.

Notice that the single line is easier to read, and you might find the single line feels slightly larger or bolder despite being the exact same size and weight as the text in the body block. In this example, the body block fails APCA guidelines due to the tight leading, otherwise the text is at the minimum contrast @ this font size.

One of the issues with creating guidelines here is that the CSS line height (and other CSS space properties) rely on certain metrics of the font designer, and so there is variation in the meaning of a given CSS line height relative to the x-height of the font.

Now let's take a look at the same text, but some slight changes.

Here, we have increased the leading to 1.4, everything else the same.

What we've found in the lab is that "typical font weights" particularly Google fonts, of 400 to 700 vary by "about" an effective LC 5 per 100, so for many common fonts, the weight difference for body sized fonts of 400 vs 700 is about an effective change in contrast of Lc 15. We also found that the spacing affected the perceived contrast, as expected due to spatial frequency.

In the final example, we increased the weight of the text to 500. one of the single lines is at 400 weight, the other at 500.

Obviously here we are getting into an area where some differences are subtle, but some like leading/line-height are clearly important.

As far as the difference, the current leaning in terms of lookup tables is body text should have about Lc5 more or 100 higher weight than basic fluent text, and also needs the appropriate spacing and padding characteristics. As always we are in beta, and these are not yet set in stone, but a part of current development.

Thank you

Andy

[Munawwar]

I think the WCAG 2 compatibility parts can be its own table.

"some have said it has too much color .."
The red for "prohibited except for decorative purposes" is just too prominent. Can rather make it a neutral color like grey (with black ⊘)

And I find the purple 30 not very useful.. isn't it obvious 30 is minimum legibility by following the row? (because what comes after is "NT"). Also it is mentioned already in the general guidelines section right above the table.

And about "NT": I dont fully understand this. What would be the problem using a 42px 900 bold text at Lc30, other than it looking too/awkwardly bold?

Edit: What I am getting at is, a bit of "clean up" of the table might help in not making too many more tables (or even sticking with one table).

[Myndex]

Edit: What I am getting at is, a bit of "clean up" of the table might help in not making too many more tables (or even sticking with one table).

Thank you @Munawwar your comments are very helpful. I'm hoping to gave some useful revisions here in January.