Design Basics: Typography

Typography is the art of letter and text arrangement that makes legible copy clear and appeals visually to the reader. Typography includes font style, appearance, and structure aiming to elicit specific emotions and messages. In essence, it is what brings text to life.

History of Typography

The history of typography dates back to the 11th century, with the innovation of moveable type. Typography was a specialized craft associated with printed formats such as books, magazines, and newspapers which led eventually to public works.
Modern day we see primary use of typography in the digital space, though there is still plenty of printed media. The difference is typesetting is done on computers rather than the printing press.
The birth of the internet has led to a creative explosion of typography. This led to an abundance of available fonts allowing for a more diverse typographical landscape.

Importance of Typography

Typography goes beyond simply selecting beautiful fonts. Proper use of design principles apply as much to typography as to any graphics or design in general. Typography design should have hierarchy, contrast, balance, color, etc. along with other design elements in play. Typography when done well optimizes readability while including artistic means all while informing your audience.

Fonts & Typeface

There can be some confusion when determining the difference between typefaces and fonts, some even believe that they are one and the same. A typeface comprises a group of characters of varying weight and size, however, a font is a graphical representation of a letter form. In other words typeface or font family is a group of fonts that are related to one another. Font is the specific name of the style, width, and weights that make up a typeface (see example above).

Basic Styles of Typeface

The three basic styles of typeface are Serif, Sans-serif, and decorative. A serif typeface has small strokes/extensions in the letter forms (see example above), as well as varying stroke weights (thick & thin). Sans-serif have none of these, they have an even width and no serif (sans means without). Decorative fonts are great for headlines and titles or when used in small amounts of text such as greeting cards. There are a couple of other styles worth mentioning. Slab Serif are more of a fixed width bolder version of standard serifs. Slab Serifs are typically used where a clean bold look is needed, such as headlines, billboards, etc. Script or handwritten styles are useful for emphasis and can add a little flair and versatility to your toolkit.

Example of hierarchy

Hierarchy

The most vital aspect of typography is in establishing proper hierarchy. Hierarchy aims for clear distinction of what should be read first. With attention spans so short these days one needs to be concise using typographic hierarchy that allows quick information consumption. Typically size is the most used element of hierarchy. Headlines should be roughly 2.5 times larger than your body copy with subheadings at 1.5 times larger than body text. Other factors to consider are case (All caps, small caps), weight (bold, thin), and color. All of these factors can vary slightly based on font choice.

Contrast

Similar to hierarchy, contrast allows your message to be conveyed through emphasis on which elements are most important. Proper use of contrast helps make your text interesting, meaningful and attention-grabbing. Contrast can be achieved by varying color, style and size of typeface. Create impact and break up the page with your contrast.

Consistency

Consistent use of typeface styles, weights are a key factor helping to avoid confusion and keeps the design clean. As a general rule use no more than three typefaces and avoid similar typefaces (ie don’t use multiple sans-serif or serif fonts). Sticking with the same style of typeface helps the audience understand and notice patterns as well as brand identity (think Coca-Cola). Use different weights of your font (bold, light) or italics to bring emphasis or draw the eye to more important pieces of information.

Negative Space

Negative space sometimes referred to as ‘white space’, is the space between lines of text, the letters themselves and the surrounding area of the text block. Often overlooked by the audience, proper use ensures readability and keeps the look less crowded and clean. Negative space when used properly gives a pleasing aesthetic and may take the form of margins or areas without graphics or text. See graphic below for example.

Color

Often color can be one of the most exciting elements of typography design. Creative use of color theory makes the product more appealing. Getting the color right helps the text to stand out and conveys tone to the message. Getting it wrong, however, can cause discord among other colors around and sometimes gives the audience a feeling of unease.

Conclusion

In conclusion there are many more facets to typography than we have discussed here. Typography has a tendency to be overlooked as a key component in successful design, blogs, books, etc.. However, if you can nail down the basic concepts your projects will flourish all the more.

Leave a Reply

Your email address will not be published. Required fields are marked *