Restricting line width for readability

support
1

Hello, websites such as the following recommend a line width of around 50-75 characters:
http://baymard.com/blog/line-length-readability

How would I go about doing this for a Hugo theme? (I’m trying the hugo-multi-bootswatch theme).

I know a little html, in that if I add the following to a .md page, I restrict the paragraph width, but:

  1. where do I add this snippet for all pages?

  2. is this the sensible (robust to viewing device) approach?

    p { max-width: 60ch; }

Thanks!
Stephen

2

For #2 I have no input. I am clueless on css.

My answer to #1: It should be added the css file applied to the page. I looked a bit inside the theme, there were no instructions on how to modify the css files. From what I was able to understand, depending on the theme that you have chosen in the config file like this:

[params.theme]
    inverse = false     # indicating if the theme should use inversed colors
    name = "cerulean"   # name of the theme to use

a different css file will be used. In this case it will be cerulean.css. All css files are in /hugo-multi-bootswatch/static/css/theme/. But there is also an empty css file in the theme /hugo-multi-bootswatch/static/css/style.css. Look inside your generated pages and see if this file is being used. If so, you can try adding the following to the css file:

p {
max-width: 60ch;
}

I assume this empty css file was created to override properties.