Sunday, June 07, 2020

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.


Type Anatomy

 

Leg

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.

 

Arm

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

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

 

Ear

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

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

 

Shoulder

A-Visual-Guide-to-the-Anatomy-of-Typography-How-the-internal-parts-of-type-are-classified-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

A-Visual-Guide-to-the-Anatomy-of-Typography-How-the-internal-parts-of-type-are-classified-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

A-Visual-Guide-to-the-Anatomy-of-Typography-How-the-internal-parts-of-type-are-classified-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

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

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

 

Descenders

A-Visual-Guide-to-the-Anatomy-of-Typography-How-the-internal-parts-of-type-are-classified-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-Visual-Guide-to-the-Anatomy-of-Typography-How-the-internal-parts-of-type-are-classified-Bar

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

 

Serif

A-Visual-Guide-to-the-Anatomy-of-Typography-How-the-internal-parts-of-type-are-classified-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

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

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

 

Bowl

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

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

 

Counter

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

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

 

Link

A-Visual-Guide-to-the-Anatomy-of-Typography-How-the-internal-parts-of-type-are-classified-Link-and-loop

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.

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

 

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:

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

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.

coca-cola

 

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

How-the-internal-parts-of-type-are-classified-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

How-the-internal-parts-of-type-are-classified-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

How-the-internal-parts-of-type-are-classified-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.

Thank you so much for stopping by at BenemaCreativStudios. This design business started in the year 2005 but officially launched in 2010. I am a Professional freelance Graphic Designer and a Creative Director with many years experience. Expertise in Creative Logos, Illustration, Flyer, Posters, Book Cover, Book Layout, Business Cards, Stationery, Brand Design, Packaging, Web design, Social Media Visual Design and Animated Visual Ads. Basically all your design objectives fulfilled at a corporate level. If you are looking for a Professional and Elegant design feel free to contact me. Cheers!

0 comments:

Post a Comment

Start Work With Me

Contact Us
JIDE BENEMA
+234 803 497 6746
Lagos, Nigeria