Find your portal

CYPHER Learning named a G2 Best Software Awards winner 2024
Read more

How to create beautiful online courses: fonts

They say beauty is in the eye of the beholder, but all eyes are connected to a brain, which works the same in all humans.

I've always been fascinated by the subtlety of fonts in any written piece. At first, I could say if I liked a pair of fonts or not, but I couldn't explain why. As time passed, I learned that there are some elements that make a pair of fonts either ugly or beautiful — in the eyes of all beholders.

This post is the second in a series of three, on how to create beautiful online courses. The first one was about colors, while the last one will explain the layout of a nice course page.

Creating beautiful online courses with fonts

Fonts are like flowers at a wedding. If there aren't any, everybody notices; if they're there, nobody will remember them the next day. Ok, maybe some guests will remember the colors, but they'll forget everything about them within a year.

A bad pair of fonts can steal the show in your course. Students will find it harder to focus on your message when you use an ugly font. Or more. But if you use the exact same font all over, they'll get bored. Choosing the right pair of fonts for your course is like walking on a tightrope between two skyscrapers: you have to have balance.

How to identify fonts

I'm sure you spend quite a lot of time reading online. Whenever you find yourself spending more than two minutes on a single web page, remember to check the font of the text you're reading. If you didn't notice it as tiring, then it might deserve a chance to get in your next course.

If colors have logical color codes, fonts have names. Weird names, actually: Lobster, Montserrat, Bebas Neue, Merriwether, Yellowtail. Really? I don't know what the creator of this font had in mind, but when I hear about Yellowtail I'm automatically thinking about Pikachu's yellow tail. But I'm digressing.

Anyway, if you want to get the name of a random font you find online, browser extensions come to your rescue. I use WhatFont and I am very pleased with it. Just like with any other extension, you add it to your browser and activate it, and then you can hover over any piece of text on your screen and let it do its trick.

If you give it a try on this page, you'll find out that the main title is Roboto Slab, 43 pixels, the first subtitle is also Roboto Slab, but it's 25 pixels, the next subtitles are also Roboto Slab, but they're 20 pixels and have a slightly different color, and the regular text is simply Roboto.

The only thing WhatFont can't do is to read text within images. If you really really really want to do this, you can use WhatTheFont!. You upload an image file, select some characters, and see the result. While this is easy to use, it doesn't offer the best results all the time. In fact, the results depend a lot on your source file; you harvest what you sow. But hey, it's better than nothing!

Once you have the name of the font, you can download it for free (if it's free), add it to your software, or school LMS, and use it in your courses.

How to marry fonts

When two people marry, it's because one of the following: they're either so similar to each other that they almost look the same, or... the opposites attract. The same stands true for a nice pair of fonts.

They look alike. Font families can save your course. For example, you can pick Roboto. Use Roboto Light or Roboto Condensed for regular text, and make it bold and increase its font size for your titles. Or, you could go for Playfair Small Caps for titles, and Playfair Display for regular text.

You don't always have to use the same font family though. You could just pick similar fonts that play nice with each other, like Cinzel and Lora, or League Spartan and Libre Baskerville.

Opposites attract. This is all about serifs and weight. Serifs are those fine strokes on each letter. Times New Roman is probably the most common serif font. Arial, or Helvetica are sans-serif fonts, as their letters have no decorative lines. Weight refers to how "thick" or "thin" a letter is.

You could pick a serif font for titles, and pair it with a sans-serif one for regular text. Or the other way around. For example, you could pick Merriweather, or Source Serif Pro (serif fonts), and pair it with Roboto, or Source Sans Pro (sans-serif fonts). Or, you could pick Bebas Neue Bold (sans-serif) and pair it with Monserrat or Monserrat Light (serif).

You could also pick a script font for your titles, and pair it with a serif or sans-serif for regular text. A script font looks like someone wrote it by hand. But I would avoid script fonts — they're better suited for a wedding invitation than a physics course.

Lastly, you could pick a thin font, like Montserrat Hairline, or Josefin Sans, and put it next to a thicker font, like Anton, or even regular Montserrat. Another kind of "thin" font is called "condensed". The letters in a condensed font actually seem "taller". The best example would be Roboto Condensed, or Six Caps. These fonts go well with rounder-lettered fonts, like Archivo Narrow, or Aileron Regular.

For more ideas and visualization of font pairs, check out this awesome post from Canva's Design School. It's long, but it'll be worth your while, I promise. Another one that's worth every scroll is this ultimate guide to font pairing from digital agency Bold.

One last tip

When it comes to font pairing, the sky's the limit to your choices. However, there's one font about which you should think twice before using it. I'm talking about Comic Sans. It's the font the internet loves to hate. If your students are in 5th grade and above, you really don't want them to associate your lessons with Comic Sans. Unless, of course, your lessons are related to comic books or cartoons.

Remember: practice makes perfect. Every time you read something about font pairing, or simply notice the different types of fonts around you — in the newspaper, at the movies, the menu of a restaurant, or the seating card at a wedding — you train your eye and get better at marrying fonts for your courses. Keep practicing!

And don't forget to check out the next and last post of this series, on how to create beautiful online courses.

f-image t-image pin-image lin-image