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 taken off. With the birth of services like Google Fonts, allowing users to download, modify and exchange fonts freely under open source copyright laws, there is no excuse not to 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 you're 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 fallback 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 fallback 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;
}
