Practical web typography and font styling

Today, we have fine control over all of our web typography using just CSS—a vast improvement from just a few years ago when we were limited to a handful of “web safe” fonts or janky flash workarounds to use the fonts we wanted. Here’s a quick guide to get your started using CSS for fine control over your type.

CSS Basics

To begin with, let’s look at a basic example of styled text in CSS and break down what’s happening. We’ll look at a simple paragraph, as seen in the pen below:

p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
  font-size: 1em;
  line-height: 1.4;
  color: #000;
  margin-bottom: 1.2em;
}

See the Pen Web Typography Basics #1 by Alex Turnwall (@alturnwall) on CodePen.0

The above CSS utilizes five basic declarations you’ll likely need as a starting point for your typography styles:

font-family

This determines which font the browser renders our text with. Notice how there are multiple values? This is very important to understand, and it’s good practice to include “fallbacks”, as are listed here. The browsers looks on your specific computer to see if a version of the specified font is available, from left to right. So first, it’ll look for “Helvetica Neue” (this font name is in quotes because there is a space between the words—see sidebar for specifics).

If the browser can’t find that font on your computer, it’ll then look for Helvetica . This might seem repetitive, but it’s not—Helvetica is a different font from Helvetica Neue, (and I just happen to prefer the look of the Neue version, which is available on most Macs.) If neither of those are available, it’ll try Arial , and finally, if nothing else, it’ll just use the default sans-serif  font on your system.

This may all seem like overkill, but it’s good practice to include appropriate fallbacks. Every system is different and every user has different fonts installed. When considering what fallbacks to use, you’re shooting for something similar to the desired font. There’s a list of these “web safe” fonts, and the percentage of computers that have them, at cssfontstack.com, and here are a few to get you started:

/* "Grotesk" Sans Serifs */
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 

/* Serifs */
font-family: Garamond, Baskerville, Georgia, serif;  

/* "Humanist" Sans Serifs */
font-family: Tahoma, Geneva, Verdana, sans-serif;

And what if you don’t want to use a “web safe” font from those lists? Well, you can embed your own font. See the @font-face section below ↓ .

font-size

This is pretty self-explanatory. The unit “em” may be unfamiliar to you—don’t worry, I’ll explain that in detail in the font-size section below ↓.

line-height

This is the space between the lines of text. If you’re coming from the design world, this is your leading.

color

This is also pretty self-explanatory, and in fact we didn’t really need to add this line because #000  (black) is already the default color. Still, I wanted to include in case people hadn’t seen it before.

margin-bottom

This creates the space between the paragraphs. I specifically added this to the paragraph because we’re using HTML5 Boilerplate for this tutorial series, with makes use of normalize.css, which “resets” the default browser margins in an attempt to make our elements render consistently across browsers (more info here).

Just to see the difference in some styles, try adding a new class to a separate paragraph and styling it differently, like this:

.serif {
  font-family: Garamond, Baskerville, Georgia, serif; 
  font-size: 1.1em;
  color: #996633;
}

See the Pen Web Typography Basics #2 by Alex Turnwall (@alturnwall) on CodePen.0

Pretty easy stuff. Let’s kick it up a bit… 

Responsive typography: using “ems” for font-size

So, why did we use “em” as a unit for our type size—say, as opposed to something like “px” (pixels)—which might be a little easier to understand, since our screens are built with pixels?

[coming soon]
 

Using @font-face to add custom fonts

So , if you don’t want to use the standard “web safe” fonts, you can include your own.

All of the complications with this method are outside of the scope of this particular article, but you should know a few key points:

1. Embedding additional fonts will slow down your site because it’s another resource (like an image) that the browser has to load.
2. You cannot legally embed many fonts on your computer—check your license.
3. Different browsers, operating systems and devices use different types of font files.

With those things in mind, we’ll download a free font that we can legally use on our own sites from Font Squirrel, and we’ll make use of the great CSS that they generate for us so it’ll work on the widest range of browsers.

First, head over to Font Squirrel and download the webfont kit for a popular font, Roboto.

Once you’ve downloaded the kit, unzip the folder and find the font files that you’d like to add to your site. Then, follow the steps below to use the font on your site:

Step 1

Add the files to your website folder.

Step 2

include the @font-face in your stylesheet

Step 3

Add the font to your existing font styles, or create a new style

Other methods & services

The above method is how you actually use CSS to add additional fonts to your site as resources that are on your server. But it’s worth noting that there are other services—some free and some not—that allow you to do essentially the same thing, except the actual font files are hosted on another company’s servers. You might want to check out Google Fonts (currently free) or Adobe Typekit (which might be free to you if you already use other Adobe products).