Typography & Readability

Typography / Readability / graphic design basics

In order for your design to be successful, it must be readable. There are many ways you can make the text more legible and readable. This post talks about some of those strategies.

I have already talked about a few things you can do. You can read more about when and how to use serif, sans-serif, slab serif, script and display fonts.

I’ve also talked about how and why to use letter spacing, kerning and line height or leading.

Hierarchy helps the reader scan the page and know what the information is before deciding to dig deeper and keep reading. Along with the professional aesthetic it brings,  alignment brings order, organization, and structure to text, making it easier to read and to understand.

But there are some other aspects of text and typography to consider when using text in design for both print and the web.

Line lengths

Line length is important for readability. The simplest way to create more readable text is to create a document with columns. The optimal line length is about 50-65 characters. This includes characters and spaces. You can probably safely go up to 70-75 characters without much strain on the reader but anything above that is not recommended for print design and large areas of text.
You can have the same problem with line lengths that are too narrow. For large areas of text, anything less than 35-40 characters in width is too narrow and should not be used.

See for yourself. The blocks of test with line lengths of 60 or 45 are easier to read because your eye doesn’t have to travel too far, left to right, in order to read the text. The text block of 90 characters will strain your eyes faster and it’s easier to get lost as your eyes have to travel a longer distance for each line. The line length of 25-30 is too short, causing your eyes to have to travel too quickly, left to right. This can also cause eye strain.

Widows & Orphans

Widows and orphans are the text or end of a hyphenated word that is left dangling at the beginning or end of a column or page. In terms of readability and aesthetics, its best to try and avoid these. Sometimes the best way to avoid is through editing the text.

Sometimes you can change the font face or font size. You can play around with the gutter width and margins. You can also play around with text size, letter spacing or kerning to solve the problem.


Font Size

Font size is how big or small a font is. It is the measurement of characters in a font. Obviously the size of font will contribute to its readability. Not discussed here, but it should be noted that the less contrast there is between the colors of the font and background, the larger that font must be in order to be legible.

It will greatly depend on the color, contrast, weight and type family of the font used, but the optimal size for reading on the web is between 14 and 16 pixels.

Font sizes in print are typically measured in points instead of pixels. Again,  it will greatly depend on the typeface, font size, font weight, color and contrast used, but the optimal size for print is between 11pt and 15pt.

Font Weight

Font weight is the thickness of the characters in a typeface or font family. Font weights run between 100 to 900, or thin to black respectively. The smaller the number (100) the thinner the font weight.

In web design, font weights are typically written as numbers. For example, font-weight: 100;

However, in graphic design programs such as Photoshop, Illustrator and InDesign, font-weights are typically determined by their names. For example, Raleway ThinRaleway ExtralightRaleway Light, etc.

Not all typefaces will have all 9 font weights. But Raleway is a good example of a font to show the differences in font weights in a type family.

Font Style

In web design, font style refers to italic font. It is written like this in CSS:

font-style: italic;

It’s important to understand that all typefaces or type families do not have an italic font. For example, Roboto Slab does NOT have an italic font in its type family. However, Roboto does.


Font Case

Font case refers to the capitalization of letters. There are generally 5 options. Regular, normal or default means the text is displayed exactly as you type it. If you type a capital letter or small case letter, that is what’s displayed.

Capitalize is used in web design and when used, displays each new word as a capital letter. As you can imagine this should only be used in very rare cases as it will capitalize EVERY word whether it is grammatically correct to do so, or not.

Uppercase, also known as “all caps” is when the text is displayed using all capital letters. Its important to understand that all uppercase letters is generally more difficult to read than regular or normal case. If you’d like to use uppercase in your design’s text, you should be mindful to only use it in small blocks of text. For example, on a webpage, uppercase fonts would be suitable for a page title or header but not advised for large blocks of body or paragraph text.

Small caps is similar to uppercase. However, the first letter of each word uses a larger capital letter and the other letters use smaller capital letters, hence its name – small caps. It should be used discriminately is large blocks of text because its not as easy to read as normal or default font case.

Lowercase is exactly as you’d expect. In web design it is a CSS style attribute, like uppercase. However it makes every word a small case, with not capital letters, whether it is grammatically correct to do so, or not.


Share this:

Leave a Comment