Web Colors and Fonts

Web Colors Using CSS

Thus far, we have set our text and background colors using actual color names, such as:

.example { background-color: gray; color: red;}

Let's see now how we can create our own precise colors, with the number of possible shades running into the millions.

In CSS 2.1, there are just 17 color names available. CSS3 expanded this number to 140, but even this amount of variety is insufficient to build a custom website.

RGB Colors

To build custom colors, we mix specified amounts of the additive primary colors of red, green, and blue (often abbreviated as RGB).

There are 256 available shades for each of red, green, and blue.

That creates 256 X 256 X 256 = 16.7 million possible combinations!

RGB Hex Codes

We specify the mixtures of red, green, and blue by using what is known as a Hex code:

#12AF30

How much RED? How much GREEN? How much BLUE?

A Hex code is always preceded by the pound sign (#) and always lists the colors in the order of red, then green, then blue.

Understanding Hex CodesFor those who have never seen the hex (hexadecimal) format before, it can be confusing at first. In reality, it's fairly straightforward:

0123456789

0123456789ABCDEF

Base 10 (Decimal System): Base 16 (Hexadecimal System):

Lowest Possible Digit

Highest Possible Digit

It's often helpful for newcomers to hexadecimal to translate the letters in their mind to Base 10 numbers. So A=10, B=11, C=12, D=13, E=14, and F=15.

Two Character Hex CodesFor each color (red, green, blue), we have two hexadecimal characters (digits) to set a value. The first character represents how many 16s are in the number and the second character represents how many 1s:

00010A0F101F2A7DAAF1FF

0110 (zero 16s and ten 1s)15 (zero 16s and fifteen 1s)16 (one 16 and zero 1s)31 (one 16 and fifteen 1s)42 (two 16s and ten 1s)125 (seven 16s and thirteen 1s)170 (ten 16s and ten 1s)241 (fifteen 16s and one 1)255 (fifteen 16s and fifteen 1s)

Hexadecimal: Decimal:

This two-character hexadecimal format allows for 16 X 16 = 256 possibilities, ranging from the lowest value of 00 to the highest value of FF.

If we set the value of red to be 00, it would contribute no red at all. If we set it to be FF, it would contribute the maximum possible amount of red to the resulting color.

Example Hex CodesIf hexadecimal is still a bit confusing, don't worry. When we start using real-life examples, it will begin to make more sense. Here are the actual hex codes for the 17 standard colors in CSS 2.1:

As we study these hex codes, we can begin to see the logic of mixing lower and higher amounts of red, green, and blue to result in the given color.

Hex codes can use uppercase or lowercase letters A through F, or even a mix between the two. As uppercase letters are more commonly used, we'll standardize on them in this course.

Finding Hex Codes

Many applications and websites offer tools to help us find and select color codes. Colorpicker.com is a free website and very simple to use:

Slide the arrows up and down to browse the color spectrum.

Click on any spot in the color picker area to produce the hex code for that specific shade.

Hex code displays here, ready to be copied and pasted.

Using Hex Codes in CSSLet's use the Hex code we just generated from the color picker website and set it as the background color for a <div> element. We'll set a different, contrasting color for the text:

Remember to start the Hex code with the pound sign. If this is omitted, CSS will completely ignore the color declaration.

<style type="text/css"> .example { background-color: #365D75; color: #D08EB4; width: 250px; height: 200px; }</style>...<div class="example"> <h2>Sample background and

text colors.</h2></div>

Choosing Fonts

How text looks on our web pages is a major component of the overall appearance of our site. We need to choose our text fonts carefully, keeping in mind the following:

Only those fonts that are installed on our viewers' computers will display properly on our web pages.

For this reason, we are limited to a handful of so-called "web safe fonts", i.e. those fonts that are installed on nearly all computers.

Whichever font we choose as primary, we should provide one or more "backup" fonts for the browser to use in case the main one is not available.

Before we begin to set fonts and their backups, let's go over the list of web-safe fonts available to us and how each one looks.

Web Safe FontsFonts are divided into two major groups: serif and sans-serif. Here are the traditional fonts that we may use safely, since more than 99% of web visitors will have them installed on their computers:

Sans-serif fonts:

Arial

Arial Black

Century Gothic

Comic Sans MS

Lucida Sans Unicode

Tahoma

Trebuchet MS

Verdana

Serif fonts:

Book Antiqua

Courier New

Georgia

Palatino Linotype

Times New Roman

What is a Serif?

Look at the capital 'S' in the title above. It is written in Arial, a sans-serif

font.

Serif fonts:

Book Antiqua

Courier New

Georgia

Palatino Linotype

Times New Roman

A serif is the extra flourish at the ends of letters. Serifs are intended to enhance readability, especially in physical print media, such as newspapers and magazines.

s

A "sans-serif" font is one that does not contain serifs on its characters. These fonts are generally preferred for web pages, as they are slightly easier to read on a computer screen.

Setting Fonts and FallbacksWe are already familiar with the font-family property in CSS. Until now, we simply designated a single font:

.example { font-family: Tahoma;}

A better approach is to set our preferred font but also provide a second (fallback) font, and a third (final fallback) font, like this:

.example { font-family: Tahoma, Arial, sans-serif;}

This CSS declaration informs the web browser: "Display the text in Tahoma font. If Tahoma is not available, use Arial. If neither Tahoma nor Arial is available, use a generic sans-serif font.

Additional fallback fonts may be listed, if desired. Two named fonts and the generic fallback should be considered the minimum.

CSS Font Syntax

If the named font contains a space, we must enclose it in quotation marks:

.example { font-family: "Palatino Linotype", "Book Antiqua", serif;}

We should choose similar fonts as fallbacks, so our page will appear quite close to our original intention, even if the primary font is unavailable.

Always list either serif or sans-serif as the final entry in your list. It will be the "ultimate" fallback font, as all browsers have these generic fonts available to use.

This is Palatino Linotype.

This is Book Antiqua.

Font StrategiesWhen choosing fonts for your own web pages:

Experiment using various fonts and sizes on your pages until you find those that match the "look and feel" for which you're aiming.

Visit websites in which you find the text visually appealing. View the page source to see which fonts they are using.

The Comic Sans MS font is fun and lighthearted but not appropriate for a professional website.

It's OK to name a relatively exotic font in your font-family declaration, as long as you have a web safe fallback font that renders acceptably on the page.

As a general web design rule, avoid using more than two different fonts on a single web page.

For limited use of unusual fonts - such as in logos, headers, and navigation bars - many web designers create images containing the text and place those images on the page instead, avoiding the web safe font issue altogether.

Custom Web FontsThe CSS we are learning in this course is version 2.1. A newer version called CSS3 is under active development and one of its features is the font-face property. This property enables us to use any of hundreds of free fonts on the internet:

The most recent versions of all major browsers now support CSS3 and its ability to load custom fonts directly from the web, no longer relying on fonts being installed on the local computer. For web designers, the era of being limited to web safe fonts is nearly over.

Though it's important to know about custom web fonts, we will be sticking with the standard set of web safe fonts in this course.