Typography Basics

February 11, 2016 | graphic design

It seems that most people type on their computers rather than put pen to paper these days. You may know a little about typography, and maybe even apply some of what you know in your own documents. Would you like to know more about typography so that you can improve your visual communication?

Here is a basic definition of typography according to Wikipedia. “Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point size, line spacing (leading), letter spacing (tracking), and adjusting the space within lettering pairs (kerning). The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process.”

Let’s break this down a little bit so it is easier to understand. This article will introduce you to some basic typography terms.

Typefaces

A typeface is a family of fonts. Fonts are like children that all belong to the same family. Some popular typefaces are Times New Roman, Helvetica, and Arial. The fonts belonging to these typeface families can be black, bold, extra bold, hairline, regular, italic, condensed, or any other variation. Not all typefaces have the same number of fonts available. Fonts have varying degrees of thickness or style, but all of the fonts within a family have very similar characteristics. You put the typeface name and the font name together to get Times New Roman Bold. Regular is the default font for the typeface. The term font is often used in place of the word typeface, so don’t get confused.

There are several different groups of typefaces. The two basic groups are serif and sans serif. Any typeface that has a small decorative line attached to the end of the stroke is called serif and any typeface “without” these decorative lines is called sans serif. The most popular serif typeface is Times New Roman and the most popular sans serif typefaces are Helvetica and Arial.

examples of serif and sans serif typefaces

The example above shows some serif and sans serif typefaces. Notice that although each typeface is set at the same height, they all take up a different amount of space.

There are thousands of typefaces in existence today, and new ones are developed constantly. The difference between each family of typefaces is in the variation of weight, width, and the x-height (the height of the lowercase letters), and of course style. Most typefaces are created in foundries by type designers. A typeface can include standard letters (both uppercase and lowercase letters) or caps only (just uppercase letters). Being able to identify the name of each typeface can be challenging. Identifying whether the typeface is a serif or sans serif typeface is much easier.

Desktop Typefaces

New computers come with about a dozen typeface files already installed. These usually include the most popular typefaces, and vary from manufacturer to manufacturer. For instance, Helvetica comes with a Macintosh computer, but does not come on a PC. You can always buy new typefaces to add to your collection, or even find some new typefaces for free. Be aware that you need to have a license to use typefaces that did not come installed on your computer and that some typeface families can be expensive.

If you create a Word document and intend to share it with someone, you need to make sure the other person has the same typeface installed on their computer as well. If they do not have that typeface, their computer system will try to choose a typeface which is close. The other person will not see exactly what you created. If you want someone to see the exact fonts you used, then you need to either print out the document or convert it to a PDF (portable document format) before sharing. Typefaces and formatting are preserved in a PDF document.

There is a difference between the typeface files that you use when you create a document on your desktop and the typeface files used on websites. Desktop file types include open type font files (.otf) and true type font files (.ttf). Open type font files allow you to use alternative character selections and fancy glyphs, while true type font files do not have as much flexibility.

Web Fonts

For many years web designers were only able to use web-safe fonts, fonts that were already on the users’ computer systems, so their choice was rather limited. Over the years this has changed. More typefaces are now available for the web. However each browser (Internet Explorer, Safari, Google Chrome, Mozilla Firefox, and Opera) only recognizes certain file types, so a web designer must choose typefaces that have a full set of web fonts already created for them. A web font is a collection of all of the necessary file types used by the popular web browsers. These web font file types include embedded open type (.eot), scalable vector graphics (.svg), true type font (.ttf), web open type font format (.woff), and the next generation of web open font format (.woff2). People continue to use older versions of each browser so a web designer needs to take all of this into consideration.

In the past, computer monitors did not have very good screen resolution, so only very simple fonts could be utilized. With screen resolutions getting better, it is now possible for viewers to see more detail. This allows web designers to choose from a larger variety of fonts. Of course, the developer needs to make sure that these web fonts are available to each viewer, so he will either need to include the web font files with the website code, or have the website read a set of files from another web server, such as Google Fonts or Adobe Typekit. It does take a more effort to create a website that uses web fonts as opposed to using the standard system files.

A developer will usually stack the fonts, which means he will list the fonts in order of preference. An example of a font stack: Baskerville, Garamond, Times New Roman, Times, serif. If the first choice (Baskerville) is not found, then the second choice (Garamond) will be used. If the second choice (Garamond) is not found, then the third choice (Times New Roman) will be used. This goes on until the last typeface (serif) in the list. This is done so that the viewer is still able to see the website when some fonts are missing and cannot be rendered. A viewer will not be aware that the preferred font was not used. He will be happy because he can see the website and read its content.

Type Design

A graphic designer has access to many typefaces. A typeface should match the message you are trying to convey. For instance, you would choose a more conservative typeface for a law firm than you would for a nursery school or an entertainer. In general, it is best to keep the number of typefaces to a minimum for a particular project. Too many typefaces tends to confuse the reader.

She will then determine what point size(s) will look best on the project she is working on, keeping in mind that the viewer needs to be able to clearly read the text. For example, the size of the type on a billboard will be much larger than that used on a business card. Larger font sizes are generally used for the headlines and often the font will be bold. The hierarchy of the content based is considered.

A graphic designer focuses attention on the smaller details, while others may not. This includes negative space, the blank space around the text, which helps the text to be more readable, leading (line height), tracking (letter spacing), and kerning (adjusting the space within letter pairs). Sometimes drop caps are used for the first letter in a book’s chapter. Drop caps are larger, fancier letters.

You will most likely agree that it is much easier to read text which has been thoughtfully formatted, than to read running text that hasn’t been formatted at all. The reader will not realize the time and effort put into the type design by the graphic designer, but he will definitely appreciate the results.

I hope that this article has increased your understanding of typography. Look for more blogs about typography in the future. If you have any questions about how important typography is to your business' graphic design, please feel free to reach out to me at Lange Art & Design.