Typography & Can You Read It Now?

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.

Productive Frustration

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.

Example CYRIN scores

CYRIN gives immediate feedback in the current browser window

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.

Example CYRIN suggestions

Suggestions & CSS

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.

Example CYRIN aspect description

Description of line leading

Go ahead, try it out.

What’s coming

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

Other Reading

Here’s some type-geek reading I’ve enjoyed:

Until next time.