Typography can be a subtle art. Type is in front of us all day in one form or another, but it can take extreme examples of high- or low-quality typography to spur us to think about type. Like most arts, the more you think about it, the more you notice details, which in turn makes you stop and evaluate what you might have glossed over before. This is both enthralling and maddening.
My entrance into the spiral of typographic concern started innocently enough: by reading a lot of software development articles on the Web. The content is often well-written by smart and articulate people, but the type is usually set in varying degrees of unreadable.
For non-technical content, there are work-arounds for this problem: use Instapaper, Readability, or Safari’s Reader feature to set the text in a more readable way and go on with your life. This is great for prose and digital photos (which can usually be resized without losing meaning), but software development articles tend to include accompanying source code (which has different requirements for readability than prose) and detailed screen shots which tend to only be legible at full size.
Rather than lobbying for these tools to handle the code snippet use case, a different way to solve the problem is to make it easier for authors to make their text readable enough without having to become typography or CSS expert.
So I Made A Thing
When I started working on Can You Read It Now (CYRIN) I could identify readable text, but not the ways that distinguished it from the text that was a challenge to read. Since it was clear that I was not the only one with this problem, I spent some time reading about the basics of typesetting in the browser and applied some of what I learned in the CYRIN bookmarklet.
What Do I Do With This?
The source for a lot of the ratings are the W3C’s Web Content Accessibility Guidelines, which are focused on making content accessible to as many people as possible. I’ve used the formulas where they are included with the guidelines for calculating how readable text will be and tried to make clear ratings based on that guidance or personal preference everywhere else. In CYRIN higher scores (up to 10) mean that the text will be easier and possible for more people to read your content, but anything rated 7 or above can be good enough if you’re not targeting visitors with low-vision.
CYRIN also gives specific recommendations with CSS rules for making the target design more readable.
Finally, CYRIN also provides short descriptions of the aspects of typesetting that are being measured. There are more aspects of well-set type than are listed here and more subtlety to determining whether text is readable, but I think it’s a good start for beginners and casual practitioners.
Go ahead, try it out.
There’s more to tell about CYRIN and some of the basics of typography as it applies to readability, so I hope you’ll look forward to:
- More on the meanings of metrics that CYRIN evaluates
- Notes on other aspects of typography in the browser
- Technical details about how CYRIN was built
- Feature updates
Here's some type-geek reading I’ve enjoyed:
- The Elements of Typographic Style - The One True Typography Book, as far as I know. Covers a great deal of what I’d picked up in bits and pieces over time, but in greater detail, historical context and (of course) amazing typography.
- The Elements of Typographic Style Applied to the Web - A long-running work in progress (started in 2005) that tries to capture more of the specifics of designing for the browser.
- Information Architects - Creators of iA Writer, they have written about how they apply rigorous standards to the display of text in their cross-device text editors.
- Elliot Jay Stocks’ Tomorrow’s web type today series: ligatures, expert subsets (for real small caps and lower case numerals), swashes & stylesets.
Until next time.