1. technology and computing
2. programming languages
3. javascript

Copyright © 2010 by Laura Franz
H O W TO C H O O S E A F O N T Does the Font Convey the Right Message? Aesthetics and Emotions
17
www.typographicwebdesign.com
This excerpt (pp 17-24) of
Typographic Web Design may be
shared freely, as long as the
copyright notice remains intact.
Words have dictionary definitions (denotation) and emotional
associations (connotation). Fonts can help communicate both.
Fonts are like clothing. We take them in and process their
underlying meaning constantly — often not noticing them unless
they are either really amazing or really “wrong.” Sometimes the
C HAPTER TWO
“wrongness” is related to legibility (text is too hard to read).
Does the Font Convey the
Right Message?
Aesthetics and Emotions
Other times it’s related to noticing a font is aesthetically or
We hold these truths to be self-evident,
that all men are created equal...
emotionally mismatched to the meaning of the word or text.
How Do I Choose a Font with Appropriate Aesthetic or
Emotional Associations?
We hold these truths to be self-evident, that
all men are created equal...
Much like clothing, the aesthetic and emotional associations
we have with fonts are a social construct. We expect wedding
Comic Sans looks like what it is: an
Comic Sans
invitations to use script fonts, much like we know how to dress
informal font designed to imitate comic
(top)
Aesthetic and emotional associa-
for such an occasion. We also know, on an intuitive level, we
book lettering. It’s not appropriate for
Caslon 540
tions are a social construct.
shouldn’t see the Declaration of Independence or the US
The Declaration of Independence. It
(bottom)
No font can completely and clearly
Constitution in Comic Sans (unless it’s a political statement),
just feels wrong.
communicate the emotional associations
much like we probably won’t ever see the Supreme Court
of a text. Choose a font that feels like it
Justices wearing vintage Hawaiian shirts on the bench.
could work.
Serif fonts feel more traditional, sans
serif feel more modern.
Caslon 540 on the other hand, is an
interpretation of the font (by William
The trick is to remember no font can completely and clearly
Caslon) used to print official copies of
communicate the emotional associations of a text. There is no
The Declaration of Independence on
perfect font to communicate the complexity of marriage or civil
the evening of July 4, 1776.
Caps feel more powerful, reliable and
rights. Don’t go looking for a font with hearts or gavels in it.
enduring. Lowercase letters are less
You’ll only undermine the text by drawing the reader’s attention
formal and feel more friendly.
to odd elements in the letters.
Serif italics feel more humanist, more
Instead, choose a font that feels like it could work—a font that
and other literal connections are not
like cursive.
doesn’t jar us because it is inappropriate or unexpected.
necessary for us to form associations
Remember, the words themselves communicate the message,
between the font and the text.
Fonts play a supportive role to the
author’s words. Fonts should never say,
“look at me! I am ripe with meaning!”
the font plays a supportive role. It does not have to (and should
not try to) say, “look at me! I am ripe with meaning!”
Caslon 540 feels more appropriate,
even though most people can’t identify
it and don’t know its history. Historic
In the end, Caslon 540 is not an
appropriate font either, regardless of
its historical connection to the text.
Legibility aside (smallish x-height,
closed counter in e is too small),
Caslon 540 is not a web-safe font.
Copyright © 2010 by Laura Franz
H O W TO C H O O S E A F O N T Does the Font Convey the Right Message? Aesthetics and Emotions
18
www.typographicwebdesign.com
Why Serif Fonts Feel More Traditional, and Sans Serif Fonts Feel More Modern.
We’ve built emotional associations with serif and sans serif fonts,
influenced by how letters and fonts have been used for hundreds
of years.
Serif lettering has been part of the cultural landscape since at
We hold these truths to be self-evident, that all
men are created equal, that they are endowed
by their Creator with certain unalienable Rights,
that among these are Life, Liberty and the
pursuit of Happiness. That to secure these rights,
Governments are instituted among Men,
deriving their just powers from the consent of
the governed. That whenever any Form of
Government becomes destructive of these ends,
it is the Right of the People to alter or to abolish
least the first century CE via inscriptions, handwritten documents, and fonts (the first successful roman typeface was cut in
1470 by Nicholas Jenson). Sans serif lettering was also used in
early inscriptions (as early as fifth century BCE) but did not have
a presence in hand-written documents. Experimental sans serif
fonts were used in the 1700’s, but the first commercial Latin
printing type to include lowercase sans-serif letters wasn’t in use
The letters on Trajan’s
The Inscription
until 1832.
Column in Rome were
on Trajan’s
originally brushed onto the
Column, built
Thus, sans serif letters took a cultural backseat to serif letters
stone before being chiseled
in 113 BCE.
until the end of WWI. In the 1920’s — after seven years of living
out and repainted. Informal
in a country devastated by war — German designers wanted
it, and to institute new Government, laying its
handwritten documents at
to look forward, not back. They wanted to help society move
the time were done in
foundation on such principles and organizing its
toward a prosperous future. Influenced by industrialization,
cursive, but formal docu-
powers in such form, as to them shall seem most
Modernism lauded clarity over decoration, and function over
ments and manuscripts were
beauty. All decoration was seen as superfluous, including the
written in Latin Book Hand
serifs on letterforms. Traditionalists were accused of living in the
(based on the Roman
past, described as “aping” what had come before.
Square Capitals used in
likely to effect their Safety and Happiness.
For both artistic and economic reasons, Traditionalists and
Modernists each defended their typographic theories, while
Georgia 13/20.
verbally attacking the other camp. In the end, both continued to
Roll over the
find work in the field: traditionalism predominated book design,
text to see it in
while modernism predominated advertising and corporate
Verdana 12/20.
design. We (the bystanders) see traditionalism and modernism
as peacefully coexisting. We have been exposed to both traditional and modernist typography and have built our own associations with serif and sans serif fonts along the party lines.
inscriptions). Serif letters
such as these live in our
collective subconscious. We
think of them as “old” and
“important.”
H O W TO C H O O S E A F O N T Does the Font Convey the Right Message? Aesthetics and Emotions
Copyright © 2010 by Laura Franz
19
www.typographicwebdesign.com
Capital and Lowercase, Roman and Italic, Quirky Fonts
All caps. Roll over
Justice to see it in
lowercase letters.
JUSTICE
JUSTICE
Words set in all caps feel important,
powerful, reliable and enduring. The
letters are bigger, more demanding.
Letters tend to be more square, with
less variation in shapes and fewer
round (softer) forms.
Justice
Justice
words and ideas were worthy of carving
into stone, we begin to associate a
Justice
Justice
word set in all capital letters with power
Serif italics feel more humanist, more
like cursive. Letters often have curved
endings and thick and thin strokes
reminiscent of old pen and ink writing.
Terminals reference where ink may
and importance.
Words set in all lowercase letters are
roman letterforms.
reference letters written by hand.
alphabets did not have lower case
caps. Since only the most important
Justice to see it in
Words set in italic feel humanist — they
In addition, early Roman and Greek
letters, so inscriptions were done in all
Italic. Roll over
have pooled on the paper.
Above left:
Quirky fonts give additional meaning to a word,
Georgia. Roll
and remind us we cannot classify type by serif
Sans serif italics (often called oblique,
less formal and tend to feel more
over Justice to
and sans serif alone. Impact (a sans serif font)
because they are slanted rather than
friendly. More variations in form, more
see it in Courier.
feels very different from Verdana. Its bold
italic in form), lack the organic,
strokes and condensed forms make it feel both
humanist quality of the serif italic.
rounded shapes, and no initial capital
letter give lowercase words a common,
Above right:
conversational feeling.
Verdana. Roll
Connotation isn’t just about fonts.
powerful and constricting.
over Justice to
Courier (a serif font) does not feel traditional at
see it in Impact.
all. It announces to the reader, “Hello, I was
When using less text (a word, a quote,
written on a typewriter.” The presence of the
a heading), it helps to consider how we
imaginary typewriter becomes dominant, and
read meaning into capital and lower-
the reader wonders: is this some sort of potboil-
case letters, roman and italic type.
er justice, doled out by Raymond Chandler’s
Philip Marlowe?
Copyright © 2010 by Laura Franz
H O W TO C H O O S E A F O N T Does the Font Convey the Right Message? Aesthetics and Emotions
www.typographicwebdesign.com
L E SS O N T W O
Word Connotations
1] Choose a word you have an emotional association with.
2] Create an HTML document defining 4 versions of the word,
and a CSS document describing each of the 4 versions of
the word.
Using typetester.org, test your word in various fonts and sizes.
Try to communicate different (even opposite!) connotations for
style to communicate emotional
the word. Experiment with case (capital and lowercase), style
(roman and italic), and size. Take screenshots of your word as
you experiment, jotting down fonts and sizes to document your
associations with words.
2] Build your vocabulary for describing
fonts and defending font choices.
process.
Choose 4 versions of the word to set in HTML and CSS. All 4
3] Build your confidence to communicate emotional associations in a
versions must use web-safe fonts. If you want to work with other
subtle way (no hearts, daggers,
fonts, do more than 4 versions of the word.
blood!), using available resources
(web-safe fonts).
Have at least 2 people look at your finished assignment. Ask
them to describe how they “read” each word (that is, the
4] Take the time to find out how
emotional associations they have with each version of the word).
Working with the word yes, I
Remember, the words themselves communicate the message,
centered four versions of the
the font plays a supportive role. The fonts you choose do not
word in a white space framed
have to (and should not try to) say, “look at me! I am ripe with
by a gray background. Visit the
meaning!”
Typographic Web Design site to
see other explorations.
Write About What You See.
A great way to build your analytical skills when it comes to how
If you are an HTML/CSS begin-
fonts communicate is to carefully notice what you see, and to
ner (or feeling a bit rusty), go
write down your observations. Writing will force you to slow
on to the next section, where I
down, notice the details, and practice your vocabulary.
show you step-by-step how to
build the page above.
For each of the four versions of the word, ask yourself, “How do
size, case, style, and font affect the meaning of this word?” Also
ask yourself, “Have I chosen a font that overshadows the word
itself?” A third question is, “Did other people have the same
emotional associations with the word as I did?”
Objectives
1] Practice using font, size, case, and
readers “read” the solutions.
5] Write your first HTML and CSS
documents with a focus on type.
If you are already HTML/CSS savvy,
feel free to jump right in. If you are
an HTML/CSS beginner (or feeling a
bit rusty), go on to the next page.
20
Copyright © 2010 by Laura Franz
H O W TO C H O O S E A F O N T Does the Font Convey the Right Message? Aesthetics and Emotions
21
www.typographicwebdesign.com
F O R H T M L A N D C SS BE G I N N E R S
Writing your first HTML and CSS files;
naming conventions; organizing files and
folders; introducing common IDs and
elements: <div><h1><h2><h3><h4>
Getting Started
Before starting the lesson, you’ll need a text editor to write
Your homepage should always be called index.html. A
your files. For the lessons in this book, I used TextWrangler.
browser will look for and open up the index.html file in any
The software is free, works across platforms, gives more
folder you send it to.
text editing control than bbedit or notepad, and is not
And finally, name your files and folders something mean-
Lesson Resources
weighed down by a lot of bells and whistles. If you are
ingful. You won’t remember what the heck new_page2.html
Compare your syntax to HTML
working with another program, such as DreamWeaver, you
is tomorrow morning.
and CSS files available on the.
can still do all of the lessons and follow along with my
If your syntax doesn’t work,
notes. Simply work in “code” view.
Organizing Files
HTML files reference other files. They link to images, other
check out the HTML/CSS FAQ
Naming Conventions
HTML documents, PDFs, CSS files, etc. These links only work
troubleshooting section of
A few things you need to know:
if the HTML file knows where to find the other files.
File names need to be consistent, and HTML is case sensi-
For now, we’ll be working in a kind of closed system. Our
the site.
Your word connotation
tive. I always use lowercase letters (no caps), so I know
HTML files will only reference other files on our desktop. It’s
solutions may require CSS
exactly what case I used for each file name.
still important we keep everything organized so links don’t
syntax I don’t cover in this
lesson. My favorite site for
looking up syntax is htmldog.
HTML balks at spaces. If you create a file, folder, or image
get broken.
name with a space in it, any links to that file, folder, or
Start by creating a main folder for all of the lessons you’ll
image may break. I always use an underscore “_” instead
do from this book. Let’s call it web_typography
of a space. Thus, I would name a folder word_connotations
instead of Word Connotations.
In that folder, create a folder for your first lesson. Let’s call
it 2_word_connotations. We’ll include the lesson number, so
To keep file names simple and links working, I recommend
folders stay in numerical order (easier to more complex).
using only letters, numbers, and the underscore character.
This might come in handy later if you want to review HTML
Periods (dots) should only be used with the suffixes (.html,
.css, etc.)
or CSS you wrote in earlier lessons.
If you were creating a web page with images, you’d also
need to make an images folder. But since we aren’t
incorporating any images at this time, we’ll skip that step.
Copyright © 2010 by Laura Franz
H O W TO C H O O S E A F O N T Does the Font Convey the Right Message? Aesthetics and Emotions
22
www.typographicwebdesign.com
F O R H T M L A N D C SS BE G I N N E R S
Start Writing the HTML File
Tags
In your text editor, create a new document and save it as
HTML uses tags to define elements. Tags come in pairs:
index.html in your 2_word_connotations folder.
they open and close.
If this is your first time writing HTML and
Before we put content into the file, we need to type in a
For instance, look at the HTML closely and you’ll see an
CSS, I recommend you follow along with
few things. Type in the text below, making sure not to skip
<html> tag and an </html> tag. The first tag opens the
my example. Periodically, you’ll save your
any characters or spaces. I’ll explain it when you’re done.
definition. The second tag (with the /) closes the definition.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
The <html></html> pair means: everything between these
If your files don’t work, you’ll be able to
“http://www.w3.org/TR/html4/strict.dtd”>
two tags is html.
view my HTML and CSS files online at the
<html>
Typographic Web Design web site. You’ll be
<head>
able to double-check your syntax character
<meta http-equiv=“Content-Type: text/html; charset=utf-8”
by character, and find errors. You can also
/>
use the HTML/CSS FAQ troubleshooting
<title>Title of the document</title>
section of the site.
</head>
Once you’ve worked out the lesson using
<body>
my example, go back and re-do it using
</body>
files and view the web page in a browser.
your own word connotations.
</html>
OK, so what the heck does all that mean?
You’ll also see three other tag pairs (e.g. elements).
<head></head>
<title></title>
<body></body>
An HTML document has both a head and a body. The head
element defines information about the document (what the
title is, the link to the CSS file, meta data, scripts, etc.).
The body element contains the content.
The last pair of tags is the <title> element. The tag pair
<title></title> lives in the head element, so the tags
always go between the <head></head> tags.
The first lines
If DTD and validation make
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
your head swim, don’t worry
“http://www.w3.org/TR/html4/strict.dtd”>
about it. Just put that line at
the start of your HTML files
and you’ll be fine.
Allows your HTML to be validated against a Document Type
Definition (DTD). The DTD you’ve typed in is HTML 4.01
Strict DTD. Your HTML will only be valid if you’ve used
accepted elements and attributes, and if you have not used
There is also some meta data in the head element (right
before the title element). This meta data defines the
character encoding. The character encoding tells the Web
browser what set of characters (e.g. letters, numbers, etc.)
to use when converting the bits to characters. You don’t
need to understand how it works... just know that html 4.0
requires this line in the file, and it should live in the head
framesets.
element. Notice how the meta data closes with “/>”.
Since I’m not going to show you any deprecated (e.g., no
View your web page
longer acceptable) elements or attributes, and we are not
going to use framesets, this is the correct DTD to use.
Take a moment to save your document.
Drag the document (icon) into a browser.
Copyright © 2010 by Laura Franz
H O W TO C H O O S E A F O N T Does the Font Convey the Right Message? Aesthetics and Emotions
23
www.typographicwebdesign.com
F O R H T M L A N D C SS BE G I N N E R S
What do you see?
Add line breaks
A blank screen, with “Title of the document” at the top of
Usually, you’d use the paragraph element <p></p> to
the browser window. Perfect!
define paragraphs and break the lines. But since we aren’t
Let’s start putting in some content.
First, give the page a title
Between the title tags, change “Title of the document” to
“Lesson 2: Word Connotations”
Next, add the content
Between the body tags, add your word four times. It will
look something like this
<body>
yes
yes
yes
FIGURE 1: Headline elements
yes
(h1-h6) have default values.
</body>
You need to describe elements
differently in CSS if you don’t
View your web page
want items to be displayed
Save your HTML document, and either drag the icon back
using default settings.
into your browser, or (if your browser is still open) hit the
really using whole paragraphs of text here, and I want you
to set each of the four words differently, I’m going to have
you use a variety of heading elements to define each word.
Define your headings
Put the following tag pairs into your HTML, using one pair
around each word
<body>
<h1>yes</h1>
<h2>yes</h2>
<h3>yes</h3>
<h4>yes</h4>
</body>
View your web page
Save your HTML document and view the changes.
You should see your word in a column along the left edge.
The words are bold, and get smaller as they go down [1].
refresh button. You’ll see the changes.
Why does each word look a little different? The heading
Now your web page has a meaningful title at the top of the
display the headings — unless you describe the elements
browser window. And it has your word written four times.
Unfortunately, the word runs across a single line, like this:
yes yes yes yes.
Why? Browsers translate the HTML. Your browser will only
show what you’ve given it. You haven’t told the browser
where to put in line breaks, so it didn’t do it.
elements (h1-h6) have default values the browsers use to
differently. That is exactly what we are going to do.
Start Writing the CSS File
The CSS document is where you describe how elements
defined in HTML should look. For this assignment, you are
going to tell the browsers what the h1, h2, h3, and h4
elements should look like.
In TextWrangler, create a new document and save it as
word_connotations.css in your 2_word_connotations folder.
Copyright © 2010 by Laura Franz
H O W TO C H O O S E A F O N T Does the Font Convey the Right Message? Aesthetics and Emotions
24
www.typographicwebdesign.com
F O R H T M L A N D C SS BE G I N N E R S
YES
yes
YES
yes
Four versions of the word
“yes.” (Impact, Georgia italic,
Georgia, Verdana)
How to describe an element
Describe the first element: h1
CSS descriptions are made of three parts:
For this example, I am using the word, “yes.” I want
1] the selector (the element/ID you want to describe)
my top version of yes to be 48/48 Georgia italic, regular
2] the property (the attribute you want to affect)
weight, centered on the screen. I’ll write the syntax
3] the value (the value you want to assign to the property)
Written together, they look like this
selector{property:value}
So, if you want to set your h1 in Georgia, you would write it
like this
h1{font-family:georgia}
If you want to set your h1 in 24px Georgia, you would write
it like this
h1{font-family:georgia;font-size:24px}
Notice the two properties (font-family and font-size) are
separated by a semi-colon. Also notice there are no spaces
anywhere in the syntax. If you ever need to type in a value
font-family:georgia;
font-style:italic;
font-weight:normal;
font-size:48px;
line-height:48px;
text-align:center;
}
Try typing in the CSS syntax above.
Now save the CSS file.
And let’s look at the web page in the browser again.
Wait! Nothing changed! What went wrong?
with two words (e.g. sans serif), put that value in quotation
Tell the HTML file to reference the CSS file.
marks. (e.g. font-family:”sans serif”).
The browser doesn’t know to use the CSS file. You need to
If you want to set your h1 in 24/32 Georgia, and remove
Spaces are not necessary and
the bold (default) setting associated with the h1 element,
not recommended. Some web
your syntax is going to get longer. To make the CSS easier
authoring software (e.g.
to read, it’s customary to put one property:value pair on
DreamWeaver) add spaces into
each line, separated with a semi-colon, like this
the syntax automatically. You
like this
h1{
h1{
tell it to do so. Add the following line in the head element
(e.g., between the <head></head> tags) of the HTML file:
<link href=”word_connotations.css” rel=”stylesheet”
type=”text/css” />
You’ll put this syntax in the head element of any HTML file
that references a CSS file. Notice we are telling the HTML
can leave them in if they don’t
font-family:georgia;
file to reference “word_connotations.css” which is the CSS
cause problems.
font-weight:normal;
file you just created. This file name is a variable. Use the
font-size:24px;
correct name of the CSS file for each project.
line-height:32px;
}
Save the html file. Reload the file in the browser window.
It worked!
Copyright © 2010 by Laura Franz
H O W TO C H O O S E A F O N T Does the Font Convey the Right Message? Aesthetics and Emotions
25
www.typographicwebdesign.com
F O R H T M L A N D C SS BE G I N N E R S
Describe the second element: h2
h4{
I want my second version of yes to be 60/60 Georgia,
font-family:verdana;
regular weight, all caps, 5 pixels of letterspacing, and
font-weight:normal;
centered on the screen. I’ll write the syntax like this
font-size:24px;
h2{
line-height:24px;
font-family:georgia;
text-align:center;
font-weight:normal;
}
font-size:60px;
line-height:60px;
text-transform:uppercase;
letter-spacing:5px;
text-align:center;
}
Type in the CSS syntax above. Save the CSS file, and view
the web page in the browser again.
Describe the third element: h3
I want my third version of yes to be 120/120 Impact,
FIGURE 2: Headings (h1-h4)
regular weight, all caps, and centered on the screen. I’ll
after we’ve described them in
write the syntax like this
CSS. Notice the white spaces
h3{
between each word. These are
font-family:impact;
caused by default margins in
font-weight:normal;
the elements. Leave them for
font-size:120px;
now, we’ll set margins in the
line-height:120px;
next lesson.
text-transform:uppercase;
text-align:center;
}
Author’s Note
You might need to use other
properties to describe your
Type in the CSS syntax above. Save the CSS file, and view
words. htmldog and Cultured
the web page in the browser again.
Code have typographer-friendly resources for finding and
setting properties and values.
Type in the CSS syntax above. Save the CSS file, and view
the web page in the browser again.
We’ve described all four elements. Looks good, except the
words have unexpected white spaces between them [2]
caused by default margins in the h1-h6 elements. We are
going to leave these margins alone for now (I’ll cover them
in the next lesson), and move on to creating a “div.”
Creating a “div”
DIV is short for DIVision.
Think of a <div></div> as a container (or layout box) you
can use to create structure in your web page.
It basically looks like this:
border of div
margin
padding
content
Describe the fourth element: h4
I want my fourth version of yes to be 24/24 Verdana,
regular weight, and centered on the screen. I’ll write the
syntax like this
Your div will take up the entire space,
even if the content or bordered area looks smaller.
Copyright © 2010 by Laura Franz
H O W TO C H O O S E A F O N T Does the Font Convey the Right Message? Aesthetics and Emotions
26
www.typographicwebdesign.com
F O R H T M L A N D C SS BE G I N N E R S
We’ll become more acquainted with margins, padding and
margin-left:auto;
borders later, but for right now, let’s add and describe a
background-color:#ffffff;
simple div.
}
Add a div in your html
The div ID selector looks different from the h1 selectors.
We want the four words to live inside the div, so add the div
That’s because we’re dealing with an ID. We are describing
tags around your content. Type the following syntax inside
a specific ID applied to a div, so we create and describe the
your body element, and before your h1 element:
ID #main_container, not div. To create and describe an ID
<div id=“main_container”>
in CSS, you must proceed the name with a hashmark (#).
Notice we didn’t just type in <div>. Why?
There are also some new properties in this syntax.
Most web pages contain more than one div to structure the
content (just like most magazines have more than one
column of text). Unlike headlines where you have 6 (h1-h6)
different tags to work with, you only have one div tag to
use. This means you need to identify (ID) which div you
want to use when you add a div to your html.
We still have to close the div.
FIGURE 3: We set the left and
right margins to auto. This
After your h4 element, still inside your body element, type:
</div>
We’ve set the size of the container to 400px wide, and put
a solid, 1px border around it.
We’ve also set the margins of the main_container. The
margin is the space between the container and elements
next to it. The only element next to our main_container is
the browser window. We’ve put 20px between the top edge
of the main_container and the browser window. We’ve put
0px between the bottom edge of the main_container and
the browser window. Most importantly, we’ve told the
keeps the main_container
Describe the div ID
browser to automatically calculate the amount of margin to
centered in the browser.
If you were to save and view your index.html file in the
put between the sides of the main_container and the
browser, you wouldn’t see any changes. Why? You haven’t
browser window.
described the div ID in CSS.
I want my main_container div to be a white rectangle
(400px wide) with a black border (1px), centered in the
browser. I’ll write the syntax like this:
#main_container{
width:400px;
border-width:1px;
border-style:solid;
margin-top:20px;
margin-right:auto;
margin-bottom:0px;
This keeps the main_container centered left to right,
regardless of the width of the browser window [3].
Finally, we made the main_container background color
white. CSS uses hexadecimal color codes to represent RGB
colors. #ffffff means white. There are plenty of color charts
available online. Two of my favorites are The Hues Hub,
and Color Schemer 2. We’ll use color later.
We are almost done. Let’s add the gray background.
Copyright © 2010 by Laura Franz
H O W TO C H O O S E A F O N T Does the Font Convey the Right Message? Aesthetics and Emotions
www.typographicwebdesign.com
F O R H T M L A N D C SS BE G I N N E R S
Add a Background Color to the Page
Once you learn syntax for a property, it will work across
selectors.
For example, we just gave main_container a white
background by adding a line to the syntax describing the
#main_container:
background-color:#ffffff
To add a background color to the page, we will use the
same property syntax, but apply it to the body element.
In the CSS file, type in:
body{
background-color:#999999
}
Save the CSS file, and view the web page in the browser
again. It should look like the thumbnail at left [4].
FIGURE 4: We used the
You have now created and described four heading elements,
background-color syntax to
described the body element, and created and described an
change the background color
ID for a div.
of the body (the whole page)
to gray.
Congratulations!
Now go back and re-do the lesson using your own word
connotations. If you need to use syntax for a property I
haven’t covered, both htmldog and Cultured Code have
typographer-friendly resources for finding and setting
properties and values.
In the next lesson, we’ll work with more text.
27