Font Guide // An Introduction to Typography

Originally published on eyepeeling.com on March 2, 2016 By Zachary Anzalone
Font Guide Section 1 // Letters and Type
For my next installment of my tutorial series, I will be guiding you down the rabbit whole of typography. We won’t be covering specific fonts in this Font Guide but we will be learning key terms and tips that will help you become a better designer. This guide is all about learning how to speak Typography. Let’s dive in by talking about the anatomy of text and the terms we use to describe letters.
Strokes // Letters are constructed of strokes. The strokes involved in forming a letter are responsible for the Letter Forms.
The term stroke originates from the fine arts roots of Typography. When imagining the strokes that construct a letter, envision someone actually painting or drawing that letter. How many individual “strokes” of a brush would this be?
Letter Forms // Letter Forms are used to describe the anatomy of letters. It is useful to know your way around Letter Forms while discussing fonts with others. Different letters and fonts have their respective Letter Forms. The most common bits of font anatomy to find across all fonts are Stems and Counterspace. Letter Forms are crucial when selecting fonts for a brand and can be useful when deciding whether or not certain fonts play well with each other within a design. Letter Forms can help with finding both differences and similarities.

Key Terms for Font Anatomy
Letters can have a spine, shoulders, legs, ears, arms and feet. These elements of Font Anatomy can be easily related to Human Anatomy. For this initial Font Guide, I’m only going to give definitions for the Letter Forms that will help you start sounding more like a graphic designer.
Stems // Typically the vertical stroke within a font’s anatomy. Letters that are great examples for stems in Letter Form are f, t, h, k, and l. The stem will often hold the majority of the weight of a letter.
Counterspace // The empty space within letters similar to o and lower case a is referred to as Counterspace. O is the perfect example of counterspace in Letter Forms. Counterspace can be both completely enclosed like in the letter O or partially enclosed like in the letter C.
Bowl // Round bulges in letters are referred to as the bowl. They are almost always formed by one stroke. A great example of a bowl in a letter’s anatomy is capital R.
Terminal // The end of a stroke or the end of the Letter Form. The terminal is often the starting point of the stroke.
Spur // The tail of a letter or where the stroke pulls off is referred to as the spur. The spur is also technically the end of the stroke but do not confuse a spur with a terminal when dealing with Letter Forms and text anatomy. The ends of strokes help us identify a font.

In most Roman Letter Forms there are two cases, Uppercase and Lowercase. The specifics of these two types of letters will be more important in the Words section of the Font Guide.
Font Guide // Extra Tips
Serif vs Sans-Serif
Serifs are defined by their spurs. Serifs are known for their decorative accents. Serifs have feet that stand on the baseline in hopes of increasing readability by assisting your eye with a suggestive line to follow.
Sans-Serifs do not have these accents and are squared off with right angles. San-Serifs are more modern.

Type Face vs Font
A Type Face is one variation within a Type Family.
Type Family // The collection of variations that a typeface is available in. The typical variations that are within a Type Face’s Type Family are bold, italic, and light. It is also common to see medium and an ultra-light.
Font Guide Section 2 // Words and Alignment
A lot of the Words section is going to sound like we’re back in elementary school. This section of the Font Guide explains the alignment of letters and the basic grid for words as we look at how letters sit next to and lines sit on top of each other when forming words and paragraphs.
First lets get into x-hight, cap-hight, and the baseline

X-hight // Within the alignment of typography, lowercase letters are given a hight limit referred to as the x-hight. The x-hight is not the tallest a lowercase letter can be but most lowercase letters do not ascend beyond the x-hight. Letters that are taller than the x-hight are referred to as ascenders. Good examples of lowercase letters that are ascenders are f, k, and t.
Cap-hight // As it suggests, the cap-hight is the tops of the capital letters align.
Baseline // Letters sit on a baseline. When identifying the baseline, be sure to distinguish it as the base of the uppercase letters and not the lowercase letters. The strokes of some lowercase letters stretch below the baseline. Good examples of lowercase letters that stretch below the baseline are lowercase g, lowercase p, and lowercase y. Letters that descend below the baseline are referred to as descenders.

Font Guide Section 3 // Spacing
The spacing between letters, words, and lines of text can be easily edited while using programs like Adobe Illustrator. Spacing is crucial when dealing with readability for the viewer and optimization of space itself. There are three main types of spacing you really need to keep in mind; letter spacing, word spacing, and line spacing. While adjusting the spacing, always keep readability in mind. The human mind identifies words are single objects. If you increase the spacing of letters and words too much, it could cause the human eye to start looking as the letters as their own objects.
Adjusting the spacing of letters and words is referred to as Kerning.
When looking at line spacing, it is important to remember that the hight of a typeset or font is not measured from the cap-hight to the tip of the ascenders that dip below the baseline. Each letter has it’s own “body” that defines that space it technically consumes in the alignment. Each font or type has a point size that defines the hight of the body. Points are a unit that is used to measure things in a digital space.
72 points are in 1 inch.

There are standard point sizes for texts that most programs will recommend for you to use. When defining font sizes for your header text and paragraph text ( also referred to as body text ) it is important to keep proportions in mind. Standard type sizes are 6, 8, 9, 10, 11, 12, 24, 36, 48, 72, 96, and 120. It is ideal to keep your standard text larger than 6 points and smaller than 120 points. This range is scalable to your medium whether you are working on a billboard ad or a business card. Larger text sizes are used for headers, medium-large text sizes are sub-headers, the 8 point to 12 point range is typically used for paragraph or body text, and anything smaller than 8 points is best saved for footnotes.
Font Guide Section 4 // Page Layout
Again, spacing has a major influence on a paragraph or lines readability. There is more than just spacing that comes into play when optimizing a paragraph’s readability. Keep in mind that shorter lines are easier for the eye to follow.
Paragraphs are aligned in reference to margins. Margins are used to define what is “in-bounds” in your field as a graphic designer when dealing with type in a digital format. Paragraph text ( also known as body text ) has two different justifications, Range Left Text and Justified Text. Range Left Text is aligned flush to the left side leaving the right side gaged. Justified Text is aligned to be flush to both the left and right margins. You can usually fit more words per line while using justified text if you are looking to optimize your space. The amount of words you can fit per line will adjust as you increase the spacing between lettings through kerning. Also, you can adjust the spacing between lines within a paragraph, through a process referred to as leading, to make your paragraphs easier to read. Just don’t over do it on the leading or your paragraphs will start looking like lists.
That pretty much covers the base coat of typography that you’ll need to get started. Check back for more Font Guides and graphic design tutorials where we will be going over specific fonts, comparing font impressions, and going over the history of Serfis.
Cheers!