Typography and Web Accessibility

As a web developer, one of the core concepts of HTML is that the many markup tags allow various readers to process and parse your website. Websites are heavily dependent on the use of text and as such, typography can not be taken lightly, lest the user is turned off from browsing your website.

Keep text as text

Keeping as much of the text as text allows for user agents, even the non-typical ones, to be able to parse the text properly, adapting it to whatever analog format is chosen as the output. This also allows for readers which use subpixel rendering and allows for browsers to be able to magnify text accurately to increase readability, which it may to be able to do accurately if the text was stored as a image or video.

Subpixel Rendering
https://upload.wikimedia.org/wikipedia/commons/5/57/Subpixel-rendering-RGB.png

Choose the appropriate fonts and font size

Determining the target audience of your website can count greatly toward your choice of fonts and font size. For example, a website geared towards dyslexic readers may choose to use a font designed especially for dyslexia.

Dyxlexie Font
OpenDylexic Font

The purpose of the text also comes into play, be it for casual browsing or engaged reading. When reading, people use their central vision to focus on a word, while using their peripheral vision to find the next word to focus on.

Courtesy of http://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/

This leads to the need to grouping sentences closely enough for a smooth reading experience, invoking the Gestalt theory of common fate.Choosing the proper amount of characters in a line ensures casual readers don’t just skim the left edge of text and engaged readers don’t read the same line of text twice.

Fonts can help set the tone of a website as well.

https://www.operadeparis.fr/en

Serif fonts tend to invoke a traditional print image, while sans-serif fonts are generally considered clean and modern.

http://thisisarc.com/
http://thisisarc.com/

Choose the appropriate line height

http://www.pearsonified.com/2011/12/golden-ratio-typography.php
http://www.pearsonified.com/2011/12/golden-ratio-typography.php

According to the W3C accessibility guidelines for visual presentation “Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.”

However, setting such a large amount of space may actually make it more difficult for a user to read through the passage. The more common line height of 1.2ems (a mea­sure of type equiv­a­lent to the the let­ter height or point size of a typeface) is chosen for more websites as a compromise. However, the line length of a passage should be closely related to the line height as well.

In conclusion, typography can impact the readability, accessibility and the feel of your website. A general rule of thumb is a passage should be roughly 30ems and the line-height be set at 1.2ems.

A more in-depth reading of the relationship between line-height, line-spacing, font size and how the golden ratio comes into play is available at: http://www.pearsonified.com/2011/12/golden-ratio-typography.php

http://www.pearsonified.com/2011/12/golden-ratio-typography.php
Advertisements