A Brief Timeline

1991: World Wide Web is made public. There was originally no control on what fonts were used on the web.

1995: Netscape creates <font> tag, standardized in HTML 2

1996: Core fonts for the web put together by Microsoft

1996: CSS1 is completed and released. Fonts can be retrieved from users computer

1998: CSS2 is released, introducing many font properties

1999: Internet Explorer 5 released, it supports @font-face with .eot fonts.

2002: Core fonts for the web discontinued by Microsoft

2009: Safari 3.1, Firefox 3.5 and Opera 10 begin to support the @font-face property with both .ttf and .otf fonts.

CSS Font Properties

In CSS there are a bunch of font properties, which allow all us developer folks to make our websites look a bit more fancy. You’re bound to know the differences between sans-serif and serif by now, but if you don’t, here’s a little diagram to explain:

Sans-serifs and serifs are two very wide categories, that cover the majority of fonts (well, maybe except wingdings and webdings).

CSS3 (Experimental Elements, not for use in real projects)

‘font-size-adjust’
‘font-stretch’
‘font-effect’
‘font-smooth’

CSS2

font: <font-style> <font-variant> <font weight> <font size>/<line height> <font-family>

Allows you to specify a lot of font related styles in one place. You can omit certain values, for instance you could do this:

font: italic small-caps bold 14px/16px Helvetica, Arial, sans-serif;

Or you could do this:

font: italic Helvetica, Arial, sans-serif;

See the full CSS Specification for this element here.

font-family: <primary font>, <secondary font>, <tertiary fo…>, <generic font>

Font-family is one of the most basic font properties, and it works in a pretty intuitive way. Basically, fonts in CSS are taken from the users computer. For instance, if you do this:

font-family: Helvetica;

The font-family will become Helvetica for the users that have that font. If the user doesn’t have that font, that’s where we can run into problems, as it’ll just go to the browsers default font. To fix this problem, we can put in another font after Helvetica, which will be shown if the user doesn’t have Helvetica. This is known as the fallback font, and you can do this as many times as you want, for example:

font-family: Helvetica, Myriad Pro, Arial, Tahoma, Trebuchet MS;

There is still a small chance that the user will not have any of those fonts though, so we put in a generic font, which can be any of the following:

serif e.g. Georgia
sans-serif e.g. Arial
cursive e.g. Chancery
fantasy e.g. Comic Sans
monospace e.g. Courier New

We put one of those after our list of fonts, just in case the user has none of the fonts we specified.

font-family: Helvetica, Myriad Pro, Arial, Tahoma, Trebuchet MS, sans-serif;

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

Font-weight is just how heavy the font is, where heaviness is how bold the font is. Normal is the same as saying 400, and bold is the same as saying 700. One would assume that as you went up the numbers, the font would get heavier, but this isn’t always true. The difference between 100 and 200 is 200 is at least as heavy as 100. So 200 could be the same as 100, or slightly heavier, depending on the font.

Inherit just means it inherits the property from the parent element.

font-style: normal | italic | oblique | inherit

Decide what style the font should be in. Oblique is slanted text that uses the same glyphs, whereas italic is slanted text that uses different glyphs.

font-variant: normal | small-caps

Gives you the ability to give your font in small caps.

font-size: <absolute size> | <relative size> | <length> | <percentage> | inherit

The ability to change the font size to your liking.

Absolute Size

xx-small – same as HTML font size 1
small - same as HTML font size 2
medium - same as HTML font size 3
large – same as HTML font size 4
x-large - same as HTML font size 5
xx-large - same as HTML font size 6

Relative Size

Relative to the parent element, for instance, “larger” or “smaller”.

Length and Percentage

Same as all other length and percentage elements. Lengths measured in unites of “em”, “ex”, or “px”.

CSS3 – Unknown Territory

Most of these are not supported by the majority of browsers, and I would never consider using them in real life projects.

font-size-adjust: <number>

The differences between upper and lower case letters can be unique for each font. If one of your fallback fonts isn’t in the same ratio as your desired font, decreasing legibility. Font-size-adjust alters the x-height of a font, so that it is more readable for the user.

font-stretch: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit

These pretty much speak for themselves. The word after font-stretch: is just the amount you want to stretch the font out by.

font-effect: none | emboss | engrave | outline

Allows you to emboss, engrave or outline a font. Currently not in the editors draft of the CSS3 Specification for fonts, so it may not be included in CSS3.

font-smooth: auto | never | always | <absolute size> | length

Control the anti-aliasing of a font. If you set a length to this property, then smoothing will only occur when the font-size value is bigger or equal to the value specified in font-smooth. Currently not in the editors draft of the CSS3 Specification for fonts, so it may not be included in CSS3.

Other Resources

@font-face

The @font-face rule basically allows you to import fonts into a CSS style sheet. This has been supported by IE for quite some time, but unfortunately IE only supported the import of .eot files. Recently however, Firefox, Opera and Safari have begun supporting the import of .ttf and .otf files, which are much more popular.

Suppose you have a font called “Futura” which you wish to import into a CSS document. To do this you’d declare the following:


@font-face {
          font-family: Futura;
          src: url('http://www.webtint.net/futurafont.ttf');
}

Font-family is the name you wish to call the font, and the ’src’ is just the URL of the font. You can then go on to use it later on like so:

p {
          font-family: Futura, sans-serif;
}

You can declare the @font-face rule more than once, to import families of fonts or more than one font. Remember, the @font-face rule is there to define a font, so you can set what weight you want this font to represent, and what style it is:

@font-face {
          font-family: Futura;
          src: url('http://www.webtint.net/futurafontbold.ttf');
          font-weight: bold;
}
@font-face {
          font-family: Futura;
          src: url('http://www.webtint.net/futurafontitalic.ttf');
          font-style: italic;
}