Single column line length is too long

[kristinashu]

Main usability problem here is that there are too many words per line, which makes it difficult to read. I think we need to do two things:

1. Increasing the body text size (slightly)
2. Decrease the max content width for single column layouts

Some examples:

This is how it looks on the demo page:

and the NSF site (related ticket):

Width is better on some pages of the science site but too wide on others, should be consistent (related ticket):

Looks a little better on the Network site because width is slightly narrower and this new font might be slightly bigger looking than fira..

It does look like the boostrap site uses some narrower widths, which look good:

https://blog.getbootstrap.com/

http://v4-alpha.getbootstrap.com/

@taisdesouzalessa @sabrinang @alanmoo any thoughts what sizes/widths would be idea and also what is possible to do engineering wise, without having to do to many overrides on Bootstrap?

[taisdesouzalessa]

Good point @kristinashu. I agree that line width can and should be smaller. Usually it is recommended 75 characters.

For the Network website, I would recommend to use the mockup as a reference

We have an average of 85 characters per line in the Network site. We achieved that by using only 8 columns of the grid and also skipping the first column. We also added an illustration on the right side to make sure the layout is balanced (we just have a placeholder for now but it will become an illustration).

I like the idea of narrower widths for single columns. Easy to read, as you mentioned and it follows the best practices.

[alanmoo]

With regards to the width of the lines, this isn't a Bootstrap issue at all; Designs should simply describe how many columns (out of a possible 12) a block of text should take up at various screen sizes.

For example: 12 columns wide up to medium viewports, then 10 columns for large and XL.

We do have the ability to change the viewport breakpoints and the width of the grid at various breakpoints, though I don't think that's necessary here.

For reference, these are the defaults.

As for the font size, would we want to change the base font size at various screen sizes for every site, or should that be on a per-site basis? There might be some work to be done to enable that, but for the most part it would be something that must be kept in mind when building a site out (i.e. always using em/rem units, not specific pixel sizes for fonts/margins/padding.)

[kristinashu]

All sounds excellent!

Ideally, base font size would be the same on all our sites.