Web Development: Readability and Typesetting Basics: Kerning, Tracking, Leading, and More!

Readability and Typesetting Basics: Kerning, Tracking, Leading, and More!

In this article, we'll take a look at the difference between readability and legibility. We'll also define kerning, tracking, leading, and many more terms that can help you make your text more enjoyable to read.

Have you ever read a magazine story and given up halfway because there was something 'off' about it? That was probably poor readability and legibility; most of the time, it is both or one of the two.

Let's look at the basics of readability vs. legibility, what is kerning, and what is tracking in graphic design. I'll also show you some other components that can affect and improve your typesetting abilities.

Looking for a massive premium font resource? Head on over to Envato Elements, where you can find thousands of professional, high-quality fonts for your every need.

Thousands of Fonts on Envato Elements — Find thousands of fonts on Envato Elements

Readability vs. Legibility

Readability and legibility are two design terms that are frequently confused because of their related meanings. These two terms are widely used in design, especially when talking about fonts and typesetting. While both terms relate to the clarity with which a reader reads a paragraph, they both are still different concepts. Let's look at readability vs. legibility:

Legibility is related to the design of a specific typeface, its anatomy (x-height, width, weight, stroke contrast, etc.)
Readability refers to how a text is typeset on a page. You might be wondering: what does typeset mean? More on that below.

What Is Typesetting?

The original typesetting definition came from physically arranging movable type on a letterpress. Book typesetting was the start of readability, and now it has evolved into digital typesetting.

Typesetting is the process of carefully arranging text on a page to create a good reading experience. The process starts by selecting the appropriate size and style of font, combining and successfully arranging text and images, and tweaking typographical details.

So, which Adobe program is used for typesetting? Adobe InDesign is the best software for typesetting an interior page layout. If you've been in design for a few years (or decades!), QuarkXPress was an old typesetting software mainly used for newspapers.

Book Typesetting — A case of cast metal type pieces and typeset matter in a composing stick, Willi Heidelbach. Creative Commons Attribution 2.5 Generic.

If you aren't sure how to typeset, I can tell you that it takes years to master. Having a keen eye for the details helps; it's a real craft. You'll find that most designers with an editorial background are very specific about text. There are also professional typesetters whose job is to create the best reading experience.

Typesetting and interior page layout in Adobe InDesign go hand in hand. So, in order to make a text readable, you need to typeset it. There are a number of rules and factors that come into place. Let's discuss them below:

What Are Kerning, Leading, and Tracking?

These three words are often used together when we talk about readability, mainly because they are related to each other. Let's take a look at how kerning, tracking, and leading are different:

What Is Kerning?

Kerning typography refers to the space between a combination of two letters. The goal of kerning is to have equal distance between two characters so the final word looks balanced and evenly spaced. Most typefaces are designed with a set kerning between specific characters, but some aren't kerned by default. The most difficult characters to kern are ones with diagonal strokes like A, V, or Y because of the spacing they create between them.

You'll find two options for kerning in Adobe InDesign: metrics and optical. Metrics kerning uses kerned pairs that are included in most fonts. Optical kerning considers the characters' shape and adjusts the spaces so that they look balanced.

What Is Leading?

Also known as line spacing, leading refers to the vertical spacing between each line of text. These lines are measured from baseline to baseline.

It really depends on the typeface you're typesetting the text in, but as a general rule of thumb, the darker the typeface, the more leading you need. Generally, you can start by adding 2 pt to the final size of the copy text. Always make sure that the ascenders and descenders aren't touching from line to line. When you have a block of text typeset, squint your eyes to test if there's too much leading between the lines. The text should look homogenous. Leading typography is important so that lines don't mix together but instead are distinctively separate but also from the same paragraph.

What Is Tracking?

Tracking, or letterspacing, is the space between characters in a word. As opposed to kerning, character tracking applies to a whole word, or characters in general. Depending on the font, you might need to add horizontal space to a block of text to fix the line breaks and avoid odd-shaped rags, orphans, and widows. Titles or sentences set in capital letters need tracking to add some air between the characters and make them clear and readable. The key with tracking type is to find a good balance.

Font Size and Case Styles

Fonts that are too small can become difficult to read, especially for older people or people with disabilities. Most physical reading material is set between 9.5 and 11 points. The default 12 points from word processors is usually too big. Down the line, using a font that's too large can result in extra pages (making the reader turn more pages) or, if not done carefully, it can look like a children's book.

Font kerning and leading need to be adjusted depending on the size of the font. The bigger the font, the more space you'll need between the characters and lines.

Case Styles

Case styles refer to the differentiation between the stylistic uses of a text. In English, we have sentence case, title case, and all caps.

Sentence case is a mixed style in which the first word of the sentence is capitalized (like in this sentence).
Title case is also a mixed style in which the first letter of each word is capitalized, except for articles (like a/an).
All caps is a unicase style in which a text is set in only capital letters. It's mainly used in headings or special situations—it can look as if these letters are shouting, so special attention needs to be paid here.

Line Length and Alignment

Line Length

Line length is the number of characters or words per line. As a rule of thumb, a line should contain around 60 characters (of unjustified text) for it to be highly readable. Too few characters can cause a line to break too often, resulting in hyphenations. Too many characters can make it difficult for the reader to follow from line to line.

Alignment

Alignment refers to how a text block is set on a page. Types of alignment can be left, right, justified, or centered.

Left alignment is the default and most readable because it's natural.
Right alignment is used sometimes for poems or short text.
Justified text is most commonly used in newspapers or magazines to save space and fit as many words as possible in one line. Justified text can look dense and can be a problem for readability because each line looks essentially the same. Readers can get confused when jumping from one line to the next.
Center alignment is often used for formal invitations and short text.

Color/Contrast

Color and contrast refer to the background of the page and its relationship to the color of the text. For instance, text that's typeset in serif fonts and in white color can be difficult to read over a black background. Book designers have the option to use paper of any color, so it's always good to test the color of the text over the final paper choice for your project.

There are a few tricks to use if you have white type over a black background. For instance, you could add more kerning and leading to the text so there's more room to recognize the characters.

What Is a Margin?

White space is important to make sure there's enough room around a block of text. Otherwise, it can feel crammed, and readers can be put off by that. Generous margins will give a book or magazine a more airy and clean look. They'll also allow the eyes to move comfortably around each line of text.

What Are Widows and Orphans?

Widows and orphans restrict the easy reading flow of a text. When the first line of a paragraph falls on the last line of a page, it's referred to as a widow. When the last line of a paragraph overflows to the next page or paragraph, it's called an orphan. These two should be avoided at all cost, not only for aesthetic purposes. This also makes the reader pause, which can compromise their understanding of the content.

What Are Rags and Rivers?

You'll notice rags and rivers typically when typesetting text into a short line length. Rags appear when using narrow columns—these will result in more line breaks, causing uneven spaces on the opposite side of the flush side of the text. These rags can be distracting if not balanced properly. Rags can be corrected manually by breaking lines where necessary or hyphenating certain words—try to avoid two consecutive hyphenated lines. A good rag will go in and out in a natural way.

Rivers usually appear when the text is justified and big spaces appear between words. Tracking and hyphenation settings will help eliminate rivers. The challenge here lies in using just the right amount of tracking, so it doesn't look too tight (more characters in a line) or too airy. Hyphenating text will help break words where necessary, but avoid hyphenating two consecutive lines.

Conclusion

Typesetting mistakes can be seen everywhere; it takes years to craft. It's one of the most important invisible tools in design but one that can improve a reader's experience. Typesetting determines what a design project can look like, how the content flows, and how to make sure the reader enjoys the content.

In this article, we explained what typesetting is, how to typeset, and which Adobe program is used for typesetting. We also looked at the essential rules of typesetting, like tracking vs. kerning, leading type, font size and case styles, line length and alignments, color and contrast, margins, and windows and orphans. All of these things are very important for physical and digital typesetting. We also elaborated on legibility and readability definitions, two concepts that are closely related and used interchangeably most of the time.

Book typesetting can help text have a more professional look for high-quality and readable projects. Now that you know how to differentiate kerning vs. tracking vs. leading, you'll be able to create seamless layouts. You'll be able to enhance the reader's experience of a book or magazine.