Wikipedia:WikiProject Usability/Readability guidelines

From Wikipedia, the free encyclopedia
Jump to navigation Jump to search

Size of text[edit]

Reducing text size causes usability issues:

  1. The first usability issues to consider is readability. An extensive number of usability studies were made about the impact of text size on readability. It was clearly stated that small text makes it way harder to read, for example by reducing reading speed: if a text with comfortable size would be read by average users in 15 seconds, the same small size text would be read in 27 seconds. The default font size on Wikipedia is already too small (9 points instead of 12 points), so we don't want to make it even smaller.
  2. The biggest usability issue is for elders (and possibly anyone older than 40), normal users with small low vision and normal users with a particular resolution, device, and such. A significant part of these users doesn't know how to zoom with their browser. They might not know how to use "Ctrl +/-", or they forget it. So when they encounter such small text they have trouble to read, their only option is to come very close to the screen and strain their eyes as much as they can. Until they succeed or give up.

For these reasons it is better to not reduce the size of the body text.

Note that people with a significant visual handicap often have special softwares to use websites, thus they are not the main target for this guideline.


Note: when viewing those examples, result may vary if you have customized your font size in your browser or style sheet, if you are using the zoom ("Ctrl +/-") – note that "Ctrl 0" resets zoom to default – or depending on your screen and its resolution.

  • Font size sample: 13 pixels. This is the default text size on Wikipedia.
  • Font size sample: 16 pixels. The browser default. This is the recommended text size by usability experts, it enhances readability.
  • Font size sample: 19 pixels. This is the recommended text size for elders.

Examples using ems and relative sizes[edit]

  • Font size sample: 75%. The result is similar to <small>, and really too small to be read comfortably. Users without particular vision impairments might have a lot of trouble to read it.
  • Font size sample: 0.95 em. Similar to the default text size.
  • Font size sample: 100%. Similar to the default text size.
  • Font size sample: 1.3em. Similar to 12 points, the recommended size.
  • Font size sample: 130%. Similar to 12 points.
  • Font size sample: 1.5em. Similar to 14 points.
  • Font size sample: 150%. Similar to 14 points.

Templates used to resize text[edit]

How to adjust font size for yourself[edit]

For example, to set the font size of references back to 100% (instead of 90%), add the following code to your CSS page.

  font-size: 100% !important;

Resources on readability[edit]

Small text affects readability a lot, and has been thoroughly studied by usability experts: small text is way harder to read for everyone. Usability guidelines recommend a default font size of at least 12 points (about 16 pixels, but pixels are evil).

There is any number of useful resource about readability on the Web. But those three stand out:

Overuse of color, and too many contrast changes[edit]

Status: Completely under construction.

Needs to be expanded, needs references, etc. But this topic is also important.

Introducing {{Gradient}}. Edokter

It is beautiful. But from a usability point of view, overuse of gradient is quite distracting for the eye and reduces readability. Too much useless strain on the eye. Dodoïste (talk) 00:40, 29 September 2010 (UTC)
Only if use with stoopid colors. EdokterTalk 00:43, 29 September 2010 (UTC)
Not only. I meant overuse in a matter of quantity. Not really in a matter of color choice quality because soccer projects will have their way anyway (as well as many other projects, its just an example so don't take it personally). Do you consider Template:Gradient/testcases as good examples? I absolutely don't. There are too may contrast and color variations, and the eye needs to get adapted at every change of contrast. In the end, it simply makes it waaay longer to read.
It would be great if it was only used in table headers, for example. Thus, it would not disturb the reading of the main content. Dodoïste (talk) 01:12, 29 September 2010 (UTC)


See this layout proposal. This layout used on the French Wikipedia was reviewed by an accessibility expert and another accessibility expert specialized in dyslexia.

Accessibility review of the French layout for discussions[edit]

The visual delimitations provided by blocks of text and lines have a major impact for users with dyslexia. Among the most commons cases are text justification, too much contrast and interline spacing within a paragraph. However, dyslexia is only one case among many others, mentioned here because it is the most evidently concerned. --Temesis

First input received, about dyslexia – a sizable portion of our audience:

> Does this layout with its border and alternating background color makes reading easier from your point of view?

Without any hesitation, YES, and its a passionate outcry!

I'd even say it's like the difference between day and night. With the indentation alone I find myself quickly lost, I have a hard time to distinguish the different users posting, I have a hard time to see who is replying to who.

It requires more effort to read the text than to understand it's meaning. In small doses its manageable, bot tiredness comes quickly and there comes a time when I renounce.

A simple complementary remark: discussions readability is considerably improved several contexts of the everyday users: when the user is traveling, with suboptimal means of consultation such as a Smartphone and Ipad. For example, it's the first time discussions on Wikipedia is decipherable in the train, to be very prosaic. --Temesis (d) 3 février 2010 à 14:45 (CET)
Accessibility review of the French layout for discussions (needs to be translated)
Un autre retour, de portée plus générale:

L'indentation toute seule pour des threads ? L'ergonomie limitée par la technique il y a longtemps, tu connais evidement ? Je voyais ça oublié. C'est drôle de voir ça aujourd'hui sur un site comme wikipedia. Quand c'est évident qu'on peut faire beaucoup mieux (ton 2ème exemple)

--Temesis (d) 3 février 2010 à 16:13 (CET)
C'est ma réponse que Temesis cite dans son premier exemple. L'accessibilité des sites Web est mon domaine depuis des années et je suis dyslexique... j'ai donc cherché à comprendre pourquoi tant de sites me posaient des problèmes, quelles solutions pouvaient y remédier.
Il est particulièrement important de guider le regard, et cela me ramène au sujet de cette discussion, les bordures qui délimitent clairement les différentes interventions.--Monique Brunel (d) 3 février 2010 à 19:56 (CET)