When you are creating amazing designs or trying to market your brand, the last thing you want is people straining to read the words on your blog or web content. The search for stylized, readable fonts has led to some confusion between two terms: legibility and readability. Legibility, when applied to a typeface or font, concerns the design and the shape of the letters, which are called glyphs. If something is legible, the individual letters are easy to differentiate from one another. Readability has to do with the arrangement or typesetting of the font that makes it easy to read. This article will show the difference between the two and how they apply to various fonts so that you can choose the best typeface to promote your online presence.
Typography terms made simple.
Remember key typography concepts
Grab this handy cheatsheet summarizing some of the most important typography terms.
What Makes a Font Readable?
There are several factors included in the readability of a font or typeface. Those are type size, type case, leading/line spacing, color/contrast, and line length.
The size of a font greatly affects readability. This is why titles and headers use larger lettering and sometimes different fonts than for body text. The eye can rapidly skim the page and read the basic gist or thesis. Some typefaces that are barely readable in smaller fonts are easy to read in larger fonts. Depending on your audience, you may need to change the size of your font. Children or elderly people may require a larger font for easy comprehension. Book fonts, such as Times New Roman, are already sized for the best readability.
Sometimes, type case, meaning whether the letters are capitalized, can greatly affect readability. People often find all caps easier to read than sentence case, where only the first word of a sentence is capitalized. Some display fonts are specifically intended for all caps.
The spacing of lines and paragraphs is a factor. If the lines are squeezed together, this will limit the reader’s ability to distinguish words and ideas. Wider spacing, when used within reason, tends to contribute to greater readability.
Sometimes people enjoy having dramatic contrast between their web font and the background. However, you may have noticed that websites which have white text on a black background are considerably harder on the eyes than black text on a white background. There are a variety of contrasts like this onethat can work to enhance readability rather than hinder it.
Margins on a page make it so that the page looks less crowded. In the same way, shorter lines with more space around them make your web page look clean and readable. 65 characters is considered ideal.
What Makes a Font Legible?
The factors of legibility include the x-height, the width, the weight, the stroke contrast, counters, serifs, and design traits.
The x-height is how â€˜tallâ€™ the lowercase text is in proportion to the capital letters. If the text is very short, this will tend to make it harder to distinguish between glyphs, inhibiting legibility. This font has higher x-height, which will make it more legible in general.
Width is self-explanatory. Glyphs that are extremely narrow in proportion to their height are hard to differentiate. Some fonts are deliberately narrower. These are fonts that might work better as header fonts for a stylized title or logo. Otherwise, typefaces should be average in width for the greatest readability, like this one.
Bold, heavy-weight text commands attention. Bold text is all right in small amounts, but large amounts are hard to read. By contrast, very light fonts are problematic for people with vision problems. Having a balanced weight, like with this font, is extremely important in order to enhance legibility. Fonts known as book fonts are created for this purpose.
Fancy typography tends to have a lot of stroke contrast. This means that the thin part of the strokes are considerably different than the thick part of the stroke. This Calligraphy font is one example. The less stroke contrast you have, the more legible your web content will be.
Counters are the spaces within letters, such as the circle of contrasting color inside an ‘o.’ Typefaces with very little space can reduce legibility.
This factor is divided into two categories: serif and sans serif, meaning without serif. A serif is a projection on a letter that finishes the stroke. This is used in fonts such as Times New Roman and other old-style fonts. The way serifs affect type legibility is highly dependent on what the reader is accustomed to, which will vary depending on the country. In the US, serif typefaces are more common. Note the contrast between this serif typeface and this sans serif typeface.
Ornaments like curls and special design traits may look interesting, but they can inhibit legibility. The more elaborate the design traits, the more difficult your typography will be to comprehend, such as in this example.
What Type Should You Use?
Your styles will depend on your needs. There are times when a more dynamic, dramatic style may work better for your design plans. Display typefaces, which are usually used for titles or logos, can be larger and therefore more stylized. Body typefaces make up the greater part of what you are trying to communicate. You will want these to be as readable and legible as possible.
To summarize, how can you create designs with greater text readability?
- Increase type size for your audience
- Have a reasonable amount of space between paragraphs and lines
- Pick contrasts and colors that are easy on the eyes
- Keep line length to about 65 characters
How can you create designs with greater legibility?
- Increase x-height
- Proportion text width to height
- Moderate text weight
- Use stroke contrast carefully
- Increase counter space
- Use serifs (for the US)
- Choose design traits carefully
Sometimes, all you need to promote better communication and interest in your brand or designs is better readability or legibility. Utilizing this information, you can decide how best to reach out to your audience with powerful, legible and readable content.
Source: Creative Market