CSS - Typography

Jun 15, 2026 3:00pm UTC (Check your timezone)

Theory Workshop Lab Review Quiz

Instructors: Jess, Carmen, and Eda

Typography

Download iCal File

Before this session, please:

During this session, we’ll:

After this session, please:

Instructor notes

Working with CSS Fonts: What Are the Fundamentals of Typography?

A typeface is similar to a blueprint for a family of fonts. It’s the overall design and style of a set of characters, numbers, and symbols. It helps us communicate effectively.

A font is a specific variation of a typeface with its own size, width, style, etc.

Serif and Sans Serif are examples of typefaces.

Serif typefaces are more classical and have small lines at the end of characters. Some examples are:

Sans Serif is more “modern” without the small lines at the end of characters. Some examples are:

There are other typefaces such as Script, Blackletter, Monospaced, and Decorative.

Like typefaces, fonts can also be grouped based on the weight (the thickness of the characters), style (the slant and orientation of the characters), and width (the horizontal space occupied by characters). For example, Times New Roman has Times New Roman Bold, Times New Roman Italic, and Times New Roman Bold Italic.

Some fundamental elements of typography are:

Some other important concepts are:

Working with CSS Fonts: What Are Some Best Practices for Working with Typography in Your Designs?

We should be mindful of using best practices when working with typography. Some of these best practices are:

Working with CSS Fonts: What Are Font Families and How Do They Work?

A font family is a group of fonts that are based on the same typeface but have different weights, styles, and widths. For example, Arial is a font family that includes variations like Arial Bold and Arial Italic.

We can set the font family in CSS with the font-family property. We can specify multiple font families by separating them with commas. If the first font family is not found or can’t be loaded, the others will act as fallback options one after another.

For example, here if Arial is not found, Lato will be tried:

1p {
2  font-family: Arial, Lato;
3}

If a font lacks a specific character, the browser will look at the second (or other) fonts specified.

If none of the specified fonts are found or can be loaded, the browsers render a generic font family, which is the default font. Common generic fonts are serif, sans-serif, monospace, cursive, and fantasy.

That’s why it’s also important to provide a generic fallback font when defining font-family:

1p {
2  font-family: Arial, Lato, sans-serif;
3}

Working with CSS Fonts: What Are Web Safe Fonts?

Web-safe fonts are fonts that are more likely to be installed on a computer or a device. We should use web-safe fonts to make sure the fallback font is still consistent with the first priority font. Using web-safe fonts also reduces the load time, since they don’t need to be downloaded if they’re already installed.

Some of the web-safe sans-serif fonts are Arial, Verdana, and Trebuchet MS.

Some of the web-safe serif fonts are Times New Roman and Georgia.

Working with CSS Fonts: What Is the @font-face At-Rule, and How Does It Work?

CSS at-rules provide instructions to the browser. @font-face is an at-rule that we can use to define a custom font, specifying the font file, format, and other properties.

The font-family descriptor is the name of the font, src descriptor is the list of external references or locally installed font faces defined with the url function. For each font resource, we can also specify the format. If format is omitted, the format of the font will be detected after it’s downloaded.

Some common formats are:

For example:

1@font-face {
2  font-family: "MyCustomFont";
3  src: url("path/to/font.woff2") format("woff2"),
4    url("path/to/font.otf") format("opentype"),
5    url("path/to/font.woff") format("woff");
6}

Optionally, the technology of the font resource can also be specified:

1@font-face {
2  font-family: "MyCustomFont";
3  src: url("path/to/font.woff2") format("woff2"),
4    url("path/to/font.otf") format("opentype") tech(color-COLRv1),
5    url("path/to/font.woff") format("woff");
6}

Then, we can use the custom font elsewhere in our CSS:

1body {
2  font-family: "MyCustomFont";
3}

Working with CSS Fonts: How Do You Work with External Fonts Like Font Squirrel and Google Fonts?

External fonts are fonts that are not included locally but rather hosted on an external server. Some online resources for using free fonts are:

(Another open-source, privacy-first web font platform is Bunny Fonts, which doesn’t track personal data and can be used as a replacement for Google Fonts!)

We can see the details and information about a font on these sites.

In Google Fonts, once the “Get font” button is clicked, there are options to “Download all” or “Get embed code.” If we use the embed code option, the font can be used as an external font on Google’s servers. With that option, we can use a link element or @import. With link, we can add it inside the project’s head HTML element. With @import, we can add that rule to our CSS file.

In Font Squirrel, once we’ve chosen a font, we can go to the “Webfont Kit” tab and check if the font’s license allows us to use it in @font-face. If so, clicking the “Download @font-face Kit” button will download a zip file. Once it’s unzipped, the “web fonts” folder includes an HTML file with instructions on how to use web fonts.

Note that using multiple external fonts can increase the load time of the website and affect its overall performance.

Working with CSS Fonts: What Is the text-shadow Property, and How Does It Work?

We can add shadows to text with the text-shadow property, giving it the values for the X offset, Y offset, color and blur radius.

Positive values move the shadow right (X offset) and down (Y offset). Negative values move the shadow left (X offset) and up (Y offset).

Color can be defined before or after the X and Y offsets and blur radius.

Blur radius has the default value of 0. If the value is higher, the blur will be bigger (that is, the shadow becomes lighter).

1p {
2  text-shadow: 3px 2px 3px #00ffc3;
3}

We can also define multiple text shadows:

1p {
2  text-shadow:
3    3px 2px 3px #00ffc3,
4    -3px -2px 3px #0077ff,
5    5px 4px 3px #dee7e5;
6}

Build a Nutritional Label

We’ll take a look at this workshop that goes over the concept we’ve learned so far.

Build a Newspaper Article

This exercise is a good practice for starting to work with fonts and applying what we’ve learned in this lesson!

CSS Typography Review

In this unit, we’ve explored: