Typography Design 101: a Guide to Rules and Terms

But it wasn’t always about technology. Movable type was invented in the early 15th century thanks to Johannes Gutenberg, and revolutionized typography by allowing the mass production of printed materials. Yet even before printing techniques existed, people were still determined to create books or type-based posters. They just did it by hand, with a lot of patience and dedication. Human beings have alway created written messages—a lack of paper and proper writing tools never stopped us. Ancient civilizations carved their glyphs into stone or wood.

If we look at the evolution of typography and all the tools and techniques used so far, we will notice an ongoing battle between the hand crafted and the machine made, between the organic and the geometric. Today, radically separating the two worlds, as well as harmoniously merging them, gives birth to new and unusual results, fueling a never ending cycle of typographic exploration.

Typography design terms you need to know
—

There are some basic rules and design terms you need to know before you dive into typography. Here are the most important ones:

Typography Style

Letters come in many many different shapes and styles. Categorizing them can be challenging as there are many factors to take into consideration: their looks, the inspiration for them, the era they appeared in and their usage. For the sake of simplicity, we often refer to three major style categories and then split those into smaller ones.

Serif

The first serif typefaces were inspired by traditional calligraphy, and are called Humanist or Old Style. This style is characterized by smooth and rounded forms and slight weight variations.

Around the mid 18th century a new type of serif emerged, which we now call Transitional. This style marks the transition between the Humanist and Modern styles, so it combines a little of both styles’ characteristics.

By the late 18th and early 19th centuries, a mode radical serif style was born: the Modern. We can recognise this style by the sharp weight contrast and the thin, straight serifs.

With the rise of advertising in the 19th century, Egyptian or Slab Serifs were introduced. Thanks to their bold appearance and heavy serifs, they were the preferred style for displaying commercial messages.

Sans Serif

Sans serif typefaces became popular in the 20th century, and they also had a calligraphic influence, so we call them Humanist as well. We can observe a slight weight variation and an overall warm vibe.

In the mid 1900s Helvetica was created, setting the bar for Transitional sans serifs. These letters are uniform and more rigid than the previously used ones, lacking the hand crafted element.

Geometric sans serifs are the equivalent of Modern serifs. They are built on geometric forms (the letter O is a perfect circle) and the peaks of letters like A or N are sharp and strong.

Cursive

Script letters imitate handwritten and calligraphic styles and they can be anywhere from sleek and formal to messy and effortless.

Brush faces are close to Scripts, but they draw inspiration from brush lettering. This makes them bolder and less elegant.

Finally, the Gothic or Blackletter style has traditional felt tip calligraphy at their base. The style is developed from Carolingian minuscule, and by the mid-12th century a new style was created with sharp, straight and angular lines.

Font vs. typeface

I’m certain we’ve all been confused at some point in life about the difference between a font and a typeface. I definitely was!

A typeface (or a font family) is the visual design of the letterforms and it consists of multiple font formats. In metal typesetting, a set of physical letters is considered a font, containing every existing letter, numeral and punctuation mark as a separate element. In the digital world, the font is the software we install and use.

A full font family can have an overwhelming amount of styles: from super thin to ultra black and from extra condensed to super wide, all in regular and italic.

But wait, that’s not all. Some faces also have small caps (uppercase letters that only extend to the x-height), lining numerals and non-lining numerals (numbers that extend beyond the baseline and x-height, integrating more seamlessly into blocks of text) and in some cases even a few extra alternate characters. That’s quite a lot, huh?

The rules of typography design
—

Yes, I know, rules are meant to be broken, but in order to break the rules in a way that won’t make a designer cry you need to learn them first.

When working with type and arranging paragraphs on a page we need to pay attention to a few factors and make sure the thing we’re designing will be legible and clear. Except of course, if you’re creating some abstract, experimental typographic poster, aiming for total chaos and anarchy. If that’s your jam, go for it. But if you’re working with long bodies of text, meant not only to catch the viewer’s eye but to actually portray a message in a straightforward way, you need to be mindful of every decision you make.

Alignment

Alignment refers to arranging a body of text on a page, more specifically, aligning its edges to those of the page. There are 4 types of alignment, but bare in mind that none is less correct than the other, they simply have different looks and express different vibes.

Flush left

This is probably the most commonly used alignment, as it follows the natural flow of most languages. When using this alignment one must pay attention to creating a well balanced right edge, with row lengths that have a natural feel.

Make sure to avoid lone words on new rows. These are called “widows” and they are sad.

Flush right

Opposed to the flush left alignment, the flush right goes against the natural flow of most written languages, which can also be used to our advantage. Be mindful though, that this alignment creates an unusual look and it can be hard on the eyes when used in long paragraphs. In order to have a clean right edge, try to avoid lots of full stops or commas at the end of the rows.

Centered

If done poorly, a centered alignment can look rather boring and messy. With a lot of attention though, it can create an elegant yet dynamic feel. The key is to play with the lengths of the rows, while maintaining an overall balance.

Justified

Although it can look modern and clean when done well, justified alignment can go really wrong very fast. Because the words have to fill the whole row, awkward spaces can occur between them. Be sure to even everything out nicely and again, if necessary, play with the size of the text, the lengths of the text box and the kerning.

Typography Tracking

The process of adjusting the overall space between letters is called tracking or letter spacing. In most cases one will apply positive tracking rather than negative, in order to create a more open and airy composition.

The bigger the text gets, the bigger the space between the letters gets and so the tracking needs to decrease. Similarly, if the text size gets smaller, we need to increase the tracking.

Increasing the tracking can get tricky, as we often have the tendency to apply more than actually needed. A tip to remember is that uppercase letters allow a more generous tracking than lowercase.

Kerning

Kerning refers to modifying the space between individual letters. Even though in most cases we can get away with applying tracking, we sometimes need to get in there and tweak the space solely between two letters. These “kernable” gaps will most commonly appear around letterforms like A, W, V, T.

Oh look, here’s a little game to test your kerning skills!

If we work with well-constructed typefaces, we won’t need to apply massive amounts of kerning. If we do though, we have the possibility to apply optical kerning (which is automatically executed by the program we’re working in) or metric kerning (which will use the kerning the type designer intended when designing the typeface) in our editing app, or we can do it all manually (using our intuition and experience).

Analyze your letters and apply the tracking method that best suits the purpose. Also, keep in mind that just because optical kerning will work fine for a certain typeface, doesn’t mean it will be the best choice in all situations.

Leading

The distance between two lines of text is called leading or line spacing. By adjusting it, we can play with the texture and color of the paragraph, creating visual interest and building hierarchy. The optimal size of the line spacing depends on various things, such as the volume of words in relation to the usable space, the display size or simply the vibe we are going for.

Hierarchy

Hierarchy helps us in creating visual interest and in guiding the viewer’s eyes across the page, making the process of absorbing text a lot easier and intuitive. The most obvious and easy way we can create some hierarchy is have our information written in different sizes.

We can also create an interesting hierarchy by tweaking a letter or the line spacing or by adjusting the size of our text. We can also mix up the styles used or the colors or use special characters or different alignments and layouts.

The way we decide to arrange our text—specifically what parts to bring to the front—is highly dependent on what type of material we are preparing the text for: print or digital. If it’s for print, is it a newspaper spread with lots of text, a magazine cover with a main title and some shorter ones presenting the content of the magazine or a poster with title and some info, such as dates and locations? If it’s for the web, what is our goal with the page: what is the length of the text we need to display and who are we designing it for?

However, using hierarchy is not always about highlighting certain parts of the text. We can also use hierarchy to create visually interesting compositions, like patterns and shapes, by changing the weights, the colors and sizes.

Keeping all these references in mind will help us in constructing a proper hierarchy, without overwhelming the reader.

Grids

One of the most important elements in the process of working with bodies of text is the grid, and it can be anywhere from simple to complex. By using grids, we are basically framing the information on a given page. This gives us better control over how we arrange the elements on our page. With the correct usage of grids, we can create compositions that guide the viewer’s eye, making the information easy to process and understand.

As with everything, we can work with simple and plain grids, or we can go totally wild and come up with intricate and complex ones.

Another very important thing to keep in mind when arranging information on a page is white space. Befriend it and keep it close to you at all times.

Many have the urge to fill every corner of the page with text or images but having generous amounts of white space is usually a good idea. It gives the information breathing space, it makes the composition more airy and it helps the reader move through the information.

The power of typography
—

Typography design has massive power to influence a message. When used in the right way—a proper combination of style, size, hierarchy, kerning and line spacing—there’s nothing you cannot express with it. From formal and elegant pages to dynamic and mind-bending compositions, you can do whatever your imagination can come up with.

By understanding the rules and facts about letters and the various ways they can be used, we are able to express ourselves through them in endless ways. These rules are nothing but a guide. I highly encourage you to go ahead and break all of them! Learn, experiment, forget what you learned, make mistakes and start over. By doing so you will develop a style that is unique to you.

Article Provided By: 99 Designs

If you would like to discuss Your Logo with Mojoe.net or your website’s analytics, custom logo designs, social media, website, web application, need custom programming, or IT consultant, please do not hesitate to call us at 864-859-9848 or you can email us at dwerne@mojoe.net.