Typography

Typography is the art of arranging text on a page. We’ll look at:

• How to style and transform fonts.
• How to lay text out on a page.
• and how to add external fonts to your web pages.

Font Family

You may remember that the font of an element can be changed using the font-family property.

CSS

h1 {
  font-family: Arial;
}

In the example above, the font family for all <h1> heading elements have been set to Arial.

Keep in Mind

Multi-Word ValuesWeb Safe FontsFallback Fonts and Font StacksSerif and Sans-Serif

When specifying a typeface with multiple words, like Times New Roman, it is recommended to use quotation marks (' ') to group the words together, like so:

CSS

h1 {
  font-family: 'Times New Roman';
}

There is a selection of fonts that will appear the same across all browsers and operating systems. These fonts are referred to as web safe fonts. You can check out a complete list of web safe fonts here.

Web safe fonts are good fallback fonts that can be used if your preferred font is not available.

CSS

h1 {
  font-family: Caslon, Georgia, 'Times New Roman';
}

In the example above, Georgia and Times New Roman are fallback fonts to Caslon. When you specify a group of fonts, you have what is known as a font stack. A font stack usually contains a list of similar-looking fonts. Here, the browser will first try to use the Caslon font. If that’s not available, it will try to use a similar font, Georgia. And if Georgia is not available, it will try to use Times New Roman.

You may be wondering what features make a font similar to another font. The fonts Caslon, Georgia, and Times New Roman are Serif fonts. Serif fonts have extra details on the ends of each letter, as opposed to Sans-Serif fonts, which do not have the extra details.

serif and sans-serif are also keyword values that can be added as a final fallback font if nothing else in the font stack is available.

CSS

h1 {
  font-family: Caslon, Georgia, 'Times New Roman', serif;
}

In this final example, the font stack has 4 fonts. If the first 3 fonts aren’t available, the browser will use whatever serif font is available on the system.

Font Weight

In CSS, the font-weight property controls how bold or thin text appears. The font-weight property can take any one of these keyword values:

• bold: Bold font weight.
• normal: Normal font weight. This is the default value.
• lighter: One font weight lighter than the element’s parent value.
• bolder: One font weight bolder than the element’s parent value
• Numerical Values

Numerical values can range from 1 (lightest) to 1000 (boldest), but it is common practice to use increments of 100. A font weight of 400 is equal to the keyword value normal, and a font weight of 700 is equal to bold.

CSS

.left-section {
  font-weight: 700;
}

.right-section {
  font-weight: bold; 
}

In the example above, text in elements of both .left-section and .right-section classes will appear bold.

It’s important to note that not all fonts can be assigned a numeric font weight, and not all numeric font weights are available to all fonts. It’s a good practice to look up the font you are using to see which font-weight values are available.

Font Style

You can also italicize text with the font-style property.

CSS

h3 {
  font-style: italic;
}

The italic value causes text to appear in italics. The font-style property also has a normal value which is the default.

Text Transformation

Text can also be styled to appear in either all uppercase or lowercase with the text-transform property.

CSS

h1 {
  text-transform: uppercase;
}

The code in the example above formats all <h1> elements to appear in uppercase, regardless of the case used for the heading within the HTML code. Alternatively, the lowercase value could be used to format text in all lowercase.

More Info

Since text can be directly typed in all uppercase or lowercase within an HTML file, what is the point of a CSS rule that allows you to format letter case?

Depending on the type of content a web page displays, it may make sense to always style a specific element in all uppercase or lowercase letters. For example, a website that reports breaking news may decide to format all <h1> heading elements such that they always appear in all uppercase, as in the example above. It would also avoid uppercase text in the HTML file, which could make code difficult to read.

Text Layout

• Letter Spacing

The letter-spacing property is used to set the horizontal spacing between the individual characters in an element. It’s not common to set the spacing between letters, but it can sometimes help the readability of certain fonts or styles. The letter-spacing property takes length values in units, such as 2px or 0.5em.

CSS

p {
  letter-spacing: 2px;
}

In the example above, each character in the paragraph element will be separated by 2 pixels.

• Word Spacing

You can set the space between words with the word-spacing property. It’s also not common to increase the spacing between words, but it may help enhance the readability of bolded or enlarged text. The word-spacing property also takes length values in units, such as 3px or 0.2em.

CSS

h1 {
  word-spacing: 0.3em;
}

In the example above, the word spacing is set to 0.3em. For word spacing, using em values are recommended because the spacing can be set based on the size of the font.

• Line Height

We can use the line-height property to set how tall we want each line containing our text to be. Line height values can be a unitless number, such as 1.2, or a length value, such as 12px, 5% or 2em.

CSS

p {
  line-height: 1.4;
}

In the example above, the height between lines is set to 1.4. Generally, the unitless value is preferred since it is responsive based on the current font size. In other words, if the line-height is specified by a unitless number, changing the font size will automatically readjust the line height.

• Text Alignment

The text-align property, which you may already be familiar with, aligns text to its parent element.

CSS

h1 {
  text-align: right;
}

In the example above, the <h1> element is aligned to the right side, instead of the default left.

Web Fonts

The fonts you can use for your website are limitless — web fonts allow you to express your unique style through a multitude of different fonts found on the web.

• Web Fonts Using <link>

Online font services, like Google Fonts, make it easy to find and link to fonts from your site. You can browse and select fonts that match the style of your website.

When you select a font in Google Fonts, you’ll be shown all of the different styles available for that particular font. You can then select the styles you want to use on your site.

When you’re done selecting a font and its styles, you can review your selected font family, and a element will be automatically generated for you to use on your site!

HTML

<head>
  <!-- Add the link element for Google Fonts along with other metadata -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
</head>

The generated <link> element needs to be added to the <head> element in your HTML document for it to be ready to be used in your CSS.

CSS

p {
  font-family: 'Roboto', sans-serif;
}

You can then create font-family declarations in your CSS, just like how you learned to do with other fonts!

• Web Fonts Using @font-face

Fonts can also be added using a @font-face ruleset in your CSS stylesheet instead of using a <link> element in your HTML document. As mentioned earlier, fonts can be downloaded just like any other file on the web. They come in a few different file formats, such as:

1. OTF (OpenType Font)
2. TTF (TrueType Font)
3. WOFF (Web Open Font Format)
4. WOFF2 (Web Open Font Format 2)

The different formats are a progression of standards for how fonts will work with different browsers, with WOFF2 being the most progressive. It’s a good idea to include TTF, WOFF, and WOFF2 formats with your @font-face rule to ensure compatibility on all browsers.

Let’s take a look at how to use @font-face using the same Roboto font as before:

Within the “Selected Families” section, you can use the “Download” button to download the font files to your computer. The files will be downloaded in a single format, in this case, TTF. You can use additional tools to generate additional file types for WOFF and WOFF2, check out MDN’s list of font generators for more information.

When you have the files you need, move them to a folder inside your website’s working directory, and you’re ready to use them in a @font-face ruleset:

CSS

@font-face {
  font-family: 'MyParagraphFont';
  src: url('fonts/Roboto.woff2') format('woff2'),
       url('fonts/Roboto.woff') format('woff'),
       url('fonts/Roboto.ttf') format('truetype');
}

Let’s take a look at the example above, line by line:

1. The @font-face at-rule is used as the selector. It’s recommended to define the @font-face ruleset at the top of your CSS stylesheet.
2. Inside the declaration block, the font-family property is used to set a custom name for the downloaded font. The name can be anything you choose, but it must be surrounded by quotation marks. In the example, the font is named 'MyParagraphFont', as this font will be used for all paragraphs.
3. The src property contains three values, each specifying the relative path to the font file and its format. In this example, the font files are stored inside a folder named fonts within the working directory.
4. Note that the ordering for the different formats is important because our browser will start from the top of the list and search until it finds a font format that it supports. Read more on format prioritization on CSS-Tricks.

Once the @font-face at-rule is defined, you can use the font in your stylesheet.

CSS

p {
  font-family: 'MyParagraphFont', sans-serif;
}

Like using any other fonts, you can use the font-family property to set the font on any HTML element. The downloaded font can be referenced with the name you provided as the font-family property’s value in the @font-face ruleset—in this case, 'MyParagraphFont'.