Formatting Text | More HTML & CSS

This page has been updated to cover Bootstrap 4.

In this part you will learn about the typographic capabilities of HTML and CSS.

Bootstrap (or other CSS frameworks) make formatting texts much simpler. Bootstrap ensures that the texts and text margins are typographically correct and consistent.

If you haven't yet integrated Bootstrap in your project, please read how to use the Bootstrap Framework in the HTML & CSS Tutorial.

Most instructions can be found under typography in the Bootstrap documentation. I will mention only the most important text formatting. In the second part I will show you how to change the default font of Bootstrap.

Headings

Headings are defined with the HTML elements <h1> through <h6>:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

See Headings in the Bootstrap documentation.

Bold

To make text bold, use the HTML element <strong>:

<p>That's how you can emphasize <strong>the most important part</strong>.</p>

See inline text elements in the Bootstrap documentation.

Italics

To emphasize a text with italics, use the HTML element <em>:

<p>That's how you can emphasize with <em>italics</em>.</p>

See inline text elements in the Bootstrap documentation.

Changing the Font

With the CSS property font-family you can change the font. In most cases, several fonts are defined as fallbacks. When a specific font isn’t available on a particular system, the next font in the list is used.

By default, Bootstrap uses the following fonts:

Default Bootstrap Fonts

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

These fonts are defined on the <body> element and are thus applied on the entire website.

If you want to change the font, you may override Bootstrap’s CSS rule. As an example, we could switch to a serif font:

Using alternative fonts

body {
  font-family: Georgia, "Times New Roman", Times, serif;
}

Available Fonts in the Browser

By default, there are only few fonts available on all systems (Windows, Mac, Linux, tablets, smartphones, etc.).

Such fonts are called Web Safe Fonts. CSS Font Stack is one of the many websites that lists these fonts. If you use such a font, remember that you should always specify multiple fonts as fallbacks. CSS Font Stack always provides a recommended list of similar fonts, called a font stack, with every font you choose.

Embedding a Custom Font

It is also possible to include custom fonts with the website. So we have countless fonts at our disposal. The only disadvantage is that additional fonts extend the loading time of our website a little bit.

Google Fonts

The easiest way to embed fonts is with the help of Google Fonts. Google Fonts are freely available fonts that can be downloaded directly from Google as needed. Here’s how:

Open the Google Fonts website and choose a font. Once you have selected a font, click on the Plus-Sign to select this font.
Open the bottom where you should find your selected fonts. Now you can customize to select which version of the font you want (for example, light, bold, extra-bold, etc.).
Copy the generated code in the <head> section of your website. As an example, I chose the font Roboto Condensed:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" type="text/css">

Google Fonts will automatically provide the CSS code for the selected font. Now we can use the font in our CSS file:

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

Recommended Font Combinations

Choosing an appropriate font is very important and gives your website a personal touch. Often two fonts are used in combination, one font for the headings and one font for the text.

Have a look at recommended font combinations of Google Fonts on the following pages:

More Fonts

In addition to Google Fonts there are several sites where you can download fonts either for free or for a small license fee: