Add 65ch widths for better readability

[Soviut]

This pull request is based on this discussion #2495

It introduces a new width of 65ch intended to maximize readability. A 65 character line length is generally agreed to be the maximum readable width for text. Tailwind Typography already uses a 65ch max-width so this will make it easier to match that behaviour.

The new size has been implemented for both width and maxWidth as well as all responsive variants.

<div class="w-read"></div>
<div class="max-w-read"></div>
<div class="lg:w-read"></div>
<div class="lg:max-w-read"></div>

Tests have been updated accordingly.

This will eventually require a documentation update in both the width and max-width pages. Most likely it would benefit from its own short section (after screen width) in each explaining why 65ch is considered readable.

[swyxio]

nice PR but generally would be nice to wait for maintainers to approve the feature before coding it. in this case I don't think it's a valuable feature because it is extra api surface area not consistent with anything else in Tailwind, could be easily added via extends or typography plugin

[Soviut]

@sw-yx Thanks. I wasn't sure what the process was for actually getting it fully accepted, but I did read the contribution guidelines. The change wasn't that big so if it doesn't get accepted it's no big deal. If anything this was a good excuse to familiarize myself with the source code.

[adamwathan]

I'm torn on if we should add this to core or if it should be provided as part of the typography plugin. Either way I think max-w-prose and w-prose would be the best names, we actually use max-w-prose already in Tailwind UI so we definitely need to add it either in core or to the typography plugin.

What do you think, any strong reason to add it here vs. in the typography plugin or vice versa? 🤔

[Soviut]

@adamwathan Thanks for the feedback.

I feel like readability is more universal and independent from Typography's primarily primary goal, which is to style generated markup where you can't inject utility classes. In cases where you have static text, the Typography plugin can become redundant since you have direct access to the markup. However, you still may want readable line lengths/widths.

If this were built into the Tailwind core, Typography could take advantage of it and alias it. It also means that you could more easily do readable line lengths are certain breakpoints and not others while using Typography.

Finally, regarding the name, I think the prose word is a Typography-only term. It makes sense in that context since you're applying blanket styles to document-format text (ie: prose). However, I don't think this is appropriate in the core where the primary purpose of this new width is readability regardless of what it's applied to. I went with read so that it's as short as possible, like full, but still has an identifiable purpose.

[adamwathan]

Good points! I have thought about it more and I'm happy to merge but I'd like to make the executive decision to use the word prose over read if you don't mind making that update, and only adding it to the maxWidth utility by default and not to width.

Thanks for this! ❤️

[Soviut]

@adamwathan absolutely. I'll get on that shortly.

Also, I'd be curious what the rationale is for there being different width and maxWidth values? I understand with regard to a readable width like this, but for any future contributions, it might help clarify things.

[Soviut]

@adamwathan the updates have been made. max-w-prose and all tests pass.

[adamwathan]

Awesome thank you!

Also, I'd be curious what the rationale is for there being different width and maxWidth values? I understand with regard to a readable width like this, but for any future contributions, it might help clarify things.

Generally the maxWidth values are wider/layout level values for constraining content, and the width values are for explicitly sizing things. I think in a perfect world all of the values in each would be available in both but we try to curate pretty carefully to keep the file size reasonable for dev tools performance reasons.

[Soviut]

@adamwathan Makes sense. Perhaps that's something to put behind a feature flag? includeAllWidths: true ? Maybe this could be part of a new discussion.

[fli]

This tends to give you quite long lines for proportional fonts because most characters that you use in writing are narrower than the 0 character. (see https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/)

With one serif font I'm using I'm getting 100 character line widths with 65ch and with another sans-serif font I get 85 character line widths. (Mono fonts work fine of course)

Not sure if there's an elegant way to solve it, maybe the user should just override in tailwind.config.js and have a quick explainer in the docs.
Just thought I'd flag it!

[Soviut]

@fli The 65ch unit won't actually limit the lines to 65 characters, it is simply a width to produce optimal line length for readability. This means it reduces eye travel along the line which makes it easier for your eye to track to the next line without getting lost.

I fully agree that this should be documented.

[fli]

@Soviut Sorry I might've been unclear. I think we're agreeing that the optimal line length is one where on average the number of characters in a line is around 65? I think for most fonts 65ch won't give you 65 characters on average per line.

[Soviut]

@fli 65ch (of zeros) is the maximum width, not the maximum character count. There is no problem with fonts being able to fit more characters into a single line because it's still a readable length. It's the distance your eye has to travel to read a line and then get back to the beginning of the next line. Fitting more characters on a line does not change that.

If you choose different fonts, the width that 65ch produces will be different because the width of the 0 character.