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".

HTML
CSS
Display

The weight of a particular font is the thickness of the character outlines relative to their height.

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:

HTML
CSS
Display

Optical sizes are more common for serif fonts, since their typically finer detail and higher contrast benefits more from being bulked up for smaller sizes and made less overpowering at larger ones.

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

Click here to check your answer!

The text should start to shift around 19px, if you're on a standard HD (1920x1080) screen. We'll learn more about layout later.

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:

HTML
CSS
Display

In European typefaces, especially Roman ones, a slope or slanted style is used to emphasize important words. This is called italic type or oblique type.

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:

HTML
CSS
Display

A typeface may come in fonts of many weights, from ultra-light to extra-bold or black; four to six weights are not unusual, and a few typefaces have as many as a dozen.

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.1 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:

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:

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

serif sans-serif
Georgia Arial
Fam Fam

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:

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:

The quick brown fox jumps over the lazy dog.


The quick brown fox jumps over the lazy dog.


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 displaying fonts?

Can you guess before you see the answer?

It's a sentence that features every letter of the alphabet! It's been used for over a hundred years by typographers who needed an example sentence to test out typewriters.

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

Credits

1Read more about Serif fonts on Wikipedia.

Back Next: Units