New Modern Layout (was: Make default text block more readable (45-75 characters per line instead of 150-160, 16px font size))

[tisto]

Is your feature request related to a problem? Please describe.

The default width of a text block in Volto is 1127px (exact width depends on device of course). This means that something like 150-160 characters per line is shown.

The recommended line length is between 45-75 characters for readability and accessibility.

See e.g.:

• https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/
• https://accessibility.digital.gov/visual-design/typography/#:~:text=Don't%20make%20lines%20too,that%20emphasizes%20clarity%20and%20legibility.

In addition, it seems 16px is considered the min font size for accessibility and readability these days (I need to make a bit more research on this). See:

• https://www.smashingmagazine.com/2011/10/16-pixels-body-copy-anything-less-costly-mistake/
• https://learnui.design/blog/mobile-desktop-website-font-size-guidelines.html

This is how a default page in Volto looks like today:

-> 156 characters per line

When we increase the font size to 16px. The page looks like this:

-> 137 characters per line

When we set the width of the text block to 650px, in addition to using 16px font size, we get:

-> 73 characters per line

This would bring us to a text-line length that is considered readable and accessible.

We actually did this for all our client projects. Just because allowing editors to create text over the full page with will lead to unreadable text.

Describe the solution you'd like

Increase the body text font size to 16px (increase headlines and line-height accordingly) and restrict the text width to 650px (or less on mobile devices).

Describe alternatives you've considered

Wordpress uses the narrow text width by default and in addition, allows to set the text width to wide and even full-width. We could make this possible in Volto as well. Though, as said, personally I wouldn't allow options that lead to pages with text that is hard to read and not accessible.

Additional context

We have to take into account that pages might want to use portlets or sidebars. Though, since we currently do not support these in Volto, we can take care of this when we add slots.

We are currently experimenting with making sidebars work with narrowed text blocks in a client project. One option is to attach the sidebar to the right side. Though, that won't solve the collision problems when you use full-width elements (pages, slideshows, carousels, parallax) on pages with a sidebar.

As said, those are problems we can solve when we add slots to Volto.

Screenshot Full Page (16px, 650px text container)

Quanta Typography

//styleName: button/bm; font-family: Metropolis; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; letter-spacing: 0.006em; text-align: left;

Quanta Text Container

The Quanta text container has a width of 660px:

[tiberiuichim]

I think we actually need 3 image sizes (not counting small, medium):

• content width
• site width (the width of the header, the distance between the logo and the search input at the top)
• window width

We actually need this in all our EEA themes, it was recently brought to my attention, and I think it's a generic enough use case that it should be solved in Volto, but of course, I may be wrong.

[ichim-david]

@tisto I'm going to start looking at how to implement this, I am on Plone's slack channel and discord if anybody wants to follow up or help with this.

[tisto]

Quanta Typography

//styleName: button/bm; font-family: Metropolis; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; letter-spacing: 0.006em; text-align: left;

Quanta Text Container

The Quanta text container has a width of 660px:

[tisto]

@sneridagh @ichim-david @tiberiuichim I just pasted the Quanta Typography and Text-Container width in the comment above.

[tisto]

@sneridagh @tiberiuichim @ichim-david I played around a bit and set the width to 660px, font-size to 16px and line-height to 24px:

Does not look bad IMHO. We have to check how it looks with the Metropolis font.

[ichim-david]

@sneridagh @tisto it's impossible to fake the text container by simply doing something like this: .content-area { h1, h2, h3, h4, h5, h6, p, ol, ul { max-width: 660px; margin-left: auto !important; margin-right: auto !important; } } There are plenty of examples where having rules for the "text tags" will break several layouts. For example:

What is feasible is the following:

1. bump up the font size to 16px (I would do it globally with @fontSize and @emSize variables from site.variables)
2. Implement the larger typography settings for paragraphs and headings as seen in the quanta figma files.
3. Semantic has the text container that is set by default to 700px, I've added a commit with 660px, and where we want content that is centered, we should give the user the ability to change the content area size like the image block has the size options, and we could amend the container class with extra classes like the text class.
4. We might be able to add a max-width, but perhaps without adding the auto margins to center the text content as there are too many template variables and combinations that can be done from the edit page

[tisto]

@ichim-david thanks for working on this. Here are my thoughts:

• increasing the base font size to 16px is a good idea, no matter what we do with the text container
• H1 is not supposed to be in the narrowed container. Just text paragraphs
• images can "stand out" and remain in the wider container (that's something most designers do these days anyways)
• making the text container width configurable (like wordpress) introduces a whole new level of complexity (e.g. what happens if you have a narrowed container and hit return? you most likely want another narrowed container, what if you decided that for you full page you want all containers to be wider/more narrowed)
• we used the narrow text width approach in almost all our client projects (because it is the only way to have readable text IMHO)
• you can check out this site to see how @sneridagh accomplished what I am describing: https://www.bundesrechnungshof.de/de/ueber-uns/geschichte

[sneridagh]

Update pre-Beethoven Sprint 2022

Having feedback from our previous and current projects, we got to develop a layout that we think that is modern and follows current trends and could be the default for Plone 6 Volto.

• Increased size (16px)
• Three base containers (full/normal/narrow) customizable via control
• The text is always narrow width (with an option to be customizable via control)
• The blocks are always normal width, except for images and other special blocks (remains to be seen how, if automatic or via classname)
• We remove the constraint () from the current main blocks container (breaking change)
• We force all the content narrow with a > * rule.
• The style wrapper injects the proper CSS classes for making the containers customizable
• The floated image block behaves differently depending on the selected image size. (see mockup).
• Title is always normal width

[davisagli]

This was implemented as an addon: https://github.com/kitconcept/volto-light-theme/