CSS Cascading Style Sheet: Using Fonts In CSS

Fonts in Stylesheet

Table of Contents:

  • 1) Introducton
  • 2) Calling Fonts by Name
  • 3) Controlling Text Size
  • 4) Special Effects With the Text

Welcome to our tutorial on the wondrous language known as cascading stylesheets. After the basics of how to use and add stylesheets to Web pages, we can now begin exploring the individual properties that make them more than cool.

Lesson 2 is devoted to fonts: calling them by name, controlling text size, specifying all manner of bolds and italics, and adding special effects. Do you think you can do all these things with existing HTML tags? Well, you can\'t.

The CSS properties covered in this turorials include:

  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant
  • text-transform
  • text-decoration
  • font
Let\'s get started.

Calling Fonts by Name

First thing\'s first: How do you tell the Web browser which font to display? You just type the name of the font after font-family, right?

Unfortunately, it\'s a little more complicated than that. Fonts are not always called the same thing across platforms. For example, Courier on a Mac is often called Courier New on a Windows machine. And whereas one machine might have an Italic variant of a font, another might call it Oblique. The more you look, the more inconsistencies you\'ll find.

On top of that, our name for a font isn\'t necessarily the same as the computer\'s name for the font, and you have to make sure you\'re using the computer\'s name. For example, Brush Script is actually Brush Script MT.

How do you find out what the computer\'s name for the font is? It depends on the platform:

  • Windows users: Use the font name exactly as it appears in the font menu of an application, such as Microsoft Word.

  • Mac users: Don\'t trust what applications tell you. Instead, open up the Fonts folder, which can be found in your System folder. Spell the font name in your stylesheets code the same way its file name is spelled.
font-family

font-family is the CSS property used to call a font by name. The basic syntax looks like this:

    H2 { font-family: helvetica, impact, sans-serif }
Here\'s how a Web browser interprets this stylesheet rule: Look at the first font name on the list (helvetica). If a font with that name is installed on this computer, use it. If not, move on to the second font named. If impact also isn\'t installed, then move on to the third font specified. A value of sans-serif is a last-resort that tells the browser to use whatever its default sans-serif font is (probably Arial).

Here\'s how your browser would interpret the above code:

CSS font control is peachy.

You can put as many font names in your list as you want. This feature can be helpful if you\'re not exactly sure how a font is spelled on a different platform: Go ahead and list both spellings.

Note that browsers seem to prefer all-lowercase spellings for font names, although sometimes they will recognize capitalized names. As long as you test everything thoroughly, you should be fine (that seems to be the CSS mantra).

It\'s a good idea to always use a generic font name as the last on your list. Your options:

  • serif (probably Times)
  • sans-serif (probably Arial or Helvetica)
  • cursive (probably Comic Sans)
  • fantasy (probably Ransom)
  • monospace (probably Courier)
(Note: Netscape Communicator doesn\'t support cursive or fantasy.)

More font name tips:

  • If a font name consists of more than one word, such as Gill Sans, put quotes around the font name in your CSS code:
    BODY { font-family: "gill sans", "new baskerville", serif }
  • For inline styles, use single quotes:

    Text goes here.

  • If you\'re grouping declarations and font-family is among them, make it the last one, like so:
    H2 { color: red; margin: 10px; font-family: times, serif }
    Sometimes Internet Explorer 3 will ignore an entire CSS rule if font-family isn\'t the last property listed. It\'s strange but true.
There you have it. With the font-family property, you can start calling fonts by name and with more flexibility than by using the tag.

Next up are more ways to size text than you could possibly imagine.

Controlling Text Size

Are you frustrated by the fact that you can only size text to seven different sizes using ? Then you\'re gonna love this page.

font-size

Using the font-size property, you have magical control over the size of text with an infinite number of font sizes at your disposal.

Three basic ways to specify the size of text are:

  • points, ems, pixels, and other units;
  • keywords; and
  • percentage values.

Points, Ems, Pixels, and Other Units

Stylesheets recognize many different kinds of units that you can use to specify the size of an element. Let\'s look at each one in turn.

Points:

    P { font-size: 16pt }
This code tells the browser to display

text at a size of 16 points. Point size is a unit familiar to print designers and refers to an imaginary box that extends from the bottom of a descender (like "p") to the top of an ascender (like "d").

Points are an excellent unit to specify text size with because they work well across browsers and platforms. The only thing you should be aware of is that, by default, fonts appear larger on PC monitors than they do on Mac monitors.

(If this is a big problem, you can always use JavaScript to detect which platform a person is using and then link to a different CSS file depending on the platform. Check here for details about platform detection.)

Points, like all other units, work as small or as big as you want (that was 8 points and 80 points, respectively).

Em:

    P { font-size: 20pt }
    B { font-size: 1.5em }
An em is a unit of distance equal to the point size of a font. When used in stylesheets, an em refers to the size of the parent element. Thus, in the example above, any text within

would be 30 points. (The text is one and a half times that of its parent.)

The em is also an excellent unit for text size, even though IE 3 doesn\'t support it. When you use em, you can be sure that users who need to can still adjust the type size using their browser preferences (which is important for those with less-than-perfect eyesight). Also, pages that are printed will have appropriate text size.

Pixels:

    P { font-size: 20px }
From a Web design point of view, the pixel is a familiar unit and relatively predictable. In fact, the best thing about using the pixel unit is that text sizes are similar across platforms when you use it (with any other unit, PC text appears bigger than Mac text).

There is a price, however. When you use pixels, your Web pages will not print consistently. Sometimes they won\'t print at all, and sometimes they\'ll print with ultra-tiny text. Also, in some browser versions, users won\'t be able to adjust the font size using the browsers\' preferences. Not good. The em is the more flexible unit.

Other units:

If the previous three don\'t give you what you want, try one of these units:

  • in is inches
  • cm is centimeters
  • mm is millimeters
  • pc is picas
  • ex is x-height

Keywords:

If you don\'t like using those units, you can also declare text size through keywords, like so:

    P { font-size: large }
There are seven keywords, and they correspond to the numerical values we\'re used to seeing with :
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
With these values, the Web browser is free to decide which exact font size is appropriate for each keyword. For example, x-large is displayed at 28 points in Netscape Communicator (Windows and Mac), 24 points in IE 4 (Windows and Mac), and 18 points in IE 3 for Windows 95.

You can also use two relative keywords:

  • smaller
  • larger
A value of smaller tells the browser to adjust the size of the current text down a notch on the keyword scale. For example, if large text has smaller applied, it will then be medium sized. The larger attribute works similarly.

(Note: IE 3 doesn\'t support the smaller or larger attributes.)

Percentage Values:

A third way to specify text size is through percentage values. Here\'s an example:

    P { font-size: 15pt }
    B { font-size: 300% }
These rules translate as follows: Make all text within

three times as large or 45 points. Percentage values are always based on some inherited value from a parent element.

The browsers are a little buggy with percentage values, so test often.

Isn\'t choice delightful?! We finally have the freedom to play all we want with text size, thanks to the font-size property. The range at our disposal is wondrous, as you can see below. (Each letter "i" is 5 points bigger than the one before it; we start at 5 pt and end at 100 pt.)

i i i i i i i i i i i i i i i i i i i i

Try doing that with HTML!

And we get some of the same flexibility with bold and italics. Check it out.

Special Effects with Text

Welcome to the miscellaneous area of our font discussion. Here you\'ll find other font-related stylesheets properties that are perfect to add to your toolbox.

font-variant

font-variant is a simple one: You use it to display normal text as small caps.

    H2 { font-variant: small-caps }
Unfortunately, no version of Communicator or Internet Explorer currently supports this property. IE 4 and 5 come close, but they capitalize everything equally. The result is that all the letters have the same height — which isn\'t exactly what small caps should look like. But it seemed worth mentioning anyway, in the event that later browsers will support it.

text-transform

This property is somewhat related, and it actually works! With text-transform, you can easily control capitalization. Here\'s the basic code:

    B { text-transform: uppercase }

    Here are all the possible values and what they mean:

  • uppercase makes every single character capitalized. This sentence serves as an example.
  • lowercase makes all of the characters lowercased. This sentence serves as an example.
  • capitalize makes the first character of every word capitalized. This sentence serves as an example.
  • none means that any inherited text-transform value will be ignored, and the text will display normally. This sentence serves as an example. (Note: IE 3 doesn\'t support text-transform.)

    text-decoration

    For decades (well, it feels like that long anyway), we\'ve had no control over the fact that text links are underlined in Web browsers. I don\'t know about you, but I think it\'s ugly and annoying. Ladies and gentlemen, I give you a solution: text-decoration.

    First thing\'s first. Here\'s the basic syntax for this property:

      B { text-decoration: underline }
    Most of the options make text less readable:
    • underline makes the text, um, underlined. Check out these words.
    • overline adds a line above the text. Check out these words.
    • line-through puts a line through the text (i.e., strike through). Check out these words.
    • blink is your basic, familiar nightmare. The text blinks. Check out these words.
    • none makes sure none of the above happens.
    (Note: Communicator doesn\'t support overline. IE 4 and 5 don\'t support blink. IE 3 doesn\'t support either of those values.)

    The none value is magical. With it, you can remove the line under text links. Here\'s how:

      A:link { text-decoration: none }
      A:active { text-decoration: none }
      A:visited { text-decoration: none }
    Think of these as predefined classes for the tag. A:link is for normal, unvisited links; A:active is for link appearance while you\'re clicking; and A:visited is for previously visited links. The lines above would go in your embedded, linked, or imported stylesheet, and your HTML link code wouldn\'t change at all:

    Link

    And here\'s the result:

    But wait, there\'s more! Not only can you remove underlining from links, you can also use any other CSS property on them using A:link, A:active, and A:visited. So, you can make unvisited links 12-point bolded Arial and visited links 10-point italicized Times. The world is your oyster.

    OK, OK, not all browsers support this heavenly feature set. Communicator supports these predefined classes with text-decoration but is very buggy with other properties. IE 3 doesn\'t support A:active (and the Mac version doesn\'t support A:visited). IE 4 and 5 do the best job, supporting just about everything.

    Despite these limitations, you have many opportunities that were never before possible! All hail the makers of CSS.

    Do you think you\'ve mastered the world of CSS and fonts? How about a quick exercise?


    •