What is an ascender in typography

Albert Shepherd updated on 2020-10-12 20:12:58

While working on your designs, you would need to implement different kinds of concepts. For instance, if you explore typography, then you would encounter terms like baseline, ascender, and descender. Ideally, any stroke of an alphabet that stretches above the size of the baseline is known as an ascender. Though, ascenders and descenders in typography are vital concepts that you should explore with time. In this guide, I will let you know about ascender typography definition with some popular ascender fonts.

Ascender Definition: What is an Ascender

When you will work on typography, you would see that we have a baseline on which the content is written. The baseline has a certain width depicted by another parallel line. Now, when we write any word on the baseline, a part of certain alphabets would cross the x-width. The upper stroke of the alphabets crossing the x-width of the baseline is known as an ascender.

For instance, let's consider the word "Typography". In this, the small alphabet "h" has an ascender that exists above the x-width. Apart from that, the stroke that falls below the width is known as a descender (like the word "p").

Source: DesignModo

A Brief History of Ascenders

Now when you know about the ascender typography definition, let's quickly consider its history. It might sound surprising, but ascenders were first found in the 3rd century AD with Greek scripts and fonts.

Archaeologists have found some half-uncial characters with upward and downward strokes that crossed beyond the standard line. In today's world, they could fit with the ascender definition.

Source: Found in Antiquity

Although, when we talk about the new-age use of the ascender font, then it can be linked to highway signs. When high-speed roads were constructed in Britain, designers Jock Kinneir and Margaret Calvert were appointed. The designers then came up with ascender typography so that the words could easily be read by others while driving (compared to standard letters).

Pay Attention to Crashing Ascenders

This is a common issue that a lot of designers encounter while working with ascenders and descenders in typography.

Let's suppose you have two or more baselines of x-width that are parallel to each other. Now, chances are that the descender of the first line might overlap with the ascender of the second line. This crashing of ascenders and descenders in typography can lead to several issues and might make the content harder to read.

For instance, the descender "q" or "f" of the first line might clash with the ascender "d" or "h" of another line. To avoid the crashing of ascender in typography, it is important to have enough spacing between your lines. For this, you can simply test the descender and ascender font with different letters in advance.

Source: ResearchGate

Common Fonts with High Ascenders

Ideally, in any font, we can have high, low, or no ascenders. Therefore, when you implement different fonts in designing, you should be aware of these options. To start with, let's consider some common tall or high ascender fonts.

1. A Charming Font

This tall ascender font is mostly used for titles (like Book titles) and has a unique appeal. As you can see from the character map, most of the letters have an extended upper curve, leading to high ascenders.

Source: 1001 Fonts

2. Josefin Sans

This might seem like a standard font at first, but there are a few letters with tall ascender typography. For instance, the letter "l", "f", or "t" can stretch way beyond the x-width of the baseline.

Source: Pinterest

3. Pompiere

This is another commonly used sans serif font that has high ascenders due to its uneven distribution of the length. Some of its alphabets like "b", "d", "h", or "l" can rise above the width and cause crashing of ascenders.

Source: Font Squirrel

Common Fonts with Low Ascenders

If you have limited x-width in your designs, then you should consider these ascender fonts with a lower stroke length.

1. Litera

This is one of the cleanest fonts that you can try. Litera Regular has standard spaces and even the strokes are of defined length, attaining low ascenders and descenders in typography.

Source: FontsGeek

2. Teko

If you want to write in bold or highlight something, then you can also try Teko. This low ascender font is mostly used to write headlines, sub-headings, and other things that you want to focus on.

Source: Font Squirrel

3. Futura

Another popular option for low ascender typography that you can consider is Futura. The font is pretty basic and is mostly recommended to be used in minimal spaces.

Source: Free Fonts Family

Common Fonts with No or Minimum Ascenders

Lastly, if you have minimum x-width in your baseline, then you can consider the following ascender fonts.

1. Amazonas

As you can see, this is a regular font with all the capital and lower case letters fitting perfectly within the baseline. Both ascenders and descenders in typography in this font won't cause any clash.

Source: FontGet

2. Daggersquare

This font is pretty interesting and will let you attain a unique appeal with minimum space. Mostly, this ascender typography font is used to write headlines and capital letters.

Source: FFonts

3. Monoton

If you want to add more character to your designs, then Monoton would be one of the best fonts. Almost all the characters in it are pretty uniform and would let you write your content without any crashing of ascenders.

Source: Font Squirrel

There you go! After reading this guide, you would be able to know things about ascender definition and the implementation of ascender fonts. Apart from covering the basics related to ascender typography, I have also included a common issue with ascenders that designers face. While I have included some commonly used high, low, and no ascender fonts, there are hundreds of other options that you can try. To make your job easier with designing, you can even use a resourceful application like Wondershare Mockitt.

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:

• 
  
  

  What Are Cap Height and X Height in Typography?

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 from the Envato Blog and Envato Tuts+: 

How to Make a Font: 10+ Typography and Font Tutorials for Beginners