-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add 65ch widths for better readability #2574
Add 65ch widths for better readability #2574
Conversation
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 |
@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. |
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 What do you think, any strong reason to add it here vs. in the typography plugin or vice versa? 🤔 |
@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 |
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 Thanks for this! ❤️ |
@adamwathan absolutely. I'll get on that shortly. Also, I'd be curious what the rationale is for there being different |
462d3b5
to
4c7deb4
Compare
@adamwathan the updates have been made. |
Awesome thank you!
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. |
@adamwathan Makes sense. Perhaps that's something to put behind a feature flag? |
This tends to give you quite long lines for proportional fonts because most characters that you use in writing are narrower than the With one serif font I'm using I'm getting 100 character line widths with Not sure if there's an elegant way to solve it, maybe the user should just override in |
@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. |
@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 |
@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 |
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
andmaxWidth
as well as all responsive variants.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.