SPEAK LOUDLYSPEAK VISUALLYReceive practical tips on how to communicate visually, right in your inbox.

Please leave this field empty.

We don't share emails with anyone

Written by: Orana Velarde

A Visual Guide to the Anatomy of Typography [Infographic]

Although you probably know the difference between serif and sans-serif fonts, typography is actually so much more interesting than that. Did you know that letters can be dissected into parts as if they were a puzzle? Like people, fonts have personalities, moods, styles—and even anatomical features!

In this article, we will look at the different parts that make up letters and their real-life counterparts, visualized in the guide below with some fun analogies.

And last but not least, we will look at how type is manipulated to better fit in a space so that it looks balanced and easy on the eye.

Next time you download a set of fonts with “extra swashes,” you will know exactly what that means.

You can view the visual summary of this post below or skip ahead to read a detailed explanation of the different parts that make up letters.

Create engaging visual summaries like this in minutes with this drag-and-drop tool.Try It for Free

Type Anatomy

Leg

A portion of a letter that extends downwards, attached at one end and free at the other.

Arm

A straight or curved portion of a letter that extends upwards or outwards, attached at one end and free at the other

Ear

The small stroke that extends outwards from a lowercase g in some typeface styles.

Shoulder

The stroke that curves downwards and to the right of the lowercase h, m and n.

Spine

The spine is the main curved stroke inside the upper and lower case S.

Tail

The decorative curved descender of a capital Q, R and K. The descenders of the lower case g, j, p, q, and y are also sometimes called tails.

Other Kinds of Internal Letter Parts

X-height

The x-height isn’t exactly a part but rather a measurement. It measures the height of all lowercase letters that are part of the same typeface. It’s called x-height because the letter x of each typeface is what determines the measurement.

Cap Height

The cap height is a measurement of all capital letters in the same typeface. The most accurate measurement is found in flat bottomed characters like the letter E.

Ascenders

An ascender is a vertical stroke that extends upwards over the x-height.

Descenders

A descender is a vertical stroke that extends downwards below the x-height.

Stem

The stem is the main vertical stroke in upright characters. When a letter has no verticals like a capital A or V, the first diagonal stroke is considered the stem.

Stroke

A stroke is the main vertical diagonal line in a letter.

Bar

A bar is a horizontal stroke in letters like A, H, e and f.

Serif

A serif is a short line at the beginning and the end of strokes. Serifs are what make a typeface a serif or a sans serif. Serifs can have different shapes: hairline, square/slab, wedge. They can all be bracketed or unbracketed, meaning that their connection to the stroke is rounded or perpendicular.

Terminal

When a letter doesn’t have a serif, the end of the stroke is called a terminal.

Bowl

A bowl is a stroke that creates an enclosed curved space, as in the letters d, b, o, D and B.

Counter

The counter is the enclosed space in letters like o, b, d, and a. Counters are also created by bowls.

Link

A link is a stroke connecting the bowl and loop of a two-story lowercase g.

Swash

A swash is a fancy or decorative replacement to a terminal or serif in any capital letter used at the beginning of a sentence. Swashes are also used at the end of letters to decorate the composition. Calligraphy is full of swashes of all kinds; at the beginning, at the end and even in the middle, extending from ascenders.

Spur

A spur is a small projection that veers off the main stroke on many capital G’s

How Type is Styled to Better Suit a Purpose

Bold and Italic

There are ways to style typography to more effectively get your message across. The most common typography styles are italic and bold. Regular typefaces can be turned into bold or italic in any graphic design editor. Bold styles are great for headlines and highlighting important parts of text. Using bold styles for links makes them more prominent and easy to see. Italics are used mainly for words in a different language or reference links.

Typeface Families

Some typefaces have more options. A typeface family can have as many as 20 styles or more. Futura, a very versatile typeface family, has 22 styles. Some of the most memorable Futura styles are light, condensed, semi-bold, extra bold, bold condensed and book italic.

Novelty Styles

Apart from the styles covered above that work for all sorts of text and designs, there are also hundreds of other styles! Novelty fonts have all sorts of different styles, from whimsical and hand drawn, to culturally inspired. These novelty fonts cannot be turned into bold or italics because they only exist in the style they were designed in.

For example, inline is a style in which there is a white line inside each letter:

Ink is a style that resembles letters written with an Asian brush and black ink:

Script (or cursive) is a style of font that resembles letters written by hand; script fonts vary from classic calligraphy to freestyle handwriting.

Novelty styles are great for designs that need a special je ne sais quois, but should still be used with caution since they can become overwhelming quite easily.

Cultural Styles

There are other fonts that are purely cultural in fashion. For example, the fonts that look like Japanese characters but aren’t. The ones that look Chinese but are not Chinese characters. Other cultural styles are ones like the Disney font or the Coca-Cola font. Cultural styles are even more limited than novelty styles. They carry so many messages that using them will instantly give your design a preconceived meaning, so be mindful when using these types of fonts.

How Type is Manipulated to Fit in a Space

Sometimes letters need to be adjusted to fit in a certain space. There are three different ways in which type can be moved around in a space so that it looks better. These three measurements are called kerning, tracking and leading.

Kerning

Kerning is the space between two individual letters. It’s used when you need to move only one letter because it is too far or too close to its companions. Some typefaces have a strange spacing between the capital letter and the rest of the word. Kerning helps create a better balance between letters.

When designers create wordmark logos, they usually control the kerning from letter to letter, making sure the the entire word is perfectly balanced and polished.

Tracking

Tracking is the proportional space between all the letters in a body of text. Being able to change the tracking helps fit more letters in a small space or spread out letters if they are too tight. Script fonts cannot undergo too much tracking due to how the ligatures separate and create unbalanced spaces.

Designers manipulate the tracking when they want to accomplish a look that has even edges for all the words. By spreading out the tracking or making it tighter, they can make all the text look unified and justified.

Leading

Leading is the space between baselines. This means that when we manipulate the leading, we are changing the way a paragraph looks.

Leading and x-height have a direct effect on how text will look in a paragraph. There is another measurement we should mention called the baseline, which is the line on which letters sit horizontally. The bottom of the x-height of each letter sits on a baseline.

The lower the x-height compared to the cap height, the more white space there will be between lines. When letters have a higher x-height in comparison to the cap height, the leading looks more balanced and ordered.

Your Turn

Visme has recently launched a brand kit and now you can upload fonts to use in your designs. Not all fonts are the same and not all fonts work well in the body of a document. Knowing the anatomy of a typeface and its possible styles can help you understand why some fonts work and others don’t.

Designer lingo might not be something you need to know in order to create infographics and presentations. In spite of that, we believe that knowing these terms will help you make better decisions when choosing a font for your graphics or even your entire brand.

Your browser does not support HTML5 video.

We’re stingy and don’t share emails with anyone.

About the Author

Orana is an artist of many trades, currently working as a graphic designer for bloggers and small businesses. Her love of art and travel create the perfect artist-nomad combination. She founded Orana Creative to help freelancers, solopreneurs and bloggers master a better visual strategy. She is passionate about eye happiness and loves constructive criticism.

27 responses to “A Visual Guide to the Anatomy of Typography [Infographic]”

OMG. All I know are the bold, script, and italics. I never thought there could be more than scripts. I really never put more attention to letters but after reading this, it gave me the conscious effort to at least choose the letters, fonts, and style that speak best about the word I am writing/typing. Thanks for this.

This article was mind-blowing! Who knew there were so many elements to a font! I find it very complicated, I barely knew what serif and sans serif was, haha. I think that people who create fonts are very talented. And definitely they must know so much about the anatomy of letters.

Oh, my, the frustrated artist /designer in me is in so much excitement. All these brought me back in those days that I did stuff that had something to do with design. No formal background though, so all these are so helpful and informative. Ya make wanna do design again!

How are you, my friend. Once again, you have written an article that I need to bookmark. In fact, right now, I am thinking of a new post on my blog, if only I can do a topic that in which I can link to the infographic. I am no designer but if there are graphics (anything related to it), one that always fascinates me are fonts. In fact, that is what I always look out for when visiting or reading blogs. In particular, I try to take notes whenever I come across pages that are appealing with regards to readability and ease of reading. Why, of course, I want that on mine as well. Being a nube that I am, I’d like to say thank you because I picked up more new things again from you. Moving forward, it does not make the task any easier as now I will take a closer look at individual parts of the alphabet. For instance, as I search for the perfect fonts to use.

This is such a n intelligent post. I never knew the finer details of letters. Very well explained with illustrations.
I now realise the colossal amount of thought that must have gone into creating the different fonts.

Helpful article! As a creative enthusiast and pseudo-artist at times, it helps to know some of the technical terms or jargons. I mean, art usually connotes subjectivity and seems repellent to rules and such. Who knew that even simple letters have different parts and what-not? Thanks for sharing the knowledge! 🙂

Artists and designers can benefit a lot from this infographic. To be honest, this is truly educating even to non-designers. Typography is also a key to keep readers and followers on your site. If you choose the wrong combinations that do not compliment each other then you may just lose some readers along the way. I really love how you illustrated the parts through simple body parts or objects that we often see in our houses.

wow, this is really informative… honestly, those terms are truly jargon to me.. all i know are those basic terms and their strokes but I have no idea that each of them has their own terms.. I love using different fonts and experimenting with them sometimes.. I know now what terms should I use to describe those fonts.. especially if I need to look for a specific style

Superb blog! Do you have any helpful hints for aspiring writers?
I’m hoping to start my own website soon but I’m a little lost on everything.
Would you suggest starting with a free platform like WordPress or go for a paid option? There are so many choices out there that I’m completely overwhelmed ..
Any tips? Thank you!

Thank you!! I needed a handout for students that really broke down how type works, and was dreading how long it would take to create the right visual information – then I landed by accident on your article and saw you’d done it. Best breakdown of type on the internet – will be sharing this across every platform – you rock!