This post is a work-in-progress.
The U.S. Web Design System summed up their needs pretty well.
Government websites need clear and consistent headings, highly legible body paragraphs, clear labels, and easy-to-use input fields. Our default typefaces are designed for legibility and can adapt to a variety of visual tones.
USWDS Typography
The Backstory
My goal is to ensure a great accessible user experience (AUX) possible.
That means making this website useful for people with disabilities. This website uses WordPress (WP) as a content management system. I am using the Genesis Framework to build this website. It comes with a free Genesis Sample theme I working with to make your experience usable.
The bottom line is if you do not understand what you are reading, then what you are reading is inaccessible to you.
There are many different parts involved when it comes to designing an accessible experience online. One of the parts involved in communicating information to you is typography.
Typography
Disclaimer: I am not a typography specialist.
Nor do I claim to understand the mathematical properties behind different typographical arguments.
What I do know is that if you do not understand what I write, then my information is inaccessible to you.
Restoring Your Default State
One thing is clear.
You have the right to access the information in the manner that fits your needs.
There’s different arguments when it comes to accessibility. It’s not my job to convince you of which arguments matters. It’s my job to present a valid line of thought that neutralizes these arguments.
With that in mind, I reviewed a few online resources. I took some basic concepts and addeded them into my notes on accessible typography. One thing became clear.
You can change the default font on your browser.
As a result, my first task is to clean up the “default” Genesis Sample style sheet which comes with font styles set by the creators. The theme uses different font families and styles to guide you into creating an accessible experience.
Setting Your Reading Width
Before I can dive into the typography, it is reasonable to set the reading width.
Based on The Elements of Typographic Style Applied to the Web, 2.1.2 Choose a comfortable measure suggest setting the box width in ems to ensure the a comfortable measure is always set to the typographer’s specification.
In lay terms, that means my Genesis Sample theme “box” is the article that’s been assigned the class .entry which needs to be set.
Meaning if I think 72 characters is the perfect limit, then I should set the limit to 72 characters or 36 em.
It starts with setting the body font-size as the baseline for all other styles such as paragraph, headings, et cetera.
This is an example of Heading Level Three where I am testing the max-width property of 36em.
It appears that the max-width property of 36em works well. However, I noticed that it didn’t really help my reading experience when it came to lists.
Testing the max-width of lists
- Lists can be unordered like this one with bullets
- Lists can be ordered like this sub-list with numbers or letters
- Lists can be definition lists which is great for defining key terms
- Lists can be indented using margins, paddings, even the space bar on your keyboard for those of you who are not familiar with how lists are created on typewriters or digitally.
- For the purpose of testing, I set the max-width property to 33em which limits the length of my list to roughly 66 characters. The goal is to determine whether long list items are readable and usable without borders
To be continued…
There’s so much more to typography than what I just wrote here.
