Fonts and Colors¶

In the early-to-mid 1990s, it was common to see websites with words in every color of the rainbow. The internet was relatively new to the average person, and novelty caused us all to go a little overboard in the colors and fonts departments. (We also went a little nuts with blinking text, marquees, and animated GIFs of all varieties, but I digress.)

Now, we seem to have gotten a little more sane, and have come to realize that font and color variants are most effective when used sparingly.

Let's overview some of the aspects of fonts and colors that you can change. First, it's important to know that "font" is the computer equivalent of "typeface". What will the words look like?

Family¶

There are thousands and thousands of font families out there. Each font family has a particular style for each letter of the alphabet. Most have upper and lowercase variants, as well as specific styles for numbers, punctuation, and special characters. Some common examples include:

• Arial
• Courier
• Georgia
• Verdana

You can declare any font you want for a page element, but if a user requests your page and doesn't have your declared fonts installed, the user's browser will render your page with different fonts than those you declared. Your safest bet is to stick to safe font families.

You would assign the Arial font family to the p tag thusly:

p { 
  font-family: Arial;
}

Size¶

Font size can be measured in pixels, ems, or points, as well as (less commonly) %, picas, millimeters, centimeters, or inches. You can also declare the font size in "absolute" terms (e.g. "small", "medium, "x-large") or in relative terms (e.g. "smaller, larger"). Pixels, points, and ems are probably the most commonly-used.

Whichever you choose, you'll probably have the best results if you are consistent and use the same measurement type across the board. Here is some font in the Arial font family, at 10-point, 14-point, and 34-point sizes.

To set the font size on a p tag to 14pt, you would use the following code:

p {
  font-size: 14pt;
}

Line Height¶

Line height can be set using the same measures as fonts (except the absolute and relative measurements) and controls how tall a line is. This controls the "cushion" above and below lines of text. Here are a few samples of the same text at the same font size, but with different line heights.

10pt

13pt

20pt

A line height declaration of 13pt on our p tag would look like:

p {
  line_height: 13pt;
}

Text Decoration¶

There are four options for the text-decoration CSS property, one of which you should only use when forced at knifepoint (maybe a slight exaggeration).

Underline - Does exactly what you would expect, and underlines text.

p { 
  text-decoration: underline; 
}

Overline - Draws a line above the text.

p { 
  text-decoration: overline; 
}

Line-through - Also known as strikethrough, this will cause your font to look like it had a line typed through it.

p { 
  text-decoration: line-through; 
}

Blink - This designation will cause your text to blink. It will also earn you ridicule from and shame of your peers. :) The blink function was heavily used in the early days, and with only a few exceptions has come to be seen as the mark of an amateur designer. It is included here only for completeness' sake.

p { 
  text-decoration: blink; 
}

Font Variant¶

Normally, fonts render with capital letters and lowercase letters. If you sent the font-variant property of an element to small-caps, the lowercase letters will be displayed as slightly smaller capital letters. Verdana text with this property looks like this: The code looks like this:

p {
  font-variant: small-caps;
}

Bold¶

It is really simple to make font bold. The style property that controls boldness of text is font-weight. Available properties are normal, bold, bolder, lighter, and multiples of 100 from 100 to 900. The higher the number, the darker the text. 400 is the same as normal and 700 is the same as bold. More often than not, bold and normal are all you'll need.

p {
  font-weight:bold;
}

Italics¶

You can easily render text in italics. The style property that controls italics is font-style. Available settings are normal, italic, and oblique. (You can read here about oblique text)

p {
  font-style:italic;
}

Color¶

And that brings us to colors. Font color is one of those things that can really draw the user's eye right where you want to go, and while color theory is well outside the scope of this course, interested parties can learn more about it here , here , and here .

But what we need to know is how to set text to a particular color. That's simple!

p {
  color: red;
}

You can use named colors, as with this example, or RGB (short for Red-Green-Blue) color codes, such as:

p {
  color: rgb(155,155,155);
}

RGB values can range from 0-255. So rgb(0,0,0) would yield black and rgb(255,255,255) would yield white. Colors can also be specified using Hexadecimal(hex) values like:

p {
  color: #3176a1;
}

In Hex, the colors are specified with 6 characters prceeded by "#". Each pair represents a value from 0-255 in hexadecimal notation. So #0 represents black and #ffffff represents white. To select red you would use #ff0000.

In the web you will sometimes also encounter 3 digit hex colors. These are used as shorthand when the characters in each pair repeat. For example, #f00 is the same as #ff0000 and both would produce red.

And that's it! That brings us to the end of this topic. I hope you have enjoyed this trip across some of the font and color related styles.

Additional Resources¶

• Font size
• Text decoration property