/ / / ANATOMY OF TYPOGRAPHY / INFOGRAPHIC
ANATOMY OF TYPOGRAPHY / INFOGRAPHIC

ANATOMY OF TYPOGRAPHY / INFOGRAPHIC

with 1 Comment

Although you probably know the difference between serif and sans-serif fonts. But 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!

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 when you download a set of fonts with “extra swashes,” you will know exactly what that means.

The different parts that make up letters and their real-life counterparts, visualized with some analogies…

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

 
So basically, as in any profession, type designers have a specialized vocabulary to talk about the different parts of letters. It isn’t necessary to commit the entire list to memory, but familiarizing yourself with this terminology will make it easier to communicate about typefaces and their characteristics. It will also help educate your eye to recognize the underlying structure of various designs and the differences among them.
 
 
Arm/Leg – An upper or lower (horizontal or diagonal) stroke that is attached on one end and free on the other.
Ascender – The part of a lowercase character (b, d, f, h, k, l, t) that extends above the x-height.
Bar – The horizontal stroke in characters such as A, H, R, e, and f.
Bowl – A curved stroke which creates an enclosed space within a character (the space is then called a counter).
Cap Height – The height of capital letters from the baseline to the top of caps, most accurately measured on a character with a flat bottom (E, H, I, etc.).
Counter – The partially or fully enclosed space within a character.
Descender – The part of a character (g, j, p, q, y, and sometimes J) that descends below the baseline.
Ear – The small stroke that projects from the top of the lowercase g.
Link – The stroke that connects the top and bottom part (bowl and loop) of a two–story lowercase g.
Loop – The lower portion of the lowercase g.
Serif – The projections extending off the main strokes of the characters of serif typefaces. Serifs come in two styles: bracketed and unbracketed. Brackets are the supportive curves which connect the serif to the stroke. Unbracketed serifs are attached sharply, and usually at 90 degree angles.
Shoulder – The curved stroke of the h, m, n.
Spine – The main curved stroke of the S.
Spur – A small projection off a main stroke found on many capital Gs.
Stem – A straight vertical stroke (or the main straight diagonal stroke in a letter which has no verticals).
Stress – The direction of thickening in a curved stroke.
Stroke – A straight or curved line.
Swash – A fancy flourish replacing a terminal or serif.
Tail – The descender of a Q or short diagonal stroke of an R.
Terminal – The end of a stroke not terminated with a serif.
X-Height – The height of lowercase letters, specifically the lowercase x, not including ascenders and descenders.

CLICK HERE TO DOWNLOAD ANATOMY OF TYPOGRAPHY VISUAL GUIDE

 

It’s important for you to share your thoughts with us about the post you read above. Therefore your comments are always welcome. Plus, if you like what you read above why don’t you sign up to be added to our mailing list and why not be the first to hear our new posts and other surprises 😉

 

SIGN UP NOW

Credits: Visme.co and Orana Velarde who 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.

One Response

  1. Mike
    | Reply

    i was looking an article like this one. you explained it very well.
    should read all graphic designers and i ve already shared it for my friends
    thank you

Leave a Reply

Your email address will not be published.

Pin It on Pinterest