A Visual Guide to the Anatomy of Typography [Infographic]

A Visual Guide to the Anatomy of Typography [Infographic]

Written by:
Orana Velarde

Nov 30, 2017
type anatomy A-Visual-Guide-to-the-Anatomy-of-Typography

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.

Type Anatomy A-Visual-Guide-to-the-Anatomy-of-Typography-Infographic
Create engaging visual summaries like this in minutes with this drag-and-drop tool.Try It for Free


Type Anatomy



A Visual Guide to the Anatomy of Typography-How-the-internal-parts-of-type-are-classified-leg

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




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




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




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



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



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.

RELATED: 15 Fresh Font Combinations for Your Presentations and Infographics


Other Kinds of Internal Letter Parts



Create your own blog graphics like this in minutes.Try It for Free

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.




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




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



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.



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




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




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.




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




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




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




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



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.



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.

RELATED: A Non-Designer’s Guide to Pairing Fonts


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 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 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 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.

Create Stunning Content!

Design visual brand experiences for your business whether you are a seasoned designer or a total novice.

Try Visme for free

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

    About the Author

    Orana is a multi-faceted creative. She is a content writer, artist, and designer. She travels the world with her family and is currently in Istanbul. Find out more about her work at oranavelarde.com

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

    1. 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.

      • orana says:

        I love your reaction Berlin! I know, it’s pretty crazy how there can be so many possibilities right? I am glad you enjoyed the article and the graphics.

      • John says:

        This article was very helpful learned more about typography and look forward to learn more about typography

    2. Joanna says:

      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.

    3. Me parece una información muy interesante, pese a que está en un idioma que no manejo muy bien. Estoy muy agradecido de la forma tan fácil que han brindado una información bastante difícil de procesar.

      • orana says:

        Hola Ali,
        Que bueno que por mas que no este en castellano, hayas podido entender la idea a travez de las graficas. Eso me pone feliz, a mi y a los diseñadores de Visme. Significa que hicimos buen trabajo. Gracias!

    4. Gene Rose says:

      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!

    5. ROBERT LEE says:


      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.

      • orana says:

        Us font addicts have to stick together! I’m sure you will find a reason to include the infographic. Maybe a post about amazing infographics! 😉
        Thanks for the kind words Robert, always so attentive.

    6. Indrani says:

      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.

    7. Jill says:

      This is very informative. I could use some pointers especially now that I am thinking of re-branding my blog. This could help me make my visuals easy to my audience’s eyes. Thank you so much!

    8. Nathalie says:

      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! 🙂

    9. Maria says:

      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.

      P.S. This helps also with my calligraphy practice!

    10. Milton Coyne says:

      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

    11. Swayam says:

      Wow, that is an amazing discovery. Typography is more of a science rather than being just art. It also is an integral part of branding. I have bookmarked your post and will read it in leisure.

    12. led vien toa nha says:

      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!

      • Orana says:

        Hello led
        How’s it going with that website?
        We have lots of resources in our blog for writing and visual content.
        I hope you find what you’re looking for.

    13. Alex says:

      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!

    14. Paul says:

      This Is The Best Post I’ve EVER Seen Regarding Type Elements!
      Men…You Rock! Thanks For The Nice Work.

    15. Josi says:

      Very helpful! Thank you for sharing so much:)

    16. Dan says:

      Where’s the finial? 😉

    17. Gordon Sprouse says:

      Wow, that is an amazing blog and pictures. For me very helpful, thank you

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Now Available: Become a Certified Presentation Expert for FreeTake the Course