Content is king, typography is queen


Typography is a critical part of Web design and user experience.

Just use the browser console to change the font-family CSS property on any website, and you’ll see why it’s everything.

Disclaimer

I don’t claim to be an artist or a designer. I hope this article it’s useful.

Desktop vs. web fonts

You can find fonts or desktop fonts on the user’s terminal. You can use preinstalled fonts that usually come with your operating system (or install new ones) in software that rely on the system’s font library, for example, Word or Photoshop.

Preinstalled fonts are also useful for CSS instructions when coding websites. It’s called Web Safe Fonts. You can either use them as your main fonts or as a fallback if anything goes wrong when loading custom fonts:

.myselector {
    font-family: 'Montserrat', sans-serif;
}

Source: Google Fonts - Montserrat

The cssfontstack website gives you everything you need to use them correctly, and, above all, the OS compatibility, because the list of preinstalled fonts may vary a lot from one OS to another.

For example, you may want to use the Avant-Garde font for your next project, but the compatibility looks very low :

Win: 0, Mac: 1.08%

That is why even a web-safe font needs the most compatible font as a fallback, which ultimately is sans-serif here:

h1 {
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif; 
    font-size: 24px; 
    font-style: normal;
}

Source : cssfontstack - Avant-Garde

Native fonts

You may have already seen the following usage:

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
}

It consists of using the native font of the OS. This way, the browser does not even have to load anything. GitHub and other giant platforms use this trick!

I see it as a way to let the operating system decides which font is the best. Not the dumbest approach, isn’t it?

You lose originality for sure, but it could be safer, especially in an a11y (accessibility) perspective. Besides, operating systems invest millions in design.

Loading custom font files

We just saw that adding the most cross-platform preinstalled fonts as a fallback in our CSS instructions is a good practice, as loading a Google Font may fail, and not all fonts are available by default on operating systems.

However, Google Fonts are not the ultimate source. You can load custom font files as well from the CSS thanks to the @font-face CSS at-rule:

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

In this case, you load the Open Sans font from the server. You may find heavier declarations in tutorials with more types, such as “truetype”, “opentype”, “embedded-opentype”, and “svg”, and not just “woff”, “woff2”.

It’s for old browser compatibility. For example, woff2 is for the most modern browsers, woff for “reasonably modern” browsers, but svg is for legacy iOS. Unless you need Internet Explorer 6-9 compatibility, you can safely skip embedded-opentype.

After our @font-face declaration, we can use the custom font-family like that:

body {
    font-family: 'Open Sans', sans-serif;
}

Font families in short

I bet you already use the font-family property in your CSS, but do you know what font families are?

Font families allow for grouping fonts that share common graphical patterns. There are many “subfamilies”, but sans-serif, serif, cursive, and monospace are the most generic. You’ll find “fantasy” too, but those families are pretty rare in web design.

General rules for the design

If your main font is Georgia, you will use serif as the ultimate fallback. If you use Arial, it will be sans-serif.

As the names suggest, the difference is whether there are serifs or not. You can see serifs as decorative stubs on letters. That’s probably the reason why serif fonts work better on large titles.

Reciprocally, for smaller text, sans-serif is way more readable than serif.

Monospace fonts seem a better choice to display code because letters and characters each occupy the same horizontal space.

Fonts combination

Good typography is hard. Some might even say it’s art. Finding the right balance between originality and readability is challenging.

As we saw, sans-serif is more readable for text, and serif looks better for titles. Of course, there might be funky usages that manage to break those generic laws, but here it’s a start to prevent common visual mistakes..

If you have difficulties finding the right combination, some resources and generators might help you. For example, you can use fontpair.co, but there are many other tools.

The dark mode challenge

You cannot apply the same rules with dark and light backgrounds. Some rules and combinations might be spectacular on a light background but terrible in dark mode and reciprocally.

The dark mode is more challenging than you might think. While there are tones of dark mode tutorials, making your custom (and original) dark styles is not easy.

Of course, you have to control the contrast ratio between foreground and background colors (a.k.a. background-color and color in CSS), but the font-family is crucial.

It’s not rare to use different font families for dark and light themes. It would help if you also had bigger font sizes and lighter font weights on dark backgrounds. You would probably use more textual white spaces too.

Why is that so?

Well, I don’t know you, but I find that dark websites look heavier by nature.

The general rule that says “serif for the titles, sans-serif for the text” is even more true in dark mode, IMHO. The body text is a lot more legible with sans-serif than with serif.

Font family is just a start

Even if you have the right font combination, there’s still a lot of work to do. While this choice is critical, you have many other aspects to check:

  • contrast and colors
  • line-height and line length
  • letter-spacing
  • white space

And a lot more.

Responsive typography

Here it’s all about CSS units. What should you choose between rem, em, px, vw, and other units?

As the name suggests, vw is based on the viewport, rem refers to the root.

I would recommend using rem. In case your font-size is 100%, it’s the equivalent of 16px. However, in dark mode, you’d probably rather use a higher percent.

I also like the “min-width approach”:

h1 {
  font-size: 2.25rem; // 36px if body is 100%
}

@media screen and (min-width: 640px) {
    h1 {
        font-size: 3rem;
    }
}

It’s not the only approach at all.

Some use “one-line responsive typography” techniques, but that does not seem 100% accurate. With those techniques, some mathematical calculation is supposed to handle everything. It is seducing, but I’ve rarely seen it on live websites.

Some prefer the fluid approach:

h1 {
  font-size: calc(1.5rem + 3.5vw);
}

I guess you have to test it with different terminals to determine the best method for you.

Going further

Here are valuable links you might like:

Conclusion

Typography is such a vast topic. There is so much more to say, especially about the loading strategies, but this introduction will hopefully give you some hints.

Photo by Alex Mihai C on Unsplash