4 Replies - 2178 Views - Last Post: 06 July 2019 - 09:31 AM

#1 RamonRobben   User is offline

  • D.I.C Addict
  • member icon

Reputation: 91
  • View blog
  • Posts: 599
  • Joined: 19-May 14

Maximize readability

Posted 29 June 2019 - 09:53 AM

Hello, I will be creating a website where users can post and read stories.
The stories on the website will be quite long and take some time to read.

I was wondering how I can make reading on my site as pleasant as I can.
I've done some research myself and here's what I found:

1. Desktops should have 40-60 characters per line
2. Mobiles should have 30-40 characters per line
3. Color should be balanced in terms of contrast
4. Line height needs to be not too tight and not too loose.
5. Easy to read font (I thought Roboto is pretty nice)

With those in mind I've created an image with two themes (white theme and dark theme).
I was wondering if anyone had additional tips on how to make reading stories easier / more pleasant for the user.
Posted Image

Is This A Good Question/Topic? 0
  • +

Replies To: Maximize readability

#2 modi123_1   User is offline

  • Suitor #2
  • member icon



Reputation: 15300
  • View blog
  • Posts: 61,365
  • Joined: 12-June 08

Re: Maximize readability

Posted 29 June 2019 - 10:47 AM

Fonts are important. Tahoma, Ariel, etc are good choices.
Was This Post Helpful? 0
  • +
  • -

#3 -Coder-   User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 6
  • Joined: 05-July 19

Re: Maximize readability

Posted 05 July 2019 - 05:50 AM

Hey!

It's actually great that you're paying a lot attention to readability, particularly if you're thinking about the read-and-write site. The first things to consider are no surprise fonts and font sizes. The standard and easiest to read fonts are Arial, Helvetica, Trebuchet, Lucida Sans, and Verdana. The question about their size is a bit more difficult. People's preferences vary depending on eye-sight and age. Some would argue that ideal font size is 16 px, however, from my point of view, you'd better use percentage rather than the fixed heights. In this very case, the size would adjust to personal browser settings.

One more tip to a better read-and-write site is to consider a web-accessibility. As I was browsing this topic on my own some time ago, I found out that web accessibility gains popularity, as more than 250 mln people are suffering from visual impairment worldwide. There are the Web Content Accessibility Guidelines that help adapt the site for everyone regardless of their disabilities.

Here are some useful sources with information about web accessibility.
1. why web accessibility matters
2. 5 Website Accessibility Checkers You Need Today
Was This Post Helpful? 1
  • +
  • -

#4 BetaWar   User is offline

  • #include "soul.h"
  • member icon

Reputation: 1635
  • View blog
  • Posts: 8,499
  • Joined: 07-September 06

Re: Maximize readability

Posted 05 July 2019 - 08:42 AM

A few other tips: When creating a white theme, keep in mind that if you just change that to light-grey instead, it can drastically reduce strain on eyes. For instance, #ffffff can be harsh, especially on brighter monitors, or screens that have a tendency to run cool (more blue light); but if you knock that down a notch or two, to say #efefef, it can be a little less straining while also still being fairly light.

The next thing to look at is your serifs (ligatures in the font you are using). There have been studies that say ligatures help the eye move from one character to the next in a word and can speed up reading. If you are thinking that your documents may get to be multiple pages long, that can really be helpful. That isn't to say that you need everything to have ligatures, but some things can really help out. A few of my favorite reading fonts are Bookerly (by Amazon, though I expect there is an open source variant out there too), DejaVu Sans (by Google, I believe, and yes, while this is a sans-serif font technically, I find that it has ligatures in useful places to make reading easier), and Scaly Sans (an open-source sans-serif font that is similar to the ones used by Wizards of the Coast). As you can see, 2 of my 3 favorite reading fonts are sans-serif, so that is obviously not a must-have to make things readable.

Line heights also come into play. I typically aim for either the default, or on longer things (that are going to take up more reading time) about 1.3 times your font size. So in the case of using a 16px font, I would go for a line height around 21px, this can easily by done by using em units instead of hard units, as em is a multiple of the font size for the element. Having larger breaks between paragraph is also a good idea. Aim for something legible. I normally go about the same negative space as the font size of the paragraph (so in the examples above so far, that would be 16px).

Another way you could go about breaking up reading to make it easier for your users is to paginate your documents, similar to displaying a PDF, or a Google Docs/ Word Doc - so that you can see basically where each physical page would be broken out if they were to print the document. This also lets you add in page numbers relatively easily and makes things a bit easier for your readers to put down and come back to later as they can just remember and re-find their page again (or you can have your site do that for them). That will be a bit more work for you, either on the development side to make automatic pagination happen when displaying documents, or as you manually have to cut the pages apart; but it can be a nice addition (and I promise it isn't impossible :) ).
Was This Post Helpful? 1
  • +
  • -

#5 RamonRobben   User is offline

  • D.I.C Addict
  • member icon

Reputation: 91
  • View blog
  • Posts: 599
  • Joined: 19-May 14

Re: Maximize readability

Posted 06 July 2019 - 09:31 AM

View Post-Coder-, on 05 July 2019 - 05:50 AM, said:

One more tip to a better read-and-write site is to consider a web-accessibility.


Thanks for your feedback I will look into web-accessibility soon. I want to focus on the readability first but after that is web-accessibility.

@BetaWar Thanks for the color tip. I will see if pagination is something that is worth implementing since the stories could be short, long but won't be big novels or multi-page stories.

I have also made a little tool https://ramonrobben.nl/reader/ and asked some friends to come up with settings to see whats best for them. I can see there's quite a bit of difference in taste / personal preference but there are also a few things that we all agree on. I am thinking of implementing something like this for users that register on the site. So they can personalize it to their taste.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1