Learn about font styles!

When fonts work together they can communicate messages. Some fonts are barely noticeable while others can communicate feelings on their own. Fonts are classified into categories, but the main two are serif and sans serif. What is a serif? It is the decorative line attached to the end of a stroke. What does the word “sans” mean? Without. So sans serif means "without a serif." Serif fonts are considered traditional and formal, whearas sans serif fonts are more minimalist and clean.

Test your knowledge

Select the sans serif font:

• Montserrat
• Courier New
• Georgia
• Times New Roman

Kearning deals with the space between letters. Imagine that all letters have a box around them and the boxes have to butt up against each other. Picture a T with lots of space under it. Letters look more cohesive when they are nested under the line of the T, as in Te. That’s where kearning comes in! All good fonts will customize the relationship between letter pairs like this.

Test your knowledge

Select a letter pairs that needs some special kearning to look right:

• W A
• H O
• T E
• B R

How do you know what typefaces will work together? Fonts have a relationship with each other on the page. It can be one of these 3 types:

👍 Concordant:

Fonts of the same family, but varying thicknesses and sizes. This works well.

For example:
Narrow or Thin, Bold and Black, Normal.

👎 Conflicting:

This happens when fonts are similar, but not the same. Don’t do it! The similarities conflict.

For example:
Using an italic and a script together.
Using Times New Roman and Georgia together.

👍 Contrasting:

When you combine two distinct fonts they can be exciting and visually appealing. Make sure they are very different so it looks like it was on purpose!

For example:
A Bold Serif with a Sans Serif
Sans Serif and a playful font
ALL CAPS & a beautiful Script

Test your knowledge

Do these fonts contrast or conflict?

Arial & Montserrat

• Contrast
• Conflict

There are six main categories of type: Old Style, Modern, Slab Serif, Sans Serif, Script and Decorative.

Old Style

These serif fonts have a noticeable thick to thin transition. They have a slanted serif, and diagonal stress to mimic the angle of the old pens.

Test your knowledge

Select the fonts that belong to the Old Style category:

• Baskerville, Garamond
• Bodoni, Playfair

Modern

These serif fonts have a perpendicular serif line, and a vertical stress (meaning it's thicker on the vertical strokes). It no longer looks hand-drawn, and is more extreme in the thick and thin contrast.

Test your knowledge

Select the fonts that belong to the Modern category:

• Bodoni, Playfair
• Comfortaa

Slab Serif

This serif style came along with the industrial revolution and is thicker all around, and more readable than the modern or old style serifs.

Test your knowledge

Select the fonts that belong to the Slab Serif category:

• Anton
• Roboto Slab

Sans Serif

Usually monoweight–no thick/thin transitions–and no serifs on the ends of the strokes.

Test your knowledge

Select the fonts that belong to the Sans Serif category:

• Garamond
• Montserrat

Script

Hand lettered, calligraphy, cursive. Use sparingly.

Test your knowledge

Select the fonts that belong to the Script category:

• Lobster
• Georgia

Decorative

Very expressive and distinctive. Not for text blocks. Use sparingly.

Test your knowledge

Select the fonts that belong to the Decorative category:

• Bungee Shade
• Verdana

Old style and modern serif fonts look a lot alike and it could be confusing to tell them apart, but they have some distinct differences to the trained eye. Look at the serifs and see if they are perpendicular or angled? Look at the thinnest part of the letter forms, are they vertical or angled? This is how you can distinguish between “Old Style” and “Modern” serif fonts. It's important to name these font types because they can be conflicting if you use them together.

Test your knowledge

What style is this font?

Chonburi

• Modern
• Old Style

Alegreya

• Modern
• Old Style

Contrast is a basic principle of design. It’s what makes a reader look at a page. “Avoid elements on the page that are merely similar. If the elements are not the same, then make them very different” (Robin Williams, The Non-Designer’s Design Book, 13). When pairing fonts, use their differences to make striking combinations. Remember: opposites attract!

Test your knowledge

Pair a large and a small font?

• Do
• Don't

Pair a HEAVY WEIGHT FONT with a thin font?

• Do
• Don't

Pair an italic font with a script font?

• Do
• Don't

Pair a modern font with an old style font?

• Do
• Don't

Pair an ALL CAPS FONT with a lowercase font?

• Do
• Don't

Pair an italic font with a regular, straight up font?

• Do
• Don't

Pair a bold font with a curly script font?

• Do
• Don't

Use color to make an impact. Create repetition in your designs by incorporating color into your text headers, or use color to emphasize words or phrases. Colors have power. Warm colors stand out, and cool colors recede. To use a cool color effectively, you will generally need more of it!

Test your knowledge

Check out these colors, click on the cool colors that would recede--and change them to a color that would POP!

Color 1

Color 2

Color 3

Color 4

Color 5

Color 6