Working with Fonts and Typography in CSS

An overview of the CSS properties used to manipulate text and fonts.

Scroll down...

Content

Resources

Comments

Fonts and typography are your way of providing visual variance and drawing attention to and from various parts of your webpage. Knowing how to bend fonts and typography to your will through CSS will allow you to take stale content and change it so it is unique and catches your users' eyes. More importantly, your choice of font strongly determines the stylistic feel and practical readability of text on your site's core content.

This lesson will cover various concepts and CSS properties used to manipulate fonts and typography. We'll show you how to set default fonts and fallback fonts when the defaults aren't available. We'll also show how to alter font properties like size, weight and spacing. You'll also learn how to import new fonts that would otherwise be unavailable to you. You'll wrap up by reading a walkthrough that will dive further into the details of how you can work with fonts and typography with CSS.

Imagine the possibilities!

CSS Fonts and Typography

Common Fonts and Properties

Let's start off by talking about the most commonly used fonts. You'll often hear about web safe fonts. These fonts are basically available on all systems and generally accepted as "safe" to use because they are so common. With that in mind, it is always good to provide fallbacks to ensure your webpage is displayed in a font the user's system actually has. These fallbacks are necessary because some systems don't have certain fonts installed and the browser would not be able to display that font.

Here are some examples of web safe fonts:

  1. Arial
  2. Courier New
  3. Georgia
  4. Times New Roman
  5. Trebuchet MS
  6. Verdana

These fonts are most likely going to be available on all the modern (and even not so modern) systems you'll encounter. However, in the case that they are not, there are even more generic fonts that you can specify as sort of "catch all" or "fail safe" fonts. Here is a list of those:

  1. serif
  2. sans-serif
  3. monospace
  4. cursive
  5. fantasy

You'll likely want to specify serif or sans-serif as your generic "catch all" font because monospace and cursive fonts aren't very pretty.

The syntax for specifying which fonts to use looks like this:

html {
  font-family: Helvetica, "Times New Roman", sans-serif;
}

Notice that we apply the font-family property to the html tag. This is inherited by child elements by default. By setting the font-family property on the html tag we set the fonts for the entire document!

Fonts are presented as a comma-separated list. We generally start that list with the most desired font and continue with our next desired font down to the least desired. This allows the browser to use the closest font to what we intended until it gets to our "catch all" font. As mentioned before, some systems don't have certain fonts installed. The comma-separated list allows the browser to choose the first installed font from this prioritized list.

Note: If the font name contains spaces you must surround it with double quotes!

Altering Font Sizes

Another property you'll work with many times is font-size. As you might guess it allows you to set the size of the font. The easiest way to set this is with a pixel value although you could use ems as well.

.big {
  font-size: 32px;
}
.small {
  font-size: 8px;
}

Setting the font size will allow you to make certain text bigger and other text smaller.

Setting Font Weight

The font-weight property allows you to set its intensity or thickness. A larger weight makes the font thicker while a smaller weight makes the font thinner. You can also use a few keywords here that basically set the weight to exactly what they sound like. Here's an example:

.heavy {
  font-weight: 700;
}

Using the class above on a span tag would set that text's weight to 700 and increase it's thickness.

Monospaced Fonts

Monospaced fonts are fonts who's letter each take up the same width. They are most commonly seen in code examples. When you see an inline code example like this you're looking at a monospaced font! The same goes for the multi-line code snippets you've been looking at through these lessons.

Specifying monospaced fonts is no different than any other font.

.monospaced {
  font-family: "Courier New", monospaced;
}

Look at the lists here to see a list of common monospaced fonts.

Letter Spacing and Line Height

Sometimes you'll want to alter the space between your font's characters and even give more or less space between the top and bottom of lines. These can be altered using the letter-spacing and line-height properties respectively. The larger the value, the greater the space between characters and lines. The smaller the value, the lesser the space between them. You can use the common CSS measurement units for these settings:

.spaced {
  letter-spacing: 24px;
}
.big-line-height {
  line-height: 128px;
}

Most of the time you won't want to touch the letter-spacing or line-height properties. For example, altering the letter spacing can look awkward without some good reason.

Importing from Google Fonts

Including various new fonts in your documents can be fun and really make your site stand out from others than use the same default fonts for everything. The best part is that Google Fonts makes it super simple to get started. All you have to do is:

  1. Head over to Google Fonts
  2. Select a font you like by clicking it
  3. Then add it to your selected fonts
  4. Open up your selected fonts and you'll see a snippet that looks like this: <link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">
  5. Then include that link in your document <head>
  6. Finally just specify that font with the font-family property in your CSS!

Here's an example:

<head>
  < !-- Other meta tags -->

  <link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">
  <link rel="stylesheet" href="/assets/stylesheets/fonts.css">

</head>
.bungee {
  font-family: Bungee, sans-serif;
}

With the above code in place you can change the font of any tag to Bungee by adding the class .bungee.

Shay Howe: Working with Typography

There are plenty more details to learn about with CSS fonts. Your assignment is to read through Shay Howe's walkthrough on Working with Typography. Get comfortable with the concepts he covers and expand your knowledge with the detailed explanation of the various properties and values available to you. Be sure to play around with the live code examples too!

Code Review

The important bits of code from this lesson

/* Font Families */

html {
  font-family: Helvetica, "Times New Roman", sans-serif;
}


/* Font Sizes */

.big {
  font-size: 32px;
}
.small {
  font-size: 8px;
}


/* Font Weight */

.heavy {
  font-weight: 700;
}


/* Monospaced Fonts */

.monospaced {
  font-family: "Courier New", monospaced;
}


/* Letter Spacing and Line Height */

.spaced {
  letter-spacing: 24px;
}
.big-line-height {
  line-height: 128px;
}
< !-- Using Google Fonts -->

<head>
  < !-- Other meta tags -->

  <link rel="stylesheet" href="/assets/stylesheets/fonts.css">

</head>
.bungee {
  font-family: Bungee, sans-serif;
}

Wrapping Up

Even with just these few tools you can do pretty amazing things with fonts and typography. The difference is always noticeable when the time is taken to really make the typography stand out on your webpage. Importing new fonts has never been easier with Google Fonts so be sure to take full advantage of their free fonts when you're putting together your own sites! Now you have everything you need to produce professional quality typography in your own projects.



Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: Applying Backgrounds and Gradients with CSS