Creative Design

Typography is both an art and a technique. Once created through printed materials typography is all about arranging type (letters or characters) in a way that enables learning and recognition.

However, typography is more than just the design of the letters and characters -- it also involves careful arrangement and selection of point size, line length, and spacing both on a single line and throughout an entire page. If you know the basics of typography, you will be able to lay out an arrangement of headers, paragraphs, etc. in an attractive and convincing way.

Typography is absolutely everywhere -- just look at your phone, a billboard, your coffee cup, or even the different styles used in this blog post. Once you’re conscious about the fact that typography is used all around you, you’ll start to recognize the differences between typefaces and why they might’ve been selected.

Typefaces vs. Fonts

Most people assume that these words are interchangeable, but they actually mean two different things.

You should use the word “typeface” when describing the creative work (what you see). This is a more abstract design term used when referring to the way a specific collection looks or feels. For example, Helvetica is a typeface.

If you’re describing the physical embodiment of the collection of letters and characters, you should use the term “font” (what you use -- whether that’s a file on your computer or a case full of metal letters). This is the tangible representation of that collection of letters and characters. For example, Helvetica Bold and Helvetica Light Oblique are fonts.

The Anatomy of a Typeface

Learning the anatomy of a typeface will help you articulate why you do or don't. Each part of a letter has its own special term, similar to bones in a human body. Below, you’ll see three diagrams that explain the makeup of individual letters, how these elements interact with each other, and how they sit on a line.

In the first example with the word “Faulty,” you’ll see the line where the letters sit is called the baseline. The distance from the baseline to the top of the capital letter is called the cap height. The x-height, located in between the baseline and the cap height, is the height of the body of the lowercase letter (in this scenario, it would be letters ‘a’, ‘u’, and ‘y’). The bowl is that round shape sticking off the letter ‘a’. See that little foot sticking off the letter ‘l’? That’s a serif. Finally, the descender is the longest point on a letter that falls beyond the baseline.

 

faulty

 

When typing the word “flash,” you’ll notice the f and the l joint together to form one character. This formation is called a ligature. The base of a letter is called the stem (similar to the stem of a flower). The curvy body of the letter‘s’ is called a spine. You’ll also notice the letter ‘h’ is actually taller than the cap height. The tall piece that goes above this line is called an ascender.

Flash

 

You’re probably already aware of the differences between uppercase and lowercase letters (in case you need a refresher, you can see these in the diagram below). In the uppercase letter ‘B’, you’ll see something called a cross bar. This is the bar that goes across the inside of the letter and connects one side to another. The empty space in the middle of letters such as ‘B’, ‘O’, or ‘A’ is called the counter. The finial is the tapered end of letters such as ‘e’ or ‘c’. The terminal is a type of curve that you see at the top of the letter ‘f’ or the end of the letter ‘j’.

 

Beef

 

Once you understand the basic it is important that you learn classification of types.