Wikipedia:WikiProject Usability/Readability guidelines: Difference between revisions

Revision as of 15:32, 29 August 2022

Latest revision as of 02:22, 29 July 2025

(5 intermediate revisions by 3 users not shown)

Line 1:

{{Wikipedia:WikiProject Usability/Navigation menu | Layout}}

{{Wikipedia how-to|pages=at [[Wikipedia:Manual of Style/Accessibility]].}}

== Size of text ==

Small text affects readability a lot, and has been thoroughly studied by usability experts: [http://www.laurenscharff.com/research/SWExp.html smallSmall text is waymuch harder to read for everyone]. Usability guidelines recommend a default font size of at least 12 points (about 16 pixels, but pixels are evil).

Reducing text size causes usability issues:

# The first usability issuesissue to consider is [[readability]]. An extensive number of usability studies were made about the impact of text size on readability. ItThey was clearly statedfound that small text makesis it waymuch harder to read, for example by reducing reading speed: if a text with a comfortable size would be read by average users in 15 seconds, the same smalltext sizein texta smaller size 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.

# 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 partnumber of these users doesndon'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 readreading, 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 handicaphandicaps often haveuse special softwares to use websitessoftware, thusso they are not the main targettargets for this guideline.

=== Examples ===

{{see also|user:Edokter/fonttest}}

==== Adjusting pixels ====

{{strong|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.

{{strong|Note}}: when viewing thosethese examples, resultresults may vary if you have customized yourthe 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.

* <span style="font-size: 13px;">Font size sample: 13 pixels. This is the default text size on Wikipedia.</span>

Line 20 ⟶ 25:

* <span style="font-size: 19px;">Font size sample: 19 pixels. This is the recommended text size for elders.</span>

==== Examples usingAdjusting ems and relative sizes ====

* <span style="font-size: 75%;">Font size sample: 75%. The result is similar to <nowiki><small></nowiki>, and really too small to be read comfortably. Users without particular vision impairments might have a lot of trouble to read it.</span>

Line 30 ⟶ 35:

* <span style="font-size: 150%;">Font size sample: 150%. Similar to 14 points.</span>

=== Templates usedHow to resizeadjust font size for textyourself ===

* [[Template:Resize]]

=== How to adjust font size for yourself ===

For example, to set the font size of references back to 100% (instead of 90%), add the following code to [[Special:Mypage/skin.css|your CSS page]].

<syntaxhighlight lang="css">

Line 42 ⟶ 45:

</syntaxhighlight>

==== ResourcesTemplates onused readabilityto resize text ====

Small text affects readability a lot, and has been thoroughly studied by usability experts: [http://www.laurenscharff.com/research/SWExp.html 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).

* [[Template:Resize]]

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

== Resources on readability ==

There isare any number ofmany useful resourceresources about readability on the Web. But, thosebut threethese stand out:

* [http://www.webcredible.co.uk/user-friendly-resources/web-usability/web-page-readability.shtml An overview of readability best practices]

* [http://www.laurenscharff.com/research/web_read_lvs.html Research on readability], for advanced users or Wikiproject members

* [http{{webarchive|url=https://wwwweb.archive.org/web/20071006195750/https://deyalexander.com.au/resources/uxd/readability.html |title=List of further references]}}

== Overuse of color, and too many contrast changes ==

<div style="color:black;"><strong>Status: Completely under construction.</strong></div>

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

Line 62 ⟶ 69:

== Not to be conflated with accessibility/length ==

"Accessibility" is related to [[WP:Article size|article length]], not readability (see [[WP:NOTPAPER]]). We do not delete content because an article is "too long." That violates [[WP:Preserve]], a policy, not a guideline. Instead, we split/fork off mere aspects of the whole topic that createhave become an undue weight problem. Splitting long articles and leaving adequate summaries is a natural part of growth for a topic (see [[WP:Summary style]]).

== See also ==

* [[WP:Preserve]]

== Discussions ==

Line 80 ⟶ 83:

: 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. --[[Utilisateur:Temesis|Temesis]] ([[Discussion utilisateur:Temesis|d]]) 3 février 2010 à 14:45 (CET)

==== Needs translation ====

{{hidden | style = border: 1px solid black; width: 65%; | header = Accessibility review of the French layout for discussions (needs to be translated)|contents =

{{hidden hat| style = border: 1px solid black; width: 65%; | header = Accessibility review of the French layout for discussions (needs to be translated)|contents =}}

{{lang|fr|

: Un autre retour, de portée plus générale:<blockquote><p>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)</p></blockquote>

Line 86 ⟶ 91:

:: 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.--[[Utilisateur:MoniqueBrunel|Monique Brunel]] ([[Discussion utilisateur:MoniqueBrunel|d]]) 3 février 2010 à 19:56 (CET)

}}}}

{{hab}}{{clear}}

=== Delimitation, ergo, what "readibility" is not ===

=== Delimitation,: ergo, whatWhat "readibility" is not ===

At Wikipedia, the standard description applies, as found at the article [[Readability]]:

{{done}}

At Wikipedia, the typical standard [[readability]] description applies:

{{quotebox|'''Readability''' is the ease with which a [[reading (process)|reader]] can [[understanding|understand]] a [[writing|written text]]. In [[natural language]], the readability of text depends on its [[content (media)|content]] (the complexity of its [[vocabulary]] and [[syntax]]) and its presentation (such as [[typography|typographic]] aspects that affect [[legibility]], like [[font size]], [[line height]], [[Kerning|character spacing]], and [[line length]]).<ref>{{Cite web|title=Typographic Readability and Legibility|url=https://webdesign.tutsplus.com/articles/typographic-readability-and-legibility--webdesign-12211|access-date=2020-08-17|website=Web Design Envato Tuts+}}</ref>}}