Typography and Lessonly

Lessonly’s goal is to maximize the ability of all learners to consume, retain, and retrieve information. This means the design of lessons — especially the typography — is key.

We wrote this post to share the thought processes around the typographic decisions that are built into Lessonly. In the end, they not only offer high readability to learners, but they allow lesson creators to focus on what’s important: capturing great learning content (not adjusting text sizes and line heights).

If you look closely at New York Times articles, Medium blog posts, and Lessonly lessons, you’ll notice something about the text: There are a similar number of characters on each line.
Line Length
This is not a coincidence: Typography studies confirm that readability — the quality of being legible and decipherable — is highest when there are approximately 40–80 characters per line of text. Going too far past this comfort zone makes it harder for the reader to perform a return sweep (i.e., the movement of the eyes from the end of one line to the beginning of the next).

We take text readability and accessibility seriously, which is why we bake typography best practices into Lessonly lessons and restrict customizations that could jeopardize them.

But, as Dad always said, if you are going to be restrictive, you have a duty to be clear about your thought process. So, here goes clarity:

Typeface

Typefaces can have dramatic affects on readability. Based on your company’s preference, you can set your Lessonly lessons to either FF Tisa Pro, Proxima Nova, or a combination of the two (follow those links for live lesson examples). Both typefaces are extremely legible, due to their large x-heights and proportional stroke widths.

image04
Some quick typography terms, explained. Image credit.

But great type is just a start to strong readability. To knock it out of the park, you also need high text-to-background contrast and dialed-in ratios for text size, line height, and line length.

Text-to-background contrast

It can be fun to create designs like this:

image00
But reading them? Not so fun. The lack of contrast makes the eyes work hard. Unless you are training for eyeball bootcamp, avoid low-contrast text-to-background ratios. And while you’re at it, you should also avoid the greatest of all contrasts: pure black on pure white. This mix may “cause the words to swirl or blur together” for the 740 million people in the world who have dyslexia.
image02
To ensure a healthy contrast, Lessonly’s background is set to pure white, while our paragraph text is dark grey (hex code #212121, for all you designers out there). We let you set your own custom link color to more closely match your company’s brand; don’t forget about high contrast if you use that setting.

Text size, line height, and line length

These variables are dependent on one another for harmony. If one of them is disregarded, there’s discord. If each one is optimized in accordance with the others, angelic trumpets sing. Pearsonified has an excellent article on the dynamics of this secret symphony.

As we stated, you want to stick to approximately 40–80 characters per line. We’ve set our lesson bounding box (i.e., the width of our lesson-content area) to 750px. We aim for 75 characters per line, on average. So, to ensure the right ratio, we set our type size to 21px and our line height — measured by the text size plus the space below the text — to 35px.

Bringing it all back home

It’s our job to help learners learn. Our decisions behind our type were made carefully and with the learner’s best intentions in mind. In short, we are not trying to be high and mighty; we are trying to take some work off your plate so you can focus on capturing the internal knowledge, best practices, and team policies that your learners count on to do their best work.

We are always trying to improve, so let us know how we can do better.

Psst: A note from the future — Lessonly introduced a new learner experience that features more robust custom branding. Learn more here.

Innovation in Indy
Archive Important Information within Lessonly

Better Work starts here

Watch a Demo