Reimagining Typography with Accessibility

Typography is one of the most important design elements of an inclusive digital experience. It is the foundation of an accessible reading experience.

Typography consists of font styles and sizes from different or similar typefaces. It's a part of the design process to place fonts in a way that makes the content clear, readable, legible, aesthetically appealing while conveying the message and emotions as intended.

The wrong choice of typefaces, fonts, hierarchy, and flow etcetera don’t let the users complete the task, or even if they do, it is a “bad user experience". The interface that has been designed to make lives easier turns into a jigsaw jumble of words and why would any designer do that?

Perfect placement of typefaces and fonts in place is not the only solution for people with low vision, cognitive, language, and learning disabilities, aphasia, dyslexia, or low adult literacy. They may still struggle to process the text.

Designing accessible content means more than just making a selection of typefaces, It's about designing with performant fonts that enhance legibility and readability. The below steps are designed to reimagine typography with conscious accessible efforts to make written information as accessible as possible.

1. Typeface selection — an accessible typeface is clear, readable, and legible. The trick here is to keep a track of fonts from the initial research, select common typefaces that most people have encountered before, and cast them with the design concept.
2. Avoid ornamented typeface families — the fonts that have only been designed with the intent to look good and are difficult to read should be cleared off the list.
3. Multiple typeface family and Font selection — if the design concept requires fonts from multiple typefaces, select fonts that complement each other when placed together.
4. Prioritize the design — simply saying, hierarchy matters! when it comes to understanding the importance of content in a particular structure, strategize the hierarchy of the content based on their priority and decide the weight of the selected fonts accordingly.
5. Use a large enough font size for body text — these steps are relatively close to each other but uniquely important to make sure the body text weight is large enough for people to comfortably read.
6. Maintain sizes that promote comfortable reading — again, do it as you prioritized it. If this is messed up you will end up having really small text for the least important copy.
7. Maintain space that promotes comfortable reading  — Whitespace is important! Clearly define paragraph, sentence, and letter spaces for escalate readability.
8. Use headings to communicate the importance — paragraphs after paragraphs are not an internet thing but a novel thing. Understand that headings, bold text, and underlined text at the right place can get your content the attention it needs.
9. Ascenders and descenders should be in proportionate height and length — ascenders are lowercase letters like “d, b, or h” who have an upward stroke above the x-height, similarly descenders like “q, p, or j” are the downward strokes below the x-height.
10. The ascent should not be taller than the ascender — there should be a visible difference between capital height and ascenders and ideally, lowercase ascenders should not be taller than the capital letter.
11. Minimize the occurrence of imposter letter shapes — in some typefaces, some letters are very similar to each other, mainly with characters like “g, q, l, i or 1”. There is nothing wrong with that design unless you use those letters in your design.
12. Minimize the occurrence of mirroring letter shapes — its established letters/characters should be easily distinguishable from one another. If a typeface has mirrored letters “it’s time to go back to the first step and change the typeface selection”.
13. Avoid symbols  — a design that has text that symbols, for example, “Frederick II of Prussia” or “Peter I of Russia” can get easily confusing for people as number “1” or letters like “i or l”.
14. Careful use of condensed fonts — condensed typefaces are mostly legible but the thickness of the font doesn’t let the letters have the width they need which makes them difficult to read when they are placed with a small letter weight/height or placed too close to each other.
15. Exclamation marks are not friendly to everyone — dyslexic users encounter identification problems with “!” exclamation marks substantially when they are put close to letters like “i, 1, l, or j”.
16. Web accessibility guidelines — read the web accessibility guidelines for typography and fonts to ensure that the decision is readable, legible, and clear for all purposes including people and compliance. This step should ideally be followed at the initial and final stages of typography design.
17. The aesthetic balance — The overall composition of typefaces, fonts, ornaments, numerals, and symbols should look aesthetically balanced and visually appealing.

The steps in this blog are intended for content clarity, recognition of letters and symbols for everyone. Design processes that include accessibility guidelines and everyone’s needs, other than the only clients’ or designers’ support the needs of people who use the design and ultimately lead to better business.

Accessibility is imperative for building successful, inclusive ethical “user experiences” it includes all aspects of design from - colors, type, layout etcetera.

Accessibility should be a conscious effort from the very beginning and an intentional outcome, not an audit practice. It’s not a separate aspect of design it’s an active part of the design process. Inclusion and accessibility scale design and create a “good user experience” and interfaces that can be used by everyone. As designers, we have to ensure that.