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;
}
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.
Let's see now how we can create our own precise colors, with the number of
possible shades running into the millions.
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 Codes
For those who have never seen the hex (hexadecimal) format before, it
can be confusing at first. In reality, it's fairly straightforward:
Base 10 (Decimal System):
0
1
2
3
4
5
6
7
8
9
Base 16 (Hexadecimal System):
Lowest Possible Digit
Highest Possible Digit
0
1
2
3
4
5
6
7
8
9
A
B
C
D
E
F
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 Codes
For 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:
Hexadecimal:
00
01
0A
0F
10
1F
2A
7D
AA
F1
FF
Decimal:
0
1
10 (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)
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 Codes
If 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:
Hex code displays
here, ready to be
copied and pasted.
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.
Using Hex Codes in CSS
Let'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:
<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>
Remember to start the Hex code with the pound sign. If this is omitted, CSS will
completely ignore the color declaration.
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 websafe fonts available to us and how each one looks.
Web Safe Fonts
Fonts 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:
Serif fonts:
Arial
Book Antiqua
Arial Black
Courier New
Century Gothic
Georgia
Comic Sans MS
Palatino Linotype
Lucida Sans Unicode
Times New Roman
Tahoma
Trebuchet MS
Verdana
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
s
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.
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 Fallbacks
We 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;
}
This is Palatino Linotype.
This is Book Antiqua.
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.
Font Strategies
When 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 Fonts
The 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.