Typography Guide

Understanding Typography

Design is about visual communication and effective delivery of a carefully-​​crafted message. The message is delivered through a combination of imagery, color, words, and typography. Understanding typography will help you make your message strong, compelling, and persuasive. It’s important to choose the right typeface for the right occasion, and to make sure that it reinforces your design and your message. In order to choose the right typeface, you have to understand the fundamentals of type, the differences between typefaces, and why you should and shouldn’t use different typefaces in certain situations.

Anatomy of Typography

To understand typography, it’s a good idea to understand what makes up a typeface. The variations found in every aspect of a typeface is what distinguishes typefaces from one another. Some are only bold, some elements are shaped a certain way, some are thin, some are thick, etc.

Typeface Anatomy - Typography 101

Anatomy of Typography – Glossary of Terms

Apex — The portion of letters A, M, and N where two strokes meet to form a peak.
Stem — Any vertical line found in any letter, such as the ones found in H, B, d, b, F, or any other letter that contains a vertical line.
Arm — The horizontal stroke that connects to a stem on one end, but not on the other, such as in the letters E, F, and T.
Spur — The part of some uppercase G’s that sticks out, similar to a chin on a person’s face.
Crossbar — The thin bar between two stems, such as the ones found in the letters A and H.
Leg — The downward diagonal stem, such as the one found in the letters K and R.
Stem — The vertical stroke found in any letter, such as D, B, b, d, H, F, etc.
Tail — The descender found on the letter Q.
Spine — The middle diagonal line that connects the rounded portions found on the letter S.
Bracket — The curved part of a letter between the stem and the serif. If there is not bracket present in the letter, but there is still a serif, then you’re usually viewing a slab serif typeface.
Eye — The enclosed portion of the lowercase e.
Ear -  A decorative flourish usually on the upper right side of the bowl on a lowercase g.
Ascender — The part of a lowercase letter that rises above the x-​​height, such as a b, d, h, etc.
Shoulder — The rounded part of a letter such as r, m, or n. This name comes from the fact that it resembles a human shoulder.
Bowl — The curved part of a letter that encloses the circular portion of a letter, such as a B, P, g, D, etc.
Counter — The closed or partially-​​enclosed circular or curved area of empty space of some letters such as o, and d.
Finial — The tapered portion of the end of the stroke of a letter such as in the letter c or e.
Neck/​Link — The thin line that connects the upper and lower bowls of a lowercase g.
Loop — The rounded portion of a lowercase g.
Serif — The squared or rectangular end on the stroke of a letter, including the stems, legs, arms, etc.
Axis — The line that bisects a letter down the middle is referred to as an axis.
Descender — The portion of a letter that extend below the baseline, found in y, p, or q.
Terminal — The end of any stroke in a letter that doesn’t end in a serif.
Cap Height — The height from the baseline of a typeface to the top of the uppercase letters.
X-​​Height — The height of the lowercase portion of letters, which is typically defined by the height of the lowercase x.
Baseline — The line on which any letter sits. any letter whose stem goes below this point is called a descender.




One Comment
  1. Tony Rizzo
    January 10, 2013 | Reply

Your opinion is important to me. Be heard!

Dreamweaver Fireworks Flash Illustrator Indesign Lightroom Painter Photoshop Quark Typography
Workflow tips
Workflow Tips for Photoshop and Illustrator

Efficient Workflow Tips We all know that there are some things...

Fun Vector Patterns

Fun Vector Patterns Everybody loves background patterns. Whether you use these...

bjango actions
Bjango Actions 2.0 (Awesome Photoshop Actions)

Bjango Actions 2.0 I love creating icons and icon sets. There’s...

Open Cloud Free Html5 Template

Open Cloud Free Html5 Template Finding unique website templates to share...

Top 10 WordPress Themes for Law Firms

Whenever you think of lawyers you think sharp suits, sharper tongues,...

konefix free html5 template
Konefix Free Html5 Template

Konefix Free Html5 Template A simple and streamlined site is usually...

Top 10 WordPress Themes for Law Firms

Whenever you think of lawyers you think sharp suits, sharper tongues,...

Selling the Better Idea: 50 Most Popular Premium WordPress Themes

The 50 Most Popular Premium WordPress Themes People want to be...

50 Premium Smashing Business WordPress Themes

Top 50 Smashing Business WordPress Themes for Success Sooner or later,...

premium Wordpress themes feat
3 Premium WordPress Themes for Free From ThemeFuse

3 Premium WordPress Themes for Free! The creative designers over at...