Introduction to Typography

Moe Hachem
Written by Moe Hachem on
Introduction to Typography

Typography has always been an indispensable tool in the designer’s toolkit. Picking the right typeface is just as important as choosing the colour, images and the design elements within the project. Changing the typeface can change the emotions that the same composition can evoke.

Before we delve into the world of typography, we need to understand the language behind typography and the anatomy of type.

Typeface vs Font

Typefaces are what you can call the entire family of a font-style. They designate the type of style or visual appearance that is related to a set of fonts.

A font is a member of a typeface family, think of the Light/Thin/Bold variants, those are your fonts.

The Anatomy of Type


X-height refers to the height of the main body of the lowercase letters, excluding its ascenders and descenders.

As children, our teachers taught us to write by writing between two lines with an imaginary line (sometimes visible) that divides the letters in half. If you try and replicate this with most fonts, you’ll find that they don’t typically follow this pattern.

The x-height of a typeface will affect the apparent size and impact of a letter.

X-Height in typography is the height of the main of the lowercase characters


The ascender is the part of a letter that climbs over the letter’s x-height, and ascends to the cap-height or slightly over it.

Ascenders are the parts of a letter that extend over the letter's x-height


The descender is the element of a letter that extends below the baseline.

Descenders are the parts of a letter that extend below the letter's x-height

Cap height

The cap height is the distance from the baseline to the top of the capital letter. Cap height is what we use to determine the point size of a font.

Cap height is the distance from the baseline to the very top part of a capital letter


The baseline is the axis in which letters sit. You’ll want to use the baseline to help you with aligning text with other text or image elements.

The baseline is the axis on which the letter sits


Some parts of a letter especially rounded letters, commas, semicolons, will have a portion that slightly hangs over/below the baseline or the x-height. You’ll need overhang to make sure curved/circular letters don’t look oddly small compared to others.

Overhang are parts of the character that hang slightly above or below the baseline or the x-height


The stem is usually the primary vertical stroke of a letter.

The stem is main vertical stroke of a letter


The bowl is the curved part of a letter that creates a circular enclosure in it.

The bowl is the curved part of a letter that creates an enclosure within it


Serif comes to form the word ‘wing’. In typography, a serif is a small line or stroke that attaches to a stroke in a letter. When we categorize a typeface as sans-serif, we’re saying it is “without (sans) wings (serif)”.

The serif is the "wing" of the letter,or a small line that attached to a letter


A ligature occurs when two or more letters are joined together into a single form/glyph.

Ligatures occur when two or more letters are joined to create one single glyph


A finial is a tapered or a curved end.

A finial is the part that attached to a letter that creates a tapered or curved end


A terminal is a stroke that does not end with a serif is called terminals.

Any stroke that does not end with a serif is called a terminal


The spine is the stroke which creates the curve in the letter S. This stroke can appear more vertical than it is horizontal, or the other way around.

The spine is the stroke that creates the curve in the letter S.


The crossbar is the horizontal stroke in a letter.

The crossbar is a horizontal stroke within a letter.


The counter is an area of a letter that is entirely or partially enclosed by a letter’s form. If the section is partially enclosed, we can refer to as an “open counter”. The bowl is the part of the letter that creates this enclosure, and the counter is what we call the enclosed space.

The counter is the area within a letter enclosed by a letter's form.


We call small letters of an alphabet that are not capital nor upper-case letters, lowercase.


Lowercase letters.


We call the capital letters of the alphabet, the ‘big’ letters if you like, uppercase.


Uppercase letters.

Aligning text

You typically want to align text through the baseline. If you have two blocks of text and need to align them to one another, what you’ll want to do is find a shared baseline to align them against. It’s vital to use a proportional system carefully here to create a natural-looking alignment.

Two text blocks are typically aligned along a share baseline.

Uppercase letters.

Final thoughts

We’ve covered the basics of what creates a letter and how we form it. We’ve only just scratched the surface, and there’s a lot more to learn. I’m obsessed with typefaces myself, and I hope I can over future posts emphasize their importance and how they impact our perception of a specific set of information.

I’ll leave you with what I believe is a quote from Ellen Lupton:

“Typography is what language looks like.”

This quote holds huge implications than first meets the eye, and I’ll do my best to guide you through the world of typography.


Introduction to Type. (n.d.). Spokane Falls Community College. Retrieved October 3, 2020, from

Arnett, H. (2018, April 25). The Anatomy of Type: Introduction to Typography 5 - Black & White Studios. Medium.

Basics of Typeface Anatomy. (n.d.). Lifewire. Retrieved October 3, 2020, from

Bowley, M. (2009, May 23). A 20 Minute Intro to Typography Basics. Design & Illustration Envato Tuts.–psd-3326


comments powered by Disqus