Web Typography

Communication is the heart of Web Design

Website designers have overlooked typography for far too long. It’s only been the last 5 years that web typography has really taken off. With the birth of services like Google Fonts allowing users to download, modify and exchange font’s freely under open source copyright laws; there really is no excuse to not be exploring typography on your website. I like to think of typography as the host for your website… it sets the tone.

A brief history

When HTML was introduced typography on the web was controlled by the settings of each browser. It wasn’t until Netscape introduced the tag in 1995 that a user could control the font displayed on an individual page. This was then standardized in 1996 by the HTML2 specification. It wasn’t until the CSS3 fonts module that web typography took off.

Taking it to the web

Web typography is a lot like traditional print. You have a lot of the controls for scale, kerning, leading, and tracking. There are very few font families available online by default. If your willing to purchase a font for a website, you can do so. However, there are free alternatives such as Google web fonts. I highly recommend looking for free alternatives for your font selection rather than the default web font collection. Google gives you pairing suggestions that will help you pick a font for display headings, and then suggest a font for your body copy. I prefer a thin typeface for my headlines and a bolder typeface for my body copy.

It's a matter of style

Typography isn’t the easiest thing to adapt into your designs–but once you get it, you’ll never forget it.

Summary

Fonts can be fun. Explore and take risks.

Getting started with webfonts!

The best way to use a webfont is to embed it in your CSS file. To do this create a directory in your web project called fonts. Using the transfonter tool below in the resources create your webfont files and copy them into your fonts folder. To use them follow this format in your CSS file.

@font-face { font-family: 'FONTNAME'; src: url('../fonts/FONTNAME.woff2') format('woff2'), url('../fonts/FONTNAME.woff') format('woff'); font-weight: 100; font-style: normal; }

Then to use the font within your CSS all you have to do is add the following attribute to the properties of your element: font-family: 'FONTNAME', fall-back;. It is important that you always put a fall-back after your font family in what's called the font stack. For instance: serif, sans-serif or cursive. Use your judgment which would be the best fall-back for your font style.

Here is an example of a finished h1 element in CSS with a font family assigned called "Open Sans Light":

h1.page-title { font-family: 'Open Sans Light', sans-serif; }