Increase readibility with smaller font-size

[fredrikekelund]

First of all, thanks for a great project with some very nice docs!

What I've found when referring to the documentation however, is that I often miss things in the text because of its pretty large font-size, even on smaller screens. To increase readability, I'd like to propose that the body text's font-size is decreased from 18px to 14px, and that a max-width of about 900px is set on the content container.

Ideally, I'd also like for the headings to be a bit smaller as well, and for the <h1> to be less dramatic. I realize that the <h1> uses the identity style of Grav, but for the docs, I think that the argument to first and foremost make them easily digestible carries a lot of weight.

When trying out these changes in my browser, I must say that that they really made the docs a lot more readable to me. I've attached a screenshot showing what it looks like.

If you like, I could submit a PR for these changes!

[gsumpster]

-1 for font size, I think it's fine and a decrease in font size wouldn't be great for people with not perfect eyesight. I suspect more of the problem with the font itself, is that it's quite thin, and it's got some very similar characters, similar to Helvetica. Try setting the font to 'Verdana' or something similar, and see how it is for you, that'd probably be my vote off of the top of my head.

+1 for limiting line length though, that would help a lot of legibility problems, although, I have the docs in a 1/2 width window anyway so I can reference them while coding, so this isn't as much of an issue.

[fredrikekelund]

I'm all for accessibility, but I think it's a bit backwards to measure the default font-size after someone who has poor eyesight. As a user it's easy to increase the font-size if I need it, but the default ought to be size that's as legible as possible for someone with normal eyesight, IMO. For reference, 14px is what Wikipedia uses for its body text.

I agree that the font maybe isn't optimized for readability at 14px - primarily due to its low height - but I still think the size is more of an issue than the font itself.

[fredrikekelund]

Any thoughts on this? I really think it would make the documentation more easily digestible. Technical documentation has to contain a lot of text, and you want the visitor to be able to get a good overview at a glance – a lower font size would definitely help with that!

[rhukster]

https://medium.com/@xtianmiller/your-body-text-is-too-small-5e02d36dc902

just read this today, and it makes some very valid points about making the fonts LARGER !!!

I'm not sure there will ever be one size that fits all, that's why you can CMD + or CMD - in your browser to suit your needs.

Regarding width, again, you can resize your browser to make the fonts fit to the size you want exactly. No point hardcoding that for one person's preference.

[fredrikekelund]

Even the article you linked argues that larger font sizes only increase readability if the content has been tailored for such use cases. I would argue that technical documentation isn't necessarily that kind of content.

But leaving nitpicking aside, what I'm really looking for is to make it easier get a good overview of the different articles in the docs. The theme variables article is an excellent example of a page that's difficult to get an overview of, but where an index or a succinct list of the main variables might be very beneficial. Maybe lowering the body font size won't give a good overview just by itself, but it's one step to consider in how to enable people to get a good overview of the docs in a glance. I think heavy Grav users will benefit immensely from this.

If we could get one concrete change out of this issue though, maybe it could be that we add a max-width style to documentation pages? While font size may be more influenced by subjective opinions, it's widely established that it's more difficult to read too long rows of texts. For instance, this Smashing Magazine article claims that 45 to 75 characters per line is optimal for readability (and Medium's design is an excellent example of a place where this has been implemented)