# Restricting line width for readability

**URL:** <https://discourse.gohugo.io/t/restricting-line-width-for-readability/2820>\
**Category:** support\
**Created:** [March 2, 2016, 4:30pm UTC](https://discourse.gohugo.io/t/restricting-line-width-for-readability/2820 "2016-03-02T16:30:14Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stephen\_Eglen](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@Stephen\_Eglen](https://discourse.gohugo.io/u/Stephen_Eglen)\
**Post date:** [March 2, 2016, 4:30pm UTC](https://discourse.gohugo.io/t/restricting-line-width-for-readability/2820/1 "2016-03-02T16:30:14Z")

</div>

Hello, websites such as the following recommend a line width of around 50-75 characters:  
[http://baymard.com/blog/line-length-readability](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?

Thanks!  
Stephen

---

<div class="post-metadata">

**Author:** ![parsiya](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/parsiya/32/1218_2.png) [@parsiya](https://discourse.gohugo.io/u/parsiya)\
**Post date:** [March 2, 2016, 11:35pm UTC](https://discourse.gohugo.io/t/restricting-line-width-for-readability/2820/2 "2016-03-02T23:35:47Z")

</div>

> [@Stephen\_Eglen](#):
>
> hugo-multi-bootswatch

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:

```toml
[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:

```css
p {
max-width: 60ch;
}

```

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