Typography & Readability

Typography & Readability
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 serifsans-serifslab serifscript and display fonts. I’ve also talked about how and why to use letter spacingkerning and line height or leading. But there are some other aspects of text and typography to consider when using text in design for both print and the web.
Text Color & Background color

One of the most important  things to consider when trying to make the content on your website “more readable” is to choose the colors for your text (or paragraph text) and background with enough contrast between the two, so the content is easily readable.

The most contrast in colors you can choose for you text and background is BLACK text on a pure WHITE background. But those colors may not match your color palette. Perhaps you need a color combination that isn’t quite so stark, or crisp or bold (however you want to say it).

You can pretty much choose any variation of a dark to medium gray-to-black for your text color, and a white, light gray, light cream/beige etc. for the background.

 

You don’t have to stick to a black / white / gray color palette for your text and background colors. However the same rules apply: the contrast between the two colors need to be great enough to make the content easily readable.

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 Size
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 Weight
Font Style

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

font-style: italic;

The great news for those of you who don’t want to learn how to code or write CSS, you can simply use the WordPress Customizer and Elementor’s text editor to set your font styles.

However, it’s important to remember that all typefaces or type families do not have an italic font. For example, as shown below in the two images, Roboto Slab does NOT have an italic font in its type family. Roboto does.

Font Case

Font case refers to the capitalization of letters. There are generally 4 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 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. It is 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.

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.

This is "normal," or default. The text will display exactly how you type it.

This is "Capitalize," where the first letter of each word is capitalized.

This is "uppercase," or all caps.

This is "lowercase," where none of the letters are capitalized.

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.
You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *

Share Post
Share on facebook
Share on pinterest
Share on twitter
Share on linkedin
Share on pocket
Share on email
Affiliate Links

One or more links on this page may be an affiliate link. What does that mean? At no additional cost to you, I will earn a small commission should you click on one of the affiliate links and purchase the product or service. 

Take the Brand Personality Quiz

Discover your brand archetype and how you can use its power to your strengthen your online presence