Making Typography Work for You

Introduction

When it comes to designing for the web, and more specifically writing for the web, there is nothing that can make quite as much of an impact as your typography. Typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader. Typography can oftentimes be a distinguishing characteristic between amateur and professional work. For this blog I am going to focus primarily on how typography can affect the visual appearance and the mood of your work.

An Abridged History of Typography

I think it is important to start by looking at the history of typography and how it evolved over the years. The history of typography can really be traced back to the mid-15th century when the printing press with movable type was created. Typography was done by a typographer, who was not expressing their own design preferences but instead providing the connection between someone who had something to say and someone to say it to. The first type was modeled after the handwritten Gothic Blackletter or textur that was commonly used all the way back to the 1100s up until the 17th century. The first type contained 202 characters and was soon followed by a second type that contained 300 characters. These heavy Gothic-style types were eventually replaced in Italy by old style Latin types called antiqua. The transition to modern type was made in the 17th and 18th century when the types began to combine classical features with more vertical stress and higher contrast between the thicker and thinner parts of the lettering. The 19th and 20th century typography introduced the slab serif font family which is independent from the two main categories, which are the serif fonts and the sans serif fonts. We will go into the categories of type more in the next section. 

Categories of Typefaces

All of the typefaces found out in the world can be categorized into one of six main categories. The six categories are old style, modern, slab serif, sans serif, script, and decorative.

The first category to talk about is old style. These typefaces are based on the hand-lettering of scribes, and replicates the human pen stroke.. Old style types can be characterized by a diagonal stress (see #2 in the image above), a moderate thick/thin transition (#3 above), and slanted serifs on lower case letters. A thick/thin transition is exactly like it sounds; it is the transition between the thick part of the letter and the thin part of the letter that would have been created by the stroke of a wedge-tipped pen used by scribes. When I use the word serif I am referring to the projection of the end of the lettering, either at the top or the bottom.

Typefaces follow trends and are usually affected by lifestyle and cultural changes. For this reason during the 1700s we saw the rise of the modern typefaces. Modern typefaces are characterized by vertical stress, radical thick/thin transitions, and a thin horizontal serif on lowercase letters.

During the Industrial Revolution we saw the rise of a new form of typography: advertising. The problem with modern type and old style type is that from a distance the thin segments of the letters disappeared. The solution to this problem was simple: make the whole letter thick. The slab serif font is characterized by little to no thick/thin transition, large slabbed serifs on lower case letters, and a vertical stress.

Sans in French means “without,” therefore a sans serif font is a font without serifs. Sans serif fonts did not come about until early in the early part of the 20th century. They become popular because of their clarity and readability from a distance, which was useful in advertisement. The most famous sans serif typefaces are Helvetica, Arial, and Verdana. These typefaces have no thick/thin transition and also no serifs.

The script category contains all types that look handwritten. They commonly resemble the strokes of a calligraphy brush or pen but can include any type that is handwritten. Script types can connect the letters like in the example above but it is not a requirement for a type to be considered a script.

Decorative types are types that do not really fit into any of the other categories. A decorative type is very distinctive and can be distracting to the reader so they should be used sparingly. Decorative type can vary greatly to fit any mood you are trying to express. 

Choosing a Typeface

To effectively use type you have to start by doing some research of your own. Look through different types of media and see what types speak to you and what moods that those types portray in the work you are using. For example, if you are writing a memo to your co-workers about the dress code in the office you will probably not use a decorative font, you would better to use an old style or maybe a modern type that carries more of a sense of authority. If you want your website or blog post to have a more minimalist/modern look and feel you might consider using some type of sans serif type. You can use a script type combined with sans serif types to give your design a more retro or classic feel. All of these things can be accomplished simply by putting some thought into the type you choose to use. I always gravitate to sites and documents that use types that are different from the normal defaults that you see everywhere, like Arial, Times New Roman, and Calibri.

Final Thoughts

Personally, my favorite typefaces to use are usually thinner, clean-looking sans serif fonts to go with the minimalist aesthetic that I like to shoot for with me web design. However, the goal of this is not to persuade anyone into using the same type as me. I just wanted to introduce you to the wonderful world of typography, and give you the information I think is necessary to start making those design choices for yourself. A great place to start in my opinion is Google Fonts. Google Fonts is a great place to just look around and see different types and also download them so you can use them for yourself.

Resources

“Aesthetic Qualities of the Typographic Page.” Encyclopædia Britannica, Encyclopædia Britannica, Inc., www.britannica.com/technology/typography/Aesthetic-qualities-of-the-typographic-page. 

Williams, Robin. The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice. Peachpit Press, 2015.