Typography Basics

Typography Basics

Maggie Toth

In the past 24 hours, you have come across countless different styles of typography. From web pages, signs, or even your coffee cup, typography is everywhere.

Don’t overlook the importance of typography. It plays a big part in strengthening your brand and generating interest in your product.


What is typography? 

The smallest details of type can make a huge difference when laying out an eBook, webpage, or logo.

Type consists of letters and characters. Typography is the art and technique of designing and arranging type. Each typeface, letter, character (and their arrangement) plays a role in how a message is expressed. Even small adjustments can impact the look and mood of your material.

How you use typography in a design impacts its overall theme, tone, and message. Your choice of typefaces and technique of setting type gives your copy legibility. It also creates character and style. For instance, if you use the same text with different typefaces, the mood of each text drastically changes. Typography can define and alter the message.


Type properties

Typefaces have been a central part of reading-writing society. They have evolved over centuries into the digital age.

A typeface is a collection of letters and characters. Even though each one is unique, letters and characters share specific shapes. So, a particular typeface contains shared patterns across a group of letters and characters.

Some basic terms for typeface:

  • Baseline: the invisible line where most text sits. Descenders such as the line in a lower case “p” extend below this.
  • Cap height: the length from the baseline to the top of the capital letter. Each typeface has a unique cap-height.
  • X-height: the height of the lower-case x for a typeface. Typefaces with high x-heights have better legibility at small font sizes: the white space between each letter is more legible.
  • Weight: the thickness of a font’s stroke. A typeface can come in several weights. Four to six weights—light, regular, medium, bold—is typical for a typeface.


Type classifications

The two main type classifications are serif and sans serif:

  • A serif is a tiny shape or projection that appears at the end of a stroke on a letter. A serif is easier to read in long, printed works because of the distinction between letters. Common serif typefaces are Times New Roman, Georgia, and Garamond.
  • A typeface without serifs is sans serif (from the French word “sans,” meaning without). Some common sans serif typefaces are Arial, Helvetica, and Calibri. You often see sans serifs in blog posts, webpages, and other web documents. They feel more modern and look great at lower resolutions.


What is readability?

Readability refers to how the type is arranged and how easy it is to read words or blocks of text. Readability is affected by the style of a typeface. 

Kerning is the modification of the space between two letters. It also refers to the process of adjusting them. Kerning is used to adjust headlines, logos, and typographic compositions 

Tracking is also known as “letter-spacing.” It is similar to kerning except for one major difference: it refers to the overall spacing of letters in a word rather than just two characters. Tracking allows you to adjust the spaces in any text evenly.  Larger type sizes, like headlines, use tighter tracking to improve readability and reduce space between letters.

Kinetic typography

Kinetic typography, or “moving text,” is an animation technique that brings fonts to life. It mixes motion and text using animation to express ideas. Kinetic typography is excellent for grabbing attention. It can be found everywhere, from website landing pages to videos. A beautiful example of kinetic typography can be seen in “The Light in the Dark” by Eli Guillou.


From webpages to videos, typography impacts the appearance of your materials; how you use it can draw attention to your products, and, in turn, develop your brand.