With so many different styles of fonts and typefaces out there today, it’s hard to know where to start. Learning the basics of type with this introduction to common font styles will have you feeling confident in your designs both for print and web.
I’m definitely not a professional graphic designer. I’ve never taken a class on typography, I know a minuscule amount when it comes to design hierarchy, and have only really brushed the surface of what some of my design software can do. However, what I do know are the basics of type, common font styles, and I do think I have an eye for what works together and what doesn’t.
Everything I’ve learned, I’ve taught myself by reading all of the articles and books I could find. I’ve also learned a lot by trial and error. Seriously, A LOT of trial and error. But hopefully I can help you out by teaching a bit about what I’ve learned when it comes to the basics of type and common font styles. I have some future articles planned out for you too on pairing fonts, as well as some of my favorite fonts and font pairings!
So let’s get down to it!
Introduction to Common Font Styles
To start learning the basics of typography, you first need to learn about the different types of fonts or typefaces. There are four main categories of text that all other fonts will fall into; Serif, Sans Serif, Script, and Display (or Decorative). Each category will also have several sub categories, but for the simplicity of this post we will stick to just the basic ones.
Serif fonts and typefaces are generally the most traditional fonts. A serif is a small line (“foot”) attached to the end of a stroke. Think of Serif style fonts as those that have little feet on them. Most Serif style fonts have a distinct contrast between the upstrokes and downstrokes where the downstrokes are thicker. There are some Serif fonts however, that do not have much of a difference.
Within the Serif category there are a few main subcategories. Old Style, Transitional, Modern, and Slab Serif. There are others, but these are perhaps the more common. Old Style tends to have the thinnest part of the letter being the diagonal or cross strokes–like the “e” cross stroke. Transitional Serif styles put a little bit more emphasis on the downstrokes, making them thicker than the upstrokes. Modern Serif styles have the most contrast between up and down strokes, and tend to have less angled serifs (feet) on the letters with some being just a simple line. Slab Serifs generally do not have any variations between up and down strokes and have thicker, rectangular shaped serifs.
Just like the name implies, Sans Serif fonts are just simple fonts that lack a serif. These are generally more modern looking and tend to be easier to read in large groupings of text. Within the Sans Serif fonts category there are a few common sub categories; Grotesque, Neo-Grotesque, Geometric and Humanist.
Grotesque Sans Serif fonts are generally very similar to the Serif style fonts, but simply lack a serif or foot. Neo-Grotesque fonts tend to be very plain with very little line width variation. Geometric fonts are more rounded (or squared) and resemble the basic shapes in which they were created from. Humanist fonts have more variation in line widths and often times mimick the shapes of more traditional fonts.
Scripts are more formal, and derived from traditional 17th century writing. They are most similar to handwriting or cursive writing. Most are fluid and each character within a word connects. Script fonts are better used for impact, not for a large body of text as they can be more difficult to read. There are two main sub categories within the Script category; Formal and Casual.
The names pretty much describe both sub categories, but formal scrips are going to be the most traditional. Think dip pen and pointed pen calligraphy. The letters will be very uniform in both shape and size. Casual scripts are more like today’s cursive handwriting, or even more modern brush pen calligraphy. Letters can be varied in size and shape, and even line weights may vary.
Display fonts is the most broad category of fonts. These are best used for drawing one’s attention, but again should not be used in a large body of text. They are used mostly in print design, but can be used in web design as headers and attention grabbers. These fonts will be a little bit more varied in size, shape and line weights. There’s not really specific sub categories within Display fonts, as each font will follow a different trend, or typographic style (like graffiti).
Putting common font styles together
I plan to write a more in depth post on how to pair different font style, but here is the gist. It really depends what the purpose of the design is for. Is it for display on the web? Is it for a website structure? It is for an eye catching graphic? Print design?
Need a scroll stopping pin for Pinterest? Try to stick with fonts that are easy to read. Pairing a simple, casual script with a bold sans serif is my absolute favorite way to go. You could also pair a thin, compact serif with a big bold geometric sans serif. If you want to really grab someone’s attention with the design, consider using a display font for the big impact word or short phrase. I would use only one display or script as too many can confuse the eye as to where it should go next.
If you are wanting to use fonts for a website design, stick with a sans serif font for the body and a bolder sans serif or serif font for headers. You want people to be able to easily read what is on the webpage and something too decorative could make that difficult. Personally if I land on a website that is using an obnoxious font for the body text, I will leave immediately! I don’t have time to squint and strain my eyes (and brain) trying to read what’s there. Keep it simple.
When in doubt, stick with a simple font.
Before you go, I’d love to know which one of these common font styles if your favorite? Mine is definitely a casual script!
Other articles you may enjoy:
- The Best Resources for Fonts and Graphics
- How to Preview Installed Fonts All At Once
- How to Create Social Media Graphic Templates
Don’t forget to pin it!