Table of Contents

Typography for Modern Web Design

Code Playground is only enabled on larger screen sizes.

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.

Using the right font when creating a webpage can have a significant impact on the user experience. Different fonts can create 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

Fonts with small decorative lines (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. Commonly used in coding environments. Some examples include Courier New, Lucida Console, and more.

Handwritten fonts/cursive fonts

Fonts that mimic handwritings, such as Comic Sans MS.

Display fonts

Attention-grabbing fonts often used for headings, titles, or logos. Examples include Impact, Lobster, and Bebas Neue. Also called fantasy fonts.

Font family

You can use font-family to specify what font to use. For example:

index.html

html

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

style.css

css

p {
  font-family: Arial;
}

You can set Arial as the font for all <p> elements, which is a widely used sans-serif font available on almost all platforms.

Google fonts

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

To use the selected fonts, copy the <link> elements into the <head> section of index.html.

index.html

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
 
    <link rel="stylesheet" href="style.css" />
 
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script&family=EB+Garamond&family=Montserrat&family=Ubuntu+Mono&display=swap"
      rel="stylesheet" />
  </head>
 
  <body>
    <!-- . . . -->
  </body>
</html>

Or copy the @import code to the beginning of style.css.

style.css

css

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

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

css

p {
  font-family: "EB Garamond";
}

Local fonts

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

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

style.css

css

@font-face {
  font-family: "FontName";
  src:
    url("path/to/your/font.woff2") format("woff2"),
    url("path/to/your/font.woff") format("woff"),
    url("path/to/your/font.otf") format("otf"),
    url("path/to/your/font.ttf") format("ttf");
}

You can specify multiple sources so that the browser can decide which one to use.

Among these options, .woff2 is the preferred 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:

style.css

css

p {
  font-family: "FontName";
}

Fallback fonts

If, for some reason, the user's browser cannot load the specified font, it will fallback to the default option. That could be problematic because the default fonts are usually not esthetically pleasing.

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

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

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.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="/styles.css">
</head>

<body>
  <p>Hello, World!</p>
</body>

</html>

Open Sandbox

Loading course content...

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.

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

Serif fonts

Fonts with small decorative lines (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. Commonly used in coding environments. Some examples include Courier New, Lucida Console, and more.

Handwritten fonts/cursive fonts

Fonts that mimic handwritings, such as Comic Sans MS.

Display fonts

Attention-grabbing fonts often used for headings, titles, or logos. Examples include Impact, Lobster, and Bebas Neue. Also called fantasy fonts.

Font family

You can use font-family to specify what font to use. For example:

index.html

html

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

style.css

css

p {
  font-family: Arial;
}

You can set Arial as the font for all <p> elements, which is a widely used sans-serif font available on almost all platforms.

Google fonts

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

To use the selected fonts, copy the <link> elements into the <head> section of index.html.

index.html

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
 
    <link rel="stylesheet" href="style.css" />
 
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script&family=EB+Garamond&family=Montserrat&family=Ubuntu+Mono&display=swap"
      rel="stylesheet" />
  </head>
 
  <body>
    <!-- . . . -->
  </body>
</html>

Or copy the @import code to the beginning of style.css.

style.css

css

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

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

css

p {
  font-family: "EB Garamond";
}

Local fonts

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

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

style.css

css

@font-face {
  font-family: "FontName";
  src:
    url("path/to/your/font.woff2") format("woff2"),
    url("path/to/your/font.woff") format("woff"),
    url("path/to/your/font.otf") format("otf"),
    url("path/to/your/font.ttf") format("ttf");
}

You can specify multiple sources so that the browser can decide which one to use.

Among these options, .woff2 is the preferred 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:

style.css

css

p {
  font-family: "FontName";
}

Fallback fonts

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

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

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.