Work in progress

Learn Typography

Typography is the art of arranging letters to make them readable and appealing to the eye. Back when there were printing presses and typewriters, typographers developed different metal sets of letters, which were called typefaces. A typeface is a collection of letters (glyphs) with consistent size, weight, and style. We know typefaces today by a different name: fonts.

Fonts

As a web developer, you will be tasked with understanding how different fonts work together, what meaning they convey, and how to use them to enhance websites and web applications.

Try changing the value of font-family below from "Arial" to "Georgia".

You can quickly see how your choice of font can change the feeling of text. Doesn't Georgia feel like a font you might read in a newspaper? That's why this property is called font-family, because Georgia belongs to a family of fonts called serifs.

Size

Try changing the value of font-size below to make the size larger. I bet you can intuit how:

At what size does the page start to be pushed downward because the font is too large?

Size is very important for obvious reasons: you want your user to be able to read the text on your webpage, but it's also a great way to indicate importance or lack of importance.

Style

Try changing the value of font-style below to "italic" or "oblique" to see how the text changes:

Slanted styles can be used to convey emphasis or to offset certain key words for importance.

Weight

Weight or how wide text appears can also help draw attention to important text or differentiate labels from normal text.

Try changing the value of font-weight below to 700 or 900 to see how heavy the text becomes:

This covers the primary properties you'll use to style fonts. There's much more to learn, but for now, this gets us started.

Font Families

Remember how we changed the font-family above to Georgia and suddenly, it started feeling like we were reading a newspaper? That's because over time different font families have been used for different purposes. We're going to learn about three primary families now.

Serif

A serif is a small line or stroke regularly attached to the end of a larger stroke in a letter or symbol within a particular font or family of fonts.¹ This is the older family of fonts, because they originate from the Greeks and Romans. Their letters are more ornate because they were originally inscribed in stone or painted by brush. These fonts are referred to as Roman fonts.

You'll recognize some common serif fonts, such as:

• Times New Roman - The quick brown fox jumps over the lazy dog.
• Georgia - The quick brown fox jumps over the lazy dog.

Sans-serif

By contrast, sans-serif means without serifs (sans means without). You'll recognize sans-serif fonts as being the most common on the web. These used to be referred to as Gothic fonts. They're generally more minimal and modern.

You probably know or at least recognize fonts like:

• Arial - The quick brown fox jumps over the lazy dog.
• Verdana - The quick brown fox jumps over the lazy dog.

Let's look at a few letters at a super large size to see the difference:

The font rabbit hole is deep, but if you fundamentally understand the difference between serif and san-serif families, then you have a good first layer to get started exploring the wider world of typography.

Before we move on, let's talk about one more family: monospace.

Monospace

Monospace fonts are fonts where the characters all have the same width. In today's web, these are most often used to display code. On this website, every code example is in monospace. This is a legacy of how old computer terminals used to work. However, it's for a good reason. Monospace fonts are often easier to read.

One widely used monospace font is:

• Courier New - The quick brown fox jumps over the lazy dog.

Can you see how the text is much wider, because every letter takes up the same width?

Other Families

There are two other families of fonts that this tutorial does not cover: cursive and fantasy. In short, cursive fonts emulate handwriting, while fantasy fonts are often used for symbols. Since this tutorial is only an introduction to CSS, we are intentionally leaving these two families for you to explore later. They're less common.

Web Safe Fonts

So far, we've only seen fonts which are called web safe fonts. These are called web safe fonts, because they are considered to be installed and available on all major devices. This is important, because you want your users to be able to see your website in the font you intended.

Resources like CSS Font Stack track how well covered different fonts are across different operating systems.

What is a Font Stack, anyway?

Font Stacks

The font-family attribute allows you to specify a list of fonts that the user's browser will load in order of availability, starting from the beginning of the list and progressing through to the end until the computer finds one available. This list is called a font stack. It's important, because it allows you to specify a series of fallbacks for every user's computer. By doing this, you ensure your font is at least stylistically appropriate to a single family.

The designers you work with as a web developer will generally want to avoid having a specific serif font degrade into a sans-serif font, if that individual font is not available on a user's computer.

Here are example font stacks for each font family we discussed:

.serif {
  font-family: Times, Times New Roman, Georgia, serif;
}

The quick brown fox jumps over the lazy dog.

.sans-serif {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

The quick brown fox jumps over the lazy dog.

.monospace {
  font-family: Lucida Console, Courier, monospace;
}
      

The quick brown fox jumps over the lazy dog.

Bonus

Why is the sentence "The quick brown fox jumps over the lazy dog." used for font display?

If you want to delve deeper into fonts, read this guide on the right font sizes for web design.

Credits

¹Read more about Serif fonts on Wikipedia.