(click anywhere to close)

[Typography] Font Styles

category: Design | course: Typography | difficulty:

You’ve seen me mention that different weights or styles of one typeface multiple times, and now I will explain exactly what that means. They are simply variations on the basic idea or structure of a type family, which you can use for signalling changes in the hierarchy and highlighting (or commenting) certain parts of the text.

What variations could you possibly make while keeping the basic structure intact? Well, you can make the type lighter or heavier, you can make it narrower or wider, you can make it blockier or rounder, or you can make it more upright or more slanted.

Type Exercise: After reading this chapter, try to create a typographic design with a clear hierarchy using only different font styles from the same typeface.

Heavy versus Light


A font is called heavy if its strokes are thicker than the regular version. There are, of course, gradations. When a font is only marginally thicker, it’s called semibold. When a font is quite a bit heavier, it’s called bold. A font that is extremely heavy is called black or sometimes extrabold.

On the other hand, a light font has thinner strokes than the regular version. Because the regular letters are actually quite thin already, fonts usually have at most a single light version.

If there’s even more heavy or light versions, however, they are often designated by numbers; 100 being the thinnest, 900 being the thickest. In this case, 400 or 500 is about regular size.

Bold letters have decreased white space, which actually makes them seem smaller than lighter counterparts. This is often countered by making them slightly higher or broader; either way, the counters need to stay clear and open at all sizes.

Light typefaces are best suited for those messages we want to look delicate and elegant. Use them to accentuate rhythm and lend emphasis to other parts of the design, or in pieces of text with a very small size.

Condensed versus Wide


Instead of only changing strokes, it’s also possible to change dimensions. A font is condensed if its letters are much higher than they are wide. A font is wide if the opposite is true.

Again, gradations are possible, but not often. It’s hard to condense or stretch a font without making it look ugly or unreadable, and only expert sets have such well-designed variations.

Sensationalist newspapers or designs usually employ bold, condensed typefaces. This allows them to attract attention, whilst being economical with their available space.

Upright versus Slanted


The default form of letters is (nearly) upright, which we call roman. If the letters in a font are slanted, which means they have a much more diagonal stress, we call them italic. Italics are usually the best way to emphasize or highlight words, as they are less attention-grabbing than heavy typefaces, yet fit better within the flow of the text. In general, pick italic over bold.

Blocky versus Round


Though not as common, some typefaces have different styles that are more radically different. A blocky font has the curves and serifs of the original made more geometric and square. A rounded font has all parts of the letter made more round and curves exaggerated. Rounded fonts are therefore sometimes called soft.

Traditionally, rounded forms seem more playful, happy and fun, while blocky forms are more serious, formal and cool.

Uppercase versus Lowercase


Though technically not a style, the difference between using only uppercase or only lowercase letters is quite huge. In general, refrain from using uppercase letters only for sentences longer than a single lines. Do not be afraid to use them, though, as they can be great in headlines or highlighting. Nevertheless, within body text, it’s best to use small caps instead of fully fledged capitals, as the latter often interrupts the flow too much. Small caps are also recommended for displaying roman numerals.

A Huge Word of Warning

The styles I described above, should be separate font files. On the computer, when you want a typeface bold or italic, it will look for the corresponding font file. If it can’t find it, however, it will mechanically thicken or slant the letters following a standard algorithm. Don’t let this happen to you.


Type Error: Never, ever, distort type or use fake variations.

Instead, find a typeface that naturally supports all the variations you need. This means you shouldn’t use fake bolds, fake italics, fake small caps, or fake condensed/wide versions (by distorting the letters yourself).

You could, if needed, make a letter bolder by adding an outline around it yourself. This can actually be used to great effect, as long as they don’t intrude with the letterforms – instead, always place them outside of the letter. Because it’s so easy to add bold variations to a typeface, there are some fonts that had their “official” bold version added later. Be wary of this, as this is still not the way to go.

Type Error: No, underlined is not a font style, and don’t use it when you don’t really have to.

Placing text directly over images, or images directly over letters, is not recommended. I’ll discuss some ways to eliminate this problem later in the course.

Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk