code.makery

Learning how to code.

Subscribe to Updates
Edit on GitHub
More HTML & CSS

Formatting Text

Achtung: Diese Seite wird gerade aktualisiert auf Bootstrap 4, beinhaltet aber noch Informationen zu Bootstrap 3. Bitte verwenden Sie in der Zwischenzeit die Originaldokumentation von Bootstrap.

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

Bootstrap 3 (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: "Helvetica Neue", Helvetica, Arial, sans-serif;

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

There is also the possibility of embedding your custom font with the website. This So we are countless fonts. The only downside is that additional writing course extend the charging time of our website something.

Es gibt auch die Möglichkeit, Schriftarten gleich mit der Webseite mitzuliefern. This opens a wealth of possibilities. The disadvantage is that the font must be downloaded which might make our website a little bit slower.

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:

  1. Open the Google Fonts website and choose a font. Once you have selected a font, click on the Quick-use button.
    Quick Use

  2. Now you can 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 Open Sans:

    <link href=‘http://fonts.googleapis.com/css?family=Open+Sans' rel=‘stylesheet’ type=‘text/css’>

  3. 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: “Open Sans”, sans-serif;
}

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: * Theme Armada * Brian Gardner * Caleb McGuire * Beautiful Web Type * and more…

As an example, I choose the combination of Oswald for headings and Lato for the text:

  1. Search for Oswald and Lato on Google Fonts. For fonts that are used in bold don’t forget to select Bold 700!

  2. Insert the code for Oswald and Lato into the <head> section:

    <link href=‘http://fonts.googleapis.com/css?family=Oswald:700' rel=‘stylesheet’ type=‘text/css’>
<link href=‘http://fonts.googleapis.com/css?family=Lato' rel=‘stylesheet’ type=‘text/css’>

  3. Add the CSS for the two fonts: 

    body {
 font-family: “Lato”, sans-serif;
}

h1, h2, h3, h4, h5, h6 { font-family: “Oswald”, sans-serif; font-weight: 700; }

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:

Comments