Usually I just choose this spontaneously and without much thought, but I have a feeling that's not the best idea: How can I size my font and its container for an optimal reading experience to my users?
If the container is just the width of the whole page, it's incredibly hard to read for users with wide screens, and their eyes have to keep jumping all the way back across 1200+ pixels. However, if it's too small, the user will have to scroll too much, which is also an unpleasant experience.
As an example, the bodies of Stack Exchange posts are 660px wide, with a 14px font size (on most sites in the network).
- This is a blog-like site, where the content is mostly if not all plain text.
- The format of the site is simply a header and a footer, with the body text taking up the entire rest of the page.
- The container would have a
max-widthrather than a hard number as a
width, so that users with small screens don't have to horizontally scroll (ick).
- I will also have to support mobile as well as desktop. Should I be changing font size / container width depending on how wide the screen is, or should the font size stay constant so that it's just as easy to read on any screen (but more scrolling is required on mobile)?
I'd preferably like answers backed up with evidence as opposed to idle speculation not based on facts or research. I know I've read papers and articles about this before; I just can't find them.