First time visitor? The tutorials start here.

CSS font property

The different “font” properties you can define are:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family


For some strange reason, font color is defined as “color” instead of “font-color” and is therefore not included in with “font” properties.

Now let’s break down the four “font” properties.

font-style

Values for font-style can be:

  • normal (default)
  • italic
  • oblique

Example:

font-style: italic;

font-weight

Values for font-weight can be:

  • normal (default)
  • bold
  • bolder

You may also define font-weight with a number such as 400, 700, or 900 instead of normal, bold, or bolder, but I tend to stick with the word-based values on this one.

In some cases, “bolder” and “900” will only show bold instead of bolder, so try not to rack your brain too much if you don’t get the result you expect with it.

Example:

font-weight: bold;

font-variant

Values for font-variant can be:

  • normal (default)
  • small-caps

Example:

font-variant: small-caps;

font-size

Values for font-size may be defined in the following measurements:

  • px
  • %
  • em
  • pt

px is short for “pixel.” A pixel is the smallest dot you will ever see on your computer’s monitor. If you still don’t know what a pixel is, open the “Paint” program that probably came installed on your computer. Choose the pencil icon, make sure it is set to the smallest size it can be, then click once inside the image area. That is one pixel.

% – 100% is the default. It would be tricky to get into a detailed explanation about % when pertaining to fonts at this point. But if, for example, you defined the body to have a font-size of 100%, it would be twice the size of the default that each visitor to your site has defined in his or her browser’s settings. For this reason, most people like to use px to set the primary font size for their page (body).

Now let’s say you define your page (body) to have a font-size of 10px. If you then set your h1 heading’s font-size to be 300% and your h2 to be 200% (I’m using these values to make the math easy), the h1 would be 30px and the h2 would be 20px. It can be handy to use px for the body and % for the rest of your font sizes, because if you change the layout of your site and decide you want all of the fonts overall to be larger or smaller, you might be able to get by with only changing the body’s font-size, and the rest of them will adjust accordingly.

em – In general, “em” is the height and width of the capital letter “M” (get it? M=em). But when dealing with font-size, 1em is 100% of the default font-size, whatever that default may be.

If you define the body’s font-size to be 10px and something else to be 1.5em, then that element’s font-size might be 15px. I say might be, because there may be other variables to consider, depending on how you write the page and where that thing is located within it.

When pertaining to font-size, 150% is the same as 1.5em. However, font-size is the only property where % and em are directly related to each other.

pt means “point” and is best used for printing. Have you ever wondered why I included a print.css file in with the practice files? You’ll know why eventually, if you haven’t already figured it out.

font-family

There are many possible values for font-family, but any font you use in a web page must be installed on your visitor’s computer before they can see it. This is actually why we use font families instead of only defining one font.

Let’s say your preference is verdana, so you will list that first. If someone doesn’t have verdana installed on their computer, you want to show them arial. If they don’t have arial, you want to show them helvetica. If they don’t have any of those, you want them to see whatever generic sans-serif font they do have installed on their computer.

The format for doing that would be this:

font-family: verdana, arial, helvetica, sans-serif;

Here’s another example. Windows might have Times New Roman. Mac might not have that, but it might have Times, which is pretty much the same thing, but you have to use the right name for it before your visitor’s computer will know what you mean. If someone doesn’t have either of those two fonts installed, just show them whatever generic serif font they do have:

font-family: 'times new roman', times, serif;

When a font name has one or more spaces in it, you must always, always, always enclose it in either single or double quotes, as I did above with ‘times new roman’.

The 5 generic font-families

There are five generic font-families: serif, sans-serif, monospace, cursive, and fantasy.

Serifs are decorative details in a font, one such font being Times New Roman. Serif fonts are used mostly in newspapers and books, because they are easier to read in print. But when you try to read a font with that much detail on the web, it is actually harder to read.

It is okay to use a serif font in larger headings, but I highly suggest not using them in your smaller fonts unless you want to give your visitors a headache from trying to read it.

Sans-serif means without the serifs. These fonts include Verdana, Arial, Helvetica, and others.

A monospace font is a font whose letters all have the same width (yes, an “I” is just as wide as an “M”), such as courier or 'courier new', depending on the operating system.

Cursive fonts look like handwriting. The only cursive font that is likely to be installed on every Windows-based system is “Comic Sans MS,” but there’s no guarantee that you’ll find it on all Linux-based systems.

Fantasy fonts include Impact, Papyrus, Old English, and others, but most fantasy fonts do not come pre-installed on computers, so it’s best to stay away from them.

Shorthand

When writing font properties in shorthand, you need to start with font-style, followed by font-variant, then font-weight, then font-size, then font-family. If you skip any of these properties, it is just like defining its default behavior.

Examples:

font: italic bold 15px verdana, arial, sans-serif;

Result: This is how it looks.

font: bold 12px verdana, arial, sans-serif;

Result: This is how it looks.

font: 17px georgia, 'times new roman', serif;

Result: This is how it looks.

Return to the list of CSS properties

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Comments (2)

Pastor RickMarch 14th, 2009 at 3:39 pm

The only thing I would change is the number weight examples on font-weight so they give the same result as the word examples (i.e. 400 700 900). I might also mention that bolder (900) is not supported by most browsers so it defaults back down to bold in such cases.

LesaMarch 14th, 2009 at 3:51 pm

Can you tell I never use number values? Lol, I thought I had seen 300 and 600 before, but I know you’ve been using them and have edited my post accordingly.

As for 900 and bolder not always working, wouldn’t that depend more on the font than the browser? After all, most installed fonts don’t seem to come with a ‘bolder’ version. Rather than say why it doesn’t always work, I just included in my edit that it doesn’t always work.

Thank you, Rick. This kind of feedback can certainly help others. 🙂

Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.