Albino Blacksheep

Font Tutorial

by AB (Sners)

This tutorial will explain how to set fonts on web pages using (X)HTML or CSS. You should have at least a very basic understanding of how to read source code and understand HTML and CSS syntax to follow along with this tutorial.

  • Font Tutorial
  • 1997 Overview
  • CSS Font
  • CSS Font Family
  • CSS Font Size
  • CSS Font Style
  • CSS Font Weight
  • CSS Font Varient
  • CSS Font Stretch
  • CSS Font Size Adjust
  • CSS Font Shorthand
  • Embed a Custom Font in Internet Explorer
  • Embed a Custom Font in Netscape
  • Color
  • Underline

1997 Overview

In the beginning (before CSS), there was the font tag.

<font size="3"> Hello World! </font>

This was inefficient for two reasons. Pages could have hundreds of different font tags to achieve effects on different parts of a page. For example, each line of text in a menu would have its own set of font tags. The other reason is that the web designer has very little control over the exact display of the site's fonts. There are so many variables, and very specific properties to decide from for each, most not even defined in HTML.

This is where CSS comes in.

CSS Font

In CSS you can choose a font's generic family and its specific font name. There are different degrees of size and boldness or thinness to define. There are a couple different styles a font can be displayed in. You can expand and condense a font, and make a few other adjustments in order to get an exact look for a font.

Understanding typography is now important to making a pleasing and readable web page.

First, decide on the tag (or class) you wish to define the font for. You can either define this in your CSS document, or add it directly onto that tag. I suggest using a seperate CSS document, but if you are very new to CSS, you can just use style in your tags to add CSS attributes.

CSS Font Family

I think it is logical to apply the CSS to the paragraph tag when testing fonts. In your HTML page wrap some text around a set of paragraph tags - <p> </p> so you view the changes to this text as you follow along with the tutorial.

For specifying a font under font-family, you can choose a generic font such as sans-serif, courier or times. As well, you can be more specific such as Verdana, Tahoma, Arial or Comic Sans MS.

Without the embed font feature discussed later, the font you choose will only show up if the user also has that font on their computer. In Windows, the font files are stored in C:\WINDOWS\Fonts\. Keep in mind that Macintosh users only have a few fonts in common with Windows computers, so your font choice is limited.

Luckiy, you can declare the font-family as a prioritized list - specifying a number of fonts. If the computer doesn't contain the first font to display, it will try to display the second, and so on.

Now we are ready to add the code

In your CSS Document.

p {
font-family: Verdana, Tahoma, Helvetica, Arial;
}

Alternatively, use CSS in the HTML document.

<p style="font-family: Verdana, Tahoma, Helvetica, Arial;">

CSS Font Size

I'm going to move onto font-size since this is most important from the reader's point of view.

Depending on your knowledge of unit sizes, you will want to decide between generic sizes and unit sizes.

Generic sizes are: xx-small, x-small, small, medium, large, x-large and xx-large.

Even simpler, you can decide between defining smaller or larger as your size.

As for units, you can define everything from points (pt), pixels (px), percentage (%), em and more. (Use percentage values over 100% here.) For screen presentation, I suggest either pixels for exact sizes since pixels are more or less universal on all browsers, or use em units for something adjustable.

For print style sheets, I suggest using points where 12pt is the adverage.

In your CSS Document.

p {
font-family: Verdana, Tahoma, Helvetica, Arial;
font-size: 13px;
}

Alternatively, use CSS in the HTML document.

<p style="font-family: Verdana, Tahoma, Helvetica, Arial; font-size: 13px;">

CSS Font Style

You only have three styles to choose from in this declaration: normal, italic and oblique. The default is normal. Remember that defaults don't need to be specified unless you need to override another declaration.

In your CSS Document.

p {
font-family: Verdana, Tahoma, Helvetica, Arial;
font-size: 13px;
font-style: italic;
}

Alternatively, use CSS in the HTML document.

<p style="font-family: Verdana, Tahoma, Helvetica, Arial; font-size: 13px; font-style: italic;">

CSS Font Weight

In font-weight you can decide between sleek thin fonts or bold fonts to create a huge impact. In CSS, this is called weight. I guess bold things are fatter and would therefore weigh more. Usually, bold text is reserved for headers and emphasised words, but I won't limit you.

The default is normal, but you can define normal, bold, bolder or lighter.

You can instead use 100, 200, 300, 400, 500, 600, 700, 800 or 900 to define dfferent degrees of boldness.

In your CSS Document.

p {
font-family: Verdana, Tahoma, Helvetica, Arial;
font-size: 13px;
font-style: italic;
font-weight: bold;
}

CSS Font Variant

The font-variant declaration has only two options: small-caps and the default, normal. With this you could use the small-caps font that is popular with some web designers. I suggest it for headers or the spine of CD and DVD covers.

In your CSS Document.

p {
font-family: Verdana, Tahoma, Helvetica, Arial;
font-size: 13px;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
}

CSS Font Stretch

With our example all small, italic and bold, it can be squished and hard to read. It is perfect to introduce font-stretch at this stage. The default is normal, but you can specify wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded or ultra-expanded.

p {
font-family: Verdana, Tahoma, Helvetica, Arial;
font-size: 13px;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
font-stretch: expanded;
}

CSS Font Size Adjust

I'm introducing font-size-adjust at this point, rather than before for three reasons. First, it is CSS 2 compatible rather than CSS 1 and 2, but this shouldn't be a problem with modern browsers. Second, font-size-adjust is only applied when the font you selected is not on the user's computer. This means you used a wrong font. Lastly, this is an advanced feature since you need to know the aspect ratio of the first font you would like to use.

The way font-size-adjust works in as simple terms as possible, is that it preserves the size of the missing font onto the replacement font.

Font Shorthand

Using shorthand will allow you to group all related properties together on one declaration. This will make your style sheet more efficient, smaller and easier to read.

To use font shorthand, you only need to group at least two properties - font-family and font-size. We will group six from this tutorial.

p {
font: Verdana 13px italic bold small-caps expanded;
}

You can also use font to match the text to: caption, icon, menu, message-box, small-caption or status-bar. This may vary from browser to browser.

In your CSS Document.

p {
font: status-bar;
}

In this example, the font of your status bar will now become the font of your paragraph.

Embed a Custom Font in Internet Explorer

To embed a custom font, let me show you the code first, and then explain what you have to do to get the code to work correctly.

I advise you to place this code between the <style type="text/css"> </style> tag set in the head of the document.

@font-face {
font-family: newfontname;
font-style: normal;
src: url(newfontname.eot);
}

You have now defined a new font-face that you can use throughout your CSS document like any other font, but before this takes effect, you must encode and upload the .eot file which stands for Embedded Open Type format. To do this, download Microsoft's Web Embedding Font Tool at http://www.microsoft.com/typography/WEFT.mspx

In your code, you will also need to change "newfontname" to the name of your font, and you can include a path to find the font.

Embed a Custom Font in Netscape

If you have Netscape users, you will want to use the following code to embed a custom font for them too. Keep in mind there are some steps to perform after adding the code.

First, place this code in the head of your document.

<link ref="fontdef" src="newfontname.pfr" />

You may notice now, you must prepare a Portable Font Resource (.pfr) file. There are multiple programs that do this such as HexWeb Typography (but their site is offline).

Of course, you will need to change "newfontname" to the name and path of your font.

Color

How do you make the font a different color? Well, there is no font color property. There's just color, and it applies to any tag or class specified in your CSS document.

In your CSS Document.

p {
color: green;
}

You will need to know the available colors as well as hexidecimal or RGB color code.

Underline

Underline? This is not part of fonts, but it is a value of text-decoration. I'm only including it here because I know people will ask for it.

In your CSS Document.

p {
text-decoration: underline;
}

May 10, 2005
Last Updated: May 11, 2005

* The US spelling of the word colour is used throughout the article so that the reader does not mistype his or her code that uses US spelling as a standard.