Typography for Modern Web Design

Text is one of the most important elements on a webpage, as the majority of information on the webpage is expressed through written content. As a result, making text both readable and visually appealing is a key aspect of modern web design.

One of the most powerful ways to achieve this is through typography, the art and technique of arranging and styling text. Typography in CSS includes text decoration, font selection, sizing, spacing, alignment, and more, all of which contribute to a better user experience.

There are many CSS properties that allow you to customize and refine the appearance of texts. These properties can be roughly categorized into font properties, which control the visual style of the font itself, such as font-family, font-style, font-size, and so on.

css

1p {
2  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
3  font-size: 1rem;
4  font-style: italic;
5}

And also text properties, which focus on text layout and presentation, such as spacing, alignment, wrapping, and decorations.

css

1p {
2  letter-spacing: 0.025em;
3  text-align: right;
4  text-decoration-line: underline;
5}

In this lesson, we are going to start with the basics and talk about how to load web fonts into your webpage.

Different types of web font

Using the right font when creating a webpage can have a significant impact on the user experience. Different fonts can create a visual hierarchy, establish your unique branding, and also improve esthetics and readability.

We generally classify fonts into different categories based on their styles. The most common ones are:

Serif fonts: These fonts have small decorative lines (also known as serifs) attached to the ends of each letter. Some common examples include Times New Roman, Georgia, and Garamond.

Sans-serif fonts: These fonts do not have serifs. Some examples are Arial, Helvetica, and Calibri.

Monospace fonts: These fonts have all characters with the same width. They are most commonly used in coding environments. Some examples include Courier New, Lucida Console, and so on.

Handwritten fonts/cursive fonts: Fonts that mimic handwritings, such as Comic Sans MS.

Display fonts: These fonts are attention-grabbing and often used for headings, titles, or logos. Examples include Impact, Lobster, and Bebas Neue. They are also called fantasy fonts.

Font family

You can use the font-family property to specify what font you wish to use. For example:

html

1<p>Lorem ipsum dolor . . .</p>

In most cases, your browser will use a serif font as the default, but that may differ depending on your operating system. You can change the font like this:

css

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

Here, we set Arial as our font for all <p> elements, a widely used sans-serif font available on almost all platforms.

Google fonts

You can also download fonts from the internet using tools such as Google Fonts and then embed them into your webpage. For example:

To embed the selected fonts, either copy the <link> elements into the <head> section of your HTML document.

html

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Document</title>
7
8    <link rel="stylesheet" href="style.css" />
9
10    <link rel="preconnect" href="https://fonts.googleapis.com" />
11    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
12    <link
13      href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script&family=EB+Garamond&family=Montserrat&family=Ubuntu+Mono&display=swap"
14      rel="stylesheet" />
15  </head>
16
17  <body>
18    . . .
19  </body>
20</html>

Or copy the @import code to the beginning of your CSS file.

css

1@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script&family=EB+Garamond&family=Montserrat&family=Ubuntu+Mono&display=swap");
2
3p {
4  /* . . . */
5}

Then, you can use them like regular fonts. Notice that if the font name consists of multiple words, it must be wrapped in matching quotes.

css

1p {
2  font-family: "EB Garamond";
3}

Local fonts

In addition to Google fonts, you can also load the fonts locally if you have the font files, which are typically in .ttf, .otf, .woff, or .woff2 formats.

To load the font, you need to use the @font-face at rule.

css

1@font-face {
2  font-family: "FontName";
3  src:
4    url("path/to/your/font.woff2") format("woff2"),
5    url("path/to/your/font.woff") format("woff"),
6    url("path/to/your/font.otf") format("otf") url("path/to/your/font.ttf") format(
7        "ttf"
8      );
9}

You can specify multiple sources so that the browser can decide which one to use. Among these options, .woff2 is the preferred web font format, so make sure it is the first option. .woff2 uses a more advanced compression algorithm, leading to better performance.

After loading the font files, you can set the font like we've discussed before:

css

1p {
2  font-family: "FontName";
3}

Fallback fonts

If, for some reason, the user's browser cannot load the specified font, it will simply use the default option. That could be problematic because all the texts will have the same font.

Instead, it is best to have a fallback system so that even if your first option is not available, the browser will fall back to its closest relative.

You can create a fallback system by specifying multiple fonts with the font-family property, separated with commas:

css

1p {
2  font-family: "EB Garamond", Cambria, Cochin, Georgia, Times,
3    "Times New Roman", serif;
4}

The system should start with the font you like and end with common fonts that are available on most platforms (such as Times New Roman), as well as a generic font family.