Design 101: All Things Typography

Design101Typography_Featuredimage.jpg

Welcome back to for the final part (at least for now) of my Design 101 series. This week I am covering all things typography, from the difference between typeface and font to some tips on combining typefaces. Let’s get started!  

Welcome back to for the final part (at least for now) of my Design 101 series. This week I am covering all things typography, from the difference between typeface and font to some tips on combining typefaces. Head over to my blog and let’s get started!

Typography is defined as the the style, arrangement, or appearance of printed letters on a page. Typography refers strictly to the printed word, while calligraphy and handlettering refer to different ways of writing letters. Back in the old days, having typed and printed documents took way more time because you had to use movable type and physically line up individual letters made of metal and/or wood blocks to create the words you needed printed. Very tedious work. Now we can open up Word and in a matter of minutes have a printed document full of type.

 

Typeface vs Font

Typeface and font are used pretty much interchangeably now, but back when printers used the movable type, typeface and font were two different terms.

A typeface refers to a certain letterform design that share the same design characteristics and includes all weights, styles, and sizes within that design. Helvetica, Arial, Times New Roman, and Century are all typefaces.

A font is more specific and is the complete set of characters that have certain variations, like weight and size. Helvetica Bold 16 pt, Arial Black 24 pt, Times New Roman Regular 12 pt, and Century Gothic 18 pt are all fonts.

 

Font Measurement

Graphic design has it’s own set of units for measurement...yeah, we’re cool. :) Point and pica are the main two units we use most often when it comes to printing. There is also pixel, which are the web design equivalent to points. Fonts are measured in points and you will see that unit for the font size and in reference to letter spacing.

12 points = 1 pica  |   6 picas = 1 in   |   72 points = 1 in

 

Anatomy of a letter

A letter has an anatomy, just like people do (and we have a lot of the same parts! haha).

 

A letter has an anatomy, just like people do (and we have a lot of the same parts! haha).

Let’s start with explaining the three horizontal lines shown in the graphic above:

 

  • Baseline: Horizontal line where the main body of the letter sits
  • X-height: height (from the baseline) of the lowercase x in a typeface
  • Cap height: the distance from the baseline to the top of capital letter; determines the letters’ point size

 

Now the rest of the terms :)

Arm: a horizontal or upward sloping stroke that doesn’t connect to another stroke or stem on one or both ends

Ascender: the part of the letter that extends above the x-height of a lowercase character; sometimes extends above cap height (ascender line)

Aperture: partially enclosed negative space created by a letter

Bar (crossbar): horizontal stroke that connects to another stroke or stem on both ends

Bowl: the curved part a letter that completely encloses negative space (counter) within it

Bracket: a curved or wedge connection between the stem and the serif of a letter

Counter: curved or circular negative space enclosed within a letter by the letter’s stem and bowl

Cross stroke (not shown above): horizontal stroke that crosses a stem (i.e. for ‘f’ and ‘t’)

Descender: the part of a lowercase letter that extends below the baseline

variants of the lowercase letters ‘a’ and ‘g’ that basically have two curved enclosed or partially enclosed portions of the letter rather than just oneDouble-story: variants of the lowercase letters ‘a’ and ‘g’ that basically have two curved enclosed or partially enclosed portions of the letter rather than just one.

Ear: a decorative flourish that typically appears on the right-side of the bowl of the lowercase ‘g’

Eye: similar to a counter, but specifically refers to the space in a lowercase ‘e’

Finial: tapered curved end to a letter

Hairline: typical mostly in serif fonts, the hairline is the thinnest stroke in a typeface that has varying stroke widths

Leg: basically the opposite of an arm; a downward sloping portion of a letter

Lobe: rounded, projected stroke that connects to the main stem of the letter

Loop: the enclosed or partially enclosed counter below the baseline in a double-story ‘g’

Neck (link): the portion of a lowercase double-story ‘g’ connecting the bowl and the loop

Serif: a stroke added to the end of the main stems and strokes of a letter, see Typeface Characteristics for more on serifs.

Shoulder: a curved stroke starting from a stem and curving down (think of the shape of your shoulder :D)

Spine: main curved stroke of the lowercase and capital ‘S’

Stem (Diagonal or Vertical): main stroke of a letterform; can be a vertical stroke or diagonal in the case of ‘A’, ‘N’, ‘V’, and ‘W’

Tail: descending stroke, typically decorative, on the letter ‘Q’; can also be used as another term for leg or descender

Terminal: end of a stroke that isn’t a serif

Tittle (dot): the circular mark on the lowercase ‘i’ and ‘j’

 

Resources

http://www.typographydeconstructed.com/category/anatomy-of-type/

 

Typeface Characteristics

Classifications

Every typeface falls into 4 main style classifications: Serif, Sans Serif, Script, and Display/Decorative. From there they can be split into a myriad of other classifications like slab serif, black letter, monospaced, or modern. For now I will just stick to talking about the main four.

 

Serif

A serif typeface has an extra stroke, or serif, at the upper and lower ends of the main stems and strokes.

A serif typeface has an extra stroke, or serif, at the upper and lower ends of the main stems and strokes. Serifs can either be bracketed (curved transition between the serif and main strokes) or unbracketed (attach directly to strokes abruptly or at right angles). They can also be divided into 4 subgroups :

  • Old Style: Not much contrast in line weight within the characters; almost always have bracketed serifs; serifs on the upper portion of the stems are angled rather than straight
  • Transitional: More contrast in line weight than Old Style but not as much as Modern style, hence the name transitional; the serifs have a more rounded transition into the stem; many of the ends of the stems are more rounded, or ball, terminals.
  • Modern (Didone): Extreme contrast in line weight within the characters; unbracketed serifs; serifs are thin and horizontal instead of angled
  • Slab: Serifs are as thick or thicker than main letterform strokes; serifs are rectangularin shape; general style more varied, not determined by line width or bracketed/unbracketed serifs

More about Serif typefaces: https://en.wikipedia.org/wiki/Serif

 

Sans Serif

Sans serif typefaces are the typefaces without serifs.

Sans serif typefaces are the typefaces without serifs. These typefaces are also sometimes called gothic. Sans Serif typefaces can be divided into 4 sub-groups:

  • Grotesque: Not much contrast in line weight; capital letters tend to fit within a square in the regular width of the typeface
  • Neo-grotesque: an evolution of the grotesque style; don’t have much contrast in line weight; came about with the emergence of the Swiss style of type; probably the most well known neo-grotesque typeface is Helvetica (it has it’s own documentary!)
  • Geometric: based on geometric shapes, so the shapes are built from circles and squares (the ‘a’ is a good example above); clean and modern design
  • Humanist: inspired by calligraphy and serif fonts; varied style, many have more contrast in line weight; came about as a reaction against Helvetica

More about Serif typefaces: https://en.wikipedia.org/wiki/Sans-serif

 

Script

Script typefaces are based on a cursive or handwriting style.

Script typefaces are based on a cursive or handwriting style. They can vary from very casual and hand drawn to very formal and elegant.

 

Display/Decorative

This category is very broad since display typefaces are used to decorate a composition.

This category is very broad since display typefaces are used to decorate a composition. These typefaces are primarily used for titles and headlines and are best for type that will be a larger point size. These typefaces shouldn’t be used in a block of text, or body copy, because it wouldn’t be very readable.

 

Typeface Weights & Styles

Most fonts come in different weights, or stroke thickness, and styles. The most common weights and styles you will see are:

  • Regular/Roman/Normal
  • Bold/Heavy/Black
  • Medium/Demi-Bold
  • Light/Thin
  • Italic
  • Condensed or Extended

Some type designers even combine weights and styles to have Bold-Italic or Condensed Bold to add even more variety to the typeface.

 

Letter Spacing: Leading & Kerning & Tracking

Knowing when to adjust letter spacing is a skill that takes some time to master, but understanding the terms is a good way to start.

  • Leading is the vertical space between lines of type.
  • Kerning is the horizontal space between individual characters.
  • Tracking is similar to kerning but involves groups of characters or whole words.

You will mostly want to make adjustments in letterspacing to aid in the readability of the text and when the type is used in a title or headline. In general, the standard fonts included on your computer have good letter spacing for use in long paragraph form (like this!). When you do start getting into adjusting letter spacing, don’t rely on ruler measurements or anything exact. Letter spacing should be optically based. To help you get a better look at the letter spacing in a word or title, squint at the word and see if some letters are more spaced out than others.

 

Special Typographic Terms

A glyph is the graphical representation of a specific element of a language within a typeface. Basically it is referring to the specific shape of the letters, numerals, punctuation, symbols, and shapes (dingbats) that are included in a typeface.Glyphs

A glyph is the graphical representation of a specific element of a language within a typeface. Basically it is referring to the specific shape of the letters, numerals, punctuation, symbols, and shapes (dingbats) that are included in a typeface. Glyphs differ with every typeface. For glyphs that aren’t already on your keyboard, most programs have a symbol or glyph panel you can access.

 

 A ligature is a special combination of two glyphs that, when they appear next to each other, will form a single glyph.Ligatures

A ligature is a special combination of two glyphs that, when they appear next to each other, will form a single glyph. Ligatures aren’t used as much anymore, but you may recognize the ‘st’ ligature above from the Pinterest word logo.

Fun Fact: One glyph you may not know started out as a ligature is the ampersand (&). It was originally a ligature of E and t, forming the Latin word "et", meaning "and". This origin can still be seen in the ampersand designs of certain typefaces.Fun Fact: One glyph you may not know started out as a ligature is the ampersand (&). It was originally a ligature of E and t, forming the Latin word "et", meaning "and". This origin can still be seen in the ampersand designs of certain typefaces.

 

A dingbat is a funny term for a typeface that has symbols or ornaments instead of letters or numbers.Dingbats

A dingbat is a funny term for a typeface that has symbols or ornaments instead of letters or numbers. In the graphic above, the characters were typed in the Wingdings dingbat font and then shown in a sans serif font.  

 

Choosing a typeface

In my color theory post last week, I talked about the different associations and meanings we have with different colors. It is the same with typography. Different typefaces have different meanings and associations with it. Choosing a typeface to use for a design is not an exact science, but typefaces do have “personalities” so you have to make sure that the personality of the typeface matches the message you are trying to convey. As you learn more about typography and grow as a designer, font selection will become more instinctual.

Some general typeface meanings:

  • Script: feminine, romantic, elegance
  • Handwriting: personal, casual, carefree
  • Thin Sans Serif: modern, elite, upscale, sharp
  • Bold Sans Serif: modern, casual, masculine, professional
  • Serif: classic, traditional, fashionable, timeless
  • Slab Serif: bold, strong, funky, modern
  • Rounded: friendly, fun, relaxed

 

Combining typefaces

Like choosing a font, font combinations is also not an exact science. Picking a good font combination involves finding contrasting fonts that still have a unified connotation so they balance each other. This can be achieved by using different variations within a font family OR by using two (or three, more than that can be too chaotic) different typefaces completely. In the book Type Idea Index, Jim Krause covers some good questions to ask yourself as you are looking to pick a font combination:

  • Does it make sense that the visual voices of these particular fonts are working together?
  • Do their different characteristics amount to a unified thematic message, ie., professionalism, boldness, elegance, dissension, chaos?
  • Are the fonts meant to be speaking together harmoniously or contentiously?
  • Do the typefaces come from similar societal or historical backgrounds?
  • Should they share similar backgrounds?

The main thing to avoid when combining typefaces is using two typefaces that are similar in weight and size and/or are conveying similar messages.

 

Typographic Visual Hierarchy

I talked about visual hierarchy a lot in my first Design 101 post {check it out here}, but specifically in terms of typography, there are a few ways to establish a text hierarchy in your designs:

  • increase the size of the font: the biggest text conveys that it is most important
  • use a bolder weight: bold characters stand out against regular or thin font styles
  • add whitespace around the type: this sets it off from the rest of the composition
  • use other elements to point toward the main type element: you can literally use arrows :)
  • have the type be a strong color: for more on color choices, check out last week’s post about color theory
  • put the type in front of a contrasting background: putting a filled shape behind text can really set it apart
  • change the type to a display font that is more eye-catching or funky: just make sure it still conveys the right message

 

Some Random Typography Tips

  • Do not stretch or scale a font, instead look for a condensed or extended font
  • Avoid using the faux bold, italic, and small cap settings you can find in many design programs because it can distort the letterforms
  • Comic Sans and Papyrus have their place...and it is a very specific place. There are better versions of these fonts if the project calls for fonts like these.

 

Typography is an art form all it’s own. It’s an important tool in your graphic design tool kit. When you find the right combination and balance of text, color, and graphic elements to convey the message you want, your design will be rocking! It takes lots of practice, but I know you can do it.

 

Resources

http://www.thinkingwithtype.com/contents/letter/#topbar

http://ilovetypography.com/

 

Miss the other posts in the Design 101 series?

Back to the Basics

Power of Color Theory

 

Want to know how to get started in a design career?

10 Tips for Starting Your Design Career

 

Any other things about graphic design that you want to learn about? Let me know in the comments below!