What are Ascenders and Descenders in Typography?

What You’ll Be Creating

In typography, there are some vital terms you may encounter and need to know, such as meanline, baseline, ascenders, and descenders. To help you understand these basic terms, here is a quick article that covers a few basic typography terms, the definition of ascenders and descenders, and their purpose in design.

If you want to get more in-depth with typographic terms and touch on some essential terminology, then feel free to play the video below or subscribe to explore the Envato Tuts+ YouTube channel for more.

If you also want to learn about cap height and x-height in typography, check out this helpful guide:

Typography

What Are Cap Height and X Height in Typography?

MissChatz

Common Typography Terms

Before we explain ascenders and descenders in typography, let’s familiarize ourselves with three simple terms: baseline, meanline, and x-height. All these terms are relative to one another.

What Is the Baseline?

The baseline is an imaginary line that letters or words lie on.

What Is the Meanline?

The meanline is the invisible line that runs along the top of non-ascending lowercase letters. It falls on the top edge of lowercase letters such as g, e, and y.

What Is the X-Height?

Another useful word to know is x-height. The x-height is the same height as the lowercase letter ‘x’ in a font, and that’s where it gets its name. The distance between the baseline and the meanline is considered the x-height.

What Is an Ascender in Typography?

In typography, the definition of an ascender is the upward stem part of lowercase letters that extends beyond the meanline and x-height of a font. These ascending extensions are also known as arches, stems, or hooks, depending on the shape of the form they reflect. Examples of common letters with ascenders are b, d, f, h, i, k, l, and t.

The level that ascenders reach is known as the ‘ascent line’. Also, take note that capital letters do not technically have any ascenders.

What Is the Function of Ascenders in Design?

Most typefaces are identified according to the height of their ascenders. Ascenders’ purpose in typography is to improve legibility and help readers recognize and read letters with ease.

In some typefaces, the ascenders are long and extend higher than the meanline, while others are short and extend just a short distance above. Short ascenders tend to make letters appear wider.

Some ascenders can be straight, while others are oblique. For example, in script and calligraphy typefaces, you will notice that the swirls and loops will slant and go above other letters. These types of ascenders which go beyond the x-height make text harder to read or use in a body of text.

Below we have featured and highlighted the ascenders of five fonts that are available on Envato Elements:

What Is a Descender in Typography?

A descender in typography is the opposite of an ascender. A descender is the ‘tail’ or downward portion of a letter that extends below the baseline. The descender’s height is calculated from the baseline to the end of the font descender line.

In typography, font descenders can also be found in capital letters, numbers, and special characters. Most descenders belong to lowercase letters such as g, j, q, p, or y—and sometimes f and z. However, at times you might also find them on the capital letters Q, Y, or J, and they typically appear in italicized letters or the old-style numerals 3, 4, 5, 7, or 9.

Some characters, especially curved letters, tend to slightly extend beyond the baseline. This is commonly known as an ‘overshoot’. Overshoots are different than font descenders. The overshoot, for example, is the small curve in letters like b or o that slightly extends below the baseline, whereas the font descender is the loop or shaped lines of letters such as j, y, and q.

How to Use Different Types of Descenders in Design

Ascenders and descenders both work together in helping to recognize letters and words. For that reason, you will notice that on roadsigns or signboards, capital or all caps typefaces are avoided because the focus is on readability.

As a designer, you are required to pay attention to the readability of text. Look out for crashing descenders that might disturb the aesthetic of your design. Crashing descenders are common in fonts with long descender heights. They occur when a descender in one character overlaps or touches the ascender of another letter in the design. This will cause your work to look unprofessional, hard to read, and untidy.

In cases where you have crashing descenders, you will need to be mindful of the negative space and efficiently create breathing space between the characters by experimenting with the text’s leading, kerning, or tracking.

Descenders vary between typefaces, especially in calligraphy and script typefaces. Although some of these script fonts look elegant, their tails will extend a longer distance than normal, which results in having to manage a larger space between text lines in order for it not to overlap other letters. This makes the font harder to read and unusable in large bodies of text, yet it still functions as a great choice for headlines, card designs, titles, and invitations.

Typefaces with short descenders are more suited for large bodies of text and tend to be legible and more economical with space.

Sometimes, you will encounter fonts with no descenders. These are great for bodies of text with minimal space. Traditionally, fonts with no descenders are great for designing logos or headlines. They tend to be readable and efficient for short space.

Keep in mind when choosing a font for a body of text that the ascenders and descenders interact harmoniously. Long ascenders and descenders are challenging to integrate into the design.

Below, are five examples of font descenders. You can find all the fonts on Envato Elements:

Discover More Typography Tutorials and Resources

That’s it! I hope you enjoyed this quick tip. You have learned about ascenders and descenders in typography and discovered some common issues faced with each. Now that you have started to build your ABC of typography vocabulary, you can take your next typography project to another level.

If you wish to continue learning or find more useful information, check out these amazing articles:

Post date February 19, 2022

This content originally appeared on Envato Tuts+ Tutorials and was authored by MissChatz

What You'll Be Creating

If you also want to learn about cap height and x-height in typography, check out this helpful guide:

Typography

What Are Cap Height and X Height in Typography?

MissChatz

Common Typography Terms

Before we explain ascenders and descenders in typography, let's familiarize ourselves with three simple terms: baseline, meanline, and x-height. All these terms are relative to one another.