3

I'm building a website. On desktop the maximum width is 1140px. My body font size is 16px.

Both these feels correct. However, when I add text it's too wide to be optimal in readability. See image below:

enter image description here

Be aware that this image looks small in this post. Click to enlarge.

How can I solve that the text is too wide?

What I've tried to far:

  • Columns - I did not like when hit the bottom and need to scroll up to read the next column.
  • Larger body font - The readability may be increased but it feels and looks strange with "oversized" text. I tried 20px.
  • Sidebar - Then I need to have something on the side on every page on the site. That's not an easy task, especially not to the right of this excerpt.

So what I'm looking for is more alternatives the the above. If it's hard to find more alternatives I'm also looking for opinions of which solution I should go for and why.

Improve this question
2
  • 2
    I think this question is pretty relevant: ux.stackexchange.com/questions/3618/…
    – JonW ♦
    Jan 5, 2017 at 9:30
  • 1
    "Sidebar - Then I need to have something on the side on every page on the site" Why do you need that? Just leave the side empty. Don't be scared of whitespace!
    – Rumi P.
    Jan 5, 2017 at 12:12

1 Answer 1

Reset to default
4

You need to maintain a comfortable relation between the number of characters per line and the width of the container.

So either you set two or more columns, you make the font-size bigger or what I suggest which is reduce the width of the text container.

Check this calculator. According to it for a font-size of 16px you need a maximum of 685px wide. Or for a width of 1140px you need a minimum of 20px font-size.

Improve this answer
2
  • Thanks! Yes, setting a smaller container width is an option. The pitfall with it is that it does no longer match the rest of the site.
    – Jens Törnell
    Jan 5, 2017 at 8:37
  • 1
    @JensTörnell does that matter though? Many sites have small text containers. Take this very site here. We get questions that ellicit many answers, and all these answers are all within a small(ish) width content area. There's a bit more content at the top of the page but when you start scrolling all the supplementary content has gone and you're left with just the useful content in the centre of the screen. Take a question with many answers as an example: ux.stackexchange.com/questions/103163/…
    – JonW ♦
    Jan 5, 2017 at 9:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.