Designing with Typography in Mind

Reading type that is too small or confusing is no fun. A good rule of thumb is to keep type at a minimum of 16 pixels, or 12 pt., and spacing between lines at at least 25% of the font size (which, at 12 pt., would be 4 pixels or 3 points).

 

The W3C website has standards for font contrast. The rule of thumb is to have the contrast ratio between the background and text be at least 4.5 to 1. This means that on a white background the lightest gray you would use for text would be #767676.

 

This is #767676 on a white background.

 

If your text is at least 24 px (that is, 18 pt) or 19 px bold (14 pt bold), then the minimum ratio drops to 3 to 1. With this, the lightest gray you would use would be #959595.

 

This is #959595 on a white background.

This is #959595 on a white background.

As you can see, type meeting these standards not only helps people in using your design, but makes it more enjoyable. Keeping text clear of images or other text that may make it more difficult to read allows for ease of use of your design.

 

Some people have dyslexia, making it harder to read text. There are typefaces, like Dyslexie, that are designed to make reading easier, but a designer doesn’t need to feel limited to just those fonts. It’s recommended to stick with plain typefaces without serifs that have even kearning (spacing between letters), and to stay away from italics. Below is a list of some top-rated accessible fonts.

Arial Calibri Century Gothic Comic Sans Helvetica Tahoma Trebuchet Verdana

Published 2018

Content written by EmilyG Design

Arial Calibri Century Gothic Comic Sans Helvetica Tahoma Trebuchet Verdana

Arial Calibri Century Gothic Comic Sans Helvetica Tahoma Trebuchet Verdana