40em rule considered harmful (was is this spacing intentional?)

[sparkiegeek]

          Is this spacing intentional?

Notice how the content (the <p>) is width constrained (seemingly due to a CSS rule of max-width: 40em) whilst the header and the tab bar are "full width"

Originally posted by @sparkiegeek in https://github.com/canonical/maas.io/issues/815#issuecomment-1895394503

[bartaz]

All text elements should have the same max width, including heading. I'm not sure what styles cause headings to have full width in this case.

What's the page this comes from? I can't find it. On live it seems to look like this which fine?

[bartaz]

@lyubomir-popov

Are headings supposed to have max-width of 40em (relative to their own font size) or 40rem relative to document font (to keep their width the same as paragraphs)?

With current implementation of 40em this leads to situations when headings can be significantly wider than the text below them:

[lyubomir-popov]

The purpouse of the max-width is to limit the number of characters per line to about 90 (used to be 75, which is the typographic best practice). That's why font-size relative max-width makes most sense. Maybe even a ch css unit directly set to 90 for all elements might make more sense? (not sure if that accounts for monospaced vs normal fonts)

[lyubomir-popov]

Worth noting, this is a falesafe - so no text can become longer than 90 chars give or take, at which point it becomes difficult to read. It's the layout's job to create further limiting factors if needed.

In this case, I think it's ok to have headings use the available space, as it creates denser documentation (fewer wrappings and lines overall), which if I understand correctly is very valuable to the docs team.

[pastelcyborg]

This appears to be a duplicate of #5200 - @lyubomir-popov can you confirm?

[syncronize-issues-to-jira[bot]]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-13783.

This message was autogenerated

[bartaz]

Triage: This is not something we are going to address now. Text max-width should be revisited and defined in new design system guidelines and architecture.