What is Typography? A Beginner’s Tutorial

A practical guide to typography. Concepts, classifications & tips.

We tend to complicate things. Our written and visual communication is no exception to this truism. Enter typography. Typography is the art and practice of arranging and organizing letters and text. It places focus on legibility, readability, clarity, and aesthetic appeal. This guide is about what typography is and how you can use it to your advantage.

Our practical tutorial aims to reveal the benefits of typographic knowledge in the design and delivery of written communication. It will provide an overview of how even a basic understanding of typographic history, terminology, and concepts can improve both the efficacy and appeal of our written communication. Try it yourself.

What is Typography?

“Typography is the craft of endowing human language with a durable visual form.”
― Robert Bringhurst

The history of typography begins with the origins of movable type in Song Dynasty China as invented by Bi Sheng sometime around 1040. Movable type allows for the arrangement of singular characters or letters to be set into a reproducible form via printing.

This practice is known as typesetting. Typesetting is the composition and arrangement of text and type for printing. Where typesetting has to do with the arrangement of type, typography is really about making choices.

Some of the most important considerations in typography are typeface, font, spacing (kerning, tracking, word spacing, leading), line length (measure), and hierarchy. This might sound jargon-heavy, so let us take a moment to define and bring clarity to these terms.

Further reading: Here is a list of other articles you might be interested in to learn new skills: Typing Tutors | Web Design Courses | Writing Skills

Typography – Typeface vs. Font

While the terms “typeface” and “font” are similar, they do not express the same thing. The difference is nuanced, but a typeface describes a consistent design or style within a collection or family of type where the variations within each family are known as fonts.

This nuance is not superfluous. Determining a typeface for a given task, project, or job will help us determine both the use of variation (font size, style, and weight) and the consistency of the overall aesthetic.

Consistency is important. It is through selecting a carefully considered typeface, the limiting of the number of typefaces used in a project, and by choosing complementary typefaces that we find consistency. Consistency gives design work coherence, ensuring that the text and its design both make sense from start to finish.

Typography – Spacing

“When I put my pen to a blank sheet, black isn’t added but rather the white sheet is deprived of light. […] Thus I also grasped that the empty spaces are the most important aspect of a typeface.” — Adrien Frutiger

Spacing is one of the most important considerations to make when it comes to typography. Unfortunately, spacing is something that is often overlooked by the beginner.

Type designers focus intensely on how typefaces are spaced, always considering the spaces between letters and words. However, the typographer must make additional spacing considerations depending on their aims. Below is a list of some of these considerations that we need to make in our design work:

Kerning
Kerning refers to modifying or adjusting the space between two letters or characters.

Tracking
Tracking in typography refers to modifying or adjusting the space between the letters of an entire word evenly.

Word Spacing
Word spacing in typography refers to modifying or adjusting the space between words.

Leading
Leading refers to modifying or adjusting the space between lines of text. Interestingly the term comes from the days of analog typesetting in letterpress printing where pieces of lead are used to separate lines of text.

Typography – Line Length

Line length (sometimes referred to as measure) describes the width between the left and right edges of a block of text. Line length changes depending on the choice of font size and spacing considerations.

The average amount of characters on each line is the measurement. The optimal amount of characters for casual reading on each line is generally accepted to be somewhere between 45 and 75 characters depending on purpose and audience.

If we are thinking about designing and typography for the screen, we can be a bit more forgiving. For instance, a blog might easily have up to 100 characters per line and still be both legible and perfectly readable.

Luckily, responsive technology has taken much of the guesswork out of how we might think our text will appear on different-sized displays. We should still always be conscious of how our line length is apt to change depending on where and how it is displayed.

Typography – Hierarchy

Typographic hierarchy describes different levels of visual information that can be used to contrast and discern between different elements of a text or design. This might be done by using different typefaces, font sizes, weights, styles (bold or italics), colors, alignment, or text direction and orientation. Typographic hierarchies can be organized into three levels:

Primary: The most important information. Often bold and big. The primary level is reserved for eye-catching headlines and information that you want the reader to see first.

Secondary: Sorts information into different sections. It consists of scannable information such as subheadings, pull quotes and other textual elements that help to orientate the reader and add support to the primary level.

Tertiary: The main text. This is the text you want the primary and secondary levels to draw your readers to. It should be in a smaller font with a consistent typeface and shoot for readability.

A consistent hierarchy gives structure and flow to the text. Like many of the other typographic decisions we make, how we design the hierarchy should make our written communication accessible, clear, and enjoyable.

Digging Deeper – The Anatomy of Typography

There is plenty to consider when working on typography. The terminology and concepts might seem daunting for a beginner. However, as in learning anything, it is good practice to become acquainted with the language of what it is you are learning.

Things get even more complicated when we begin looking at the anatomy of typography. It is a jargon-rich topic, but it is important to keep in mind that only a basic understanding of the vocabulary is required to begin working with type.

What follows is an analysis of the anatomy of the various letter and type forms. The vocabulary presented below is likely more useful to an expert type designer or typographer. But becoming acquainted with the parts, shapes, and various forms of letters can help the beginner make better informed typographic decisions.

Again, one doesn’t need to memorize the above terminology to practice good typography. The ability to visualize the various parts and behaviors of different letters can help to overcome some of the typographic barriers that a designer might face.

The most important considerations to make based on the anatomy of a typeface are spatial. We have already covered some of the more crucial spatial elements, but let us take a moment to review eight more:

Cap-Height: the height of any uppercase letter in a font. 

Cap-Line: an imaginary line that marks the maximum height of a capital letter.

X-Height: the vertical distance between the baseline and mean line as measured by the lowercase ‘x’.

Baseline: the imaginary line on which the bases of the letters sit.

Mean Line: the imaginary line at the top of the x-height at which the top edge of lowercase letters mark.

Ascender: an extender that goes above the mean line such as those found on the lowercase letters ‘b’, ‘d’, ‘f’, ‘h’, ‘k’, ‘l’, and ‘t’.

Descender: an extender of a letter that goes below the baseline such as with the lowercase letters ‘g’, ‘j’, ‘p’, ‘q’, ‘y’

Sidebearing: the spacing between characters to create an even appearance often determined in relation to the letters ‘H’ and ‘O’ requiring some consideration.

Some of the other elements that we need to consider in a spatial sense are with the arms, legs, swashes, and serifs that risk bumping into or overlapping with other letters. 

Understanding these elements will help a typographer or designer with their spatial reasoning and prevent them from causing unsightly collisions between words and letters. Conversely, it can allow for an artist or designer to play with letter and word forms in a variety of interesting ways. 

Typography – Typeface Classifications

Typeface classification systematically divides into categories based on their history and common characteristics. For this typography tutorial, we will look at four type classifications: Serif, Sans Serif, Script, and Display. Some of these categories host several subcategories that are further divided by historical usage or based on the similarity of each typeface.

For instance, two subdivisions of serif typefaces are old-style and modern serifs. Old-style typefaces date back to the 15th century. Modern serifs date back to the 18th century and are characterized by their contrasting thin and thick lines. Understanding the history and main characteristics of a category can help us choose a typeface suitable for any given project. 

Typography – Fonts & Font Families

A font is a set of letters or characters of a single particular face and size. A font family is a group or set of fonts that share a common design but differ based on each weight (light, regular, bold, oblique, etc.), slant (roman, italics, oblique), and spacing (extra-condensed, condensed, standard, extended, etc.).

More recently, Opentype fonts have packaged multiple fonts from a font family into a single file making design work far more efficient and simplified. 

Choosing a Typeface. Playing With Fonts.

The face of a project will be defined by your typeface and font choices. Depending on your task, project, and ultimate goal the typeface you use can either help or hinder the message you are trying to deliver. For instance, it is highly unlikely that an entire novel would be typeset using a script based typeface. Why not?

Imagine how difficult it would be to read a novel like this! Good typography aims for clarity, legibility, and readability. Sometimes, though, a job calls for experimentation. Depending on the purpose of the design, it is perfectly acceptable to break some or all of the rules.

It is wise to set your job in a variety of different typefaces and fonts to see the subtle differences each one can make. Be sure to experiment and be open to several options before committing to one. Below we will take a look at a few examples and some basic guidelines of typeface and font usage for the beginner to keep in mind.

Bottom-line – Choose a typeface and font that suits the job and reinforces the purpose and meaning of your communicative aim.

What is Typography? Summary and Conclusion

“By all means break the rules, and break them beautifully, deliberately and well.”
― Robert Bringhurst

Typography is really about choice making. As this typography tutorial has highlighted, there are many considerations to make when working with type. The more we understand the history and practice of typography the better choices and decisions we might make. Understanding some of the basic rules and practices of the trade will make us better designers.

Indeed, there are libraries worth of books on defining the rules of good typography. However, as with any set of rules, we don’t learn much without first breaking them.

This typography tutorial provided an overview of the main principles of typography and how they can be applied. We hope that it has encouraged you to continue investigating the uses and benefits of typographic knowledge. We also hope that it has inspired you to begin doing typography.

You can learn many things by reading and observing, but experiencing and doing are what count. So we urge you to experiment with your new-found knowledge.

Make something and break some rules along the way. The aim should be to make a project look good, make sure it is coherent with and faithful to the goal, and be sure that it gives and reinforces the meaning of each aspect of your design, writing, and text.

What is typography in your opinion? How can you improve the typography of your work further? Please share your tips in the comments below.

Image credits: Typing Anatomy (modified) – Cydney Clinton. CC BY-NC-ND 4.0. | Jrinkerdesign – Modified, CC0