Design Basics: Understanding Typography

In our last design basics post, we talked about color, and what it says about your brand. Colors are an important part of your brand, and not just because you want them to look pretty. Color can affect how your brand is perceived because of the personal and cultural associations we have with certain colors. But color isn’t the only element of branding that can hold associations and evoke emotion. Understanding typography is just as important for developing a strong, memorable brand.

What Is Typography?

You may have a general understanding of typography, but we want to make one thing clear: typography is not just picking a font. Typography is the visual form of written words. The type that you choose can evoke emotion and provide an element of expression. It makes up the gray fields in books, the large blocks of billboards, and the bright spaces of packaging. It’s the job of a designer to make sure that text is not only readable, but also that it conveys the right message.

Because type can be varied in size, color, font style, etc., it’s important to understand all the details, from spacing, to sizing, to typefaces, and beyond.

Typefaces

Typefaces are a way of categorizing different fonts and font families based on their style. While new typefaces are being created each day and the categorization of type becomes harder, there are 6 basic styles that are widely used.

Typeface families

Oldstyle

Oldstyle typefaces are typically characterized by an organic contrast of weight, either from a pen or a brush. There is an angled axis in the curves of the typeface (such as the curve of a lowercase “a”). The lowercase letters of an oldstyle typeface are distinguishable because of their small height.

Sans Serif

Sans serif typefaces branched from display types, which were popular in the nineteenth century. These typefaces are characterized by their lack of serifs (small “feet” at the end of a stroke). They are set completely upright with a uniform stroke. Sans serif typefaces are still legible even when set in small sizes and tight spaces.

Slab Serif

Slab serif typefaces are another branch of the nineteenth-century display types. A slab serif typeface combines the boldness of sans serif type with the horizontal stress of a serif type. Slab serif typefaces have a consistent stroke weight between the stems and the serifs of the letters. The bodies of slab serif letters are considered to be wider than typical letter bodies because of this consistent stroke weight.

Transitional

Transitional typefaces bridge the gap between oldstyle and modern typefaces. The stroke contrast of a transitional type is larger than the contrast of an oldstyle type, as well as the height of lowercase letters. Transitional typefaces are also more upright, with sharper serifs than oldstyle typefaces. However, they are not as extreme as modern typefaces in their stroke contrast and posture.

Modern

In modern typefaces, there is an extreme stroke contrast, making thick strokes large and bold, while reducing the thinner strokes to hairlines. Modern typeface letters are completely upright, and many of the serifs of lowercase characters are totally rounded.

Graphic

Graphic typefaces, while not commonly used for everyday text, are very expressive. These typefaces came from the decorative display types, and include script faces, handwriting, and more illustrated or conceptual characters.

Visual Elements

Each typeface consists of six elements: case, contrast, posture, weight, width, and style. Making small changes to these elements creates new typefaces, which can carry associations to a certain period or feeling.

Case

The case of a letter refers to uppercase, the large form, or lowercase, the small, more casual form. Uppercase letters need more space in between each character for more legibility, while lowercase letters are more easily recognized.

Contrast

The lines of a letter (also called the stroke) are sometimes varied in weight. The more one stroke is varied from another, the more contrast that type is said to have. Contrast can also occur within a single stroke, such as a flare from thin to thick. This is called modulation.

Posture

Posture refers to the way that the type leans. Roman letters are straight, with a vertical axis of 90 degrees. Italic letters, which were developed to give the appearance of a more handwritten style, slant anywhere from 12 to 15 degrees towards the right.

Weight

The weight of a letter’s strokes is determined by its overall thickness relative to the height of the uppercase letters in that typeface. The weight can be changed from bold, to black, to light within specific type families. Different weights can convey significance and add contrast in a design.

Width

The width of a letter in a typeface is based on the width of the uppercase M in that specific typeface. More narrow typefaces are known as condensed typefaces, while those that are wider are known as extended or expanded typefaces.

Style

The element of style describes three things. First, it describes whether a typeface has a serif, or if it is sans serif (no “feet” at the end of the strokes). Second, it tells us the historical period in which that typeface was created. And lastly, style describes how decorative or neutral a typeface is.

Spacing

When type is displayed at a standard reading size, our eyes perceive each letter to be the same height, width, and weight. As soon as this type is made bigger, however, we can start to see the small differences in the shapes, width, height, etc. of each of the letters. This is why designers need to pay attention to the uniformity of letters, spacing, organization, and composition. Sometimes, a designer might even have to make minute changes to the spacing of certain words or characters to make the text more legible or recognizable.

Kerning

Kerning is the space between two letters. In different typefaces, cases, or font sizes, the kerning between two letters can appear too large or small. For example, uppercase letters in almost all typefaces require more spaces between characters so that they are more legible. Kerning might also need to be used if letters are angled in a certain way or if they have serifs.

Leading

Leading is the vertical space between lines of texts. It may be used to add or take away space in between lines of text because lines that are too far apart or close together are distracting and can affect the readability of the text.

Tracking

Tracking is the visual space between all of the letters in a word. Some letters in a word may need more or less space between them, or that specific word may need all of its letters spaced out. Tracking should really only be used with larger text, such as headings or displays. When it comes to small text, like paragraphs or captions, leading should be used instead.

Choosing Your Typography

Okay, so now that we’ve talked about understanding typography basics, let’s move on to the fun part: how you can choose the typography for your brand. When you’re making this decision, it’s important to consider a few things:

  1. What will my type be used for? If you’re wanting a typeface for large spaces, such as buildings and billboards, you probably want something bold or more decorative (as long as it’s easy to read!). If you need a typeface for smaller text, like business cards, stickers, etc., you should look at clean, easily recognizable typefaces.
  2. Consider what your brand name will look like with specific spacing, posture, and cases. Lowercase letters are more easily recognized in large groups of text, so if you’re creating an infographic or an about section for your website, look at typefaces that have attractive lowercase letters. Make sure you know which typefaces you’ll need to make small changes to with your brand name (leading, kerning, and tracking).
  3. Am I using color in my type? If you plan to use color for a large portion of your typography, you need to consider how your brand colors (if you have them) will look with different typefaces. For example, if your brand colors are mellow pastels, you might want a thicker, bold typeface.

Need Some More Help Understanding Typography?

If you’re not ready to try your hand at design skills with typography, don’t worry! We can help you find a typeface that’s perfect for your brand at all sizes. Want to get started? Get in contact with us! We’re happy to help.

Thoughts or Questions?

Our blog does not accept comments, but we want to know what you think!  Tag us on Twitter to get the conversation started or contact us.