Copyright 2010 by Laura Franz www.typographicwebdesign.

.com This excerpt (pp 17-24) of Typographic Web Design may be shared freely, as long as the copyright notice remains intact.

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

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 constantlyoften 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). Other times its related to noticing a font is aesthetically or emotionally mismatched to the meaning of the word or text.

Does the Font Convey the Right Message? Aesthetics and Emotions
Aesthetic and emotional associations are a social construct. No font can completely and clearly communicate the emotional associations of a text. Choose a font that feels like it could work. Serif fonts feel more traditional, sans serif feel more modern. Caps feel more powerful, reliable and enduring. Lowercase letters are less formal and feel more friendly. Serif italics feel more humanist, more like cursive. Fonts play a supportive role to the authors words. Fonts should never say, look at me! I am ripe with meaning!

We hold these truths to be self-evident, that all men are created equal...

How Do I Choose a Font with Appropriate Aesthetic or Emotional Associations?

Much like clothing, the aesthetic and emotional associations we have with fonts are a social construct. We expect wedding invitations to use script fonts, much like we know how to dress for such an occasion. We also know, on an intuitive level, we shouldnt see the Declaration of Independence or the US Constitution in Comic Sans (unless its a political statement), much like we probably wont ever see the Supreme Court Justices wearing vintage Hawaiian shirts on the bench. The trick is to remember no font can completely and clearly communicate the emotional associations of a text. There is no perfect font to communicate the complexity of marriage or civil rights. Dont go looking for a font with hearts or gavels in it. Youll only undermine the text by drawing the readers attention to odd elements in the letters. Instead, choose a font that feels like it could worka font that doesnt jar us because it is inappropriate or unexpected. Remember, the words themselves communicate the message, 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!

We hold these truths to be self-evident, that all men are created equal...

Comic Sans looks like what it is: an informal font designed to imitate comic book lettering. Its not appropriate for The Declaration of Independence. It just feels wrong. Caslon 540 on the other hand, is an interpretation of the font (by William Caslon) used to print official copies of The Declaration of Independence on the evening of July 4, 1776. Caslon 540 feels more appropriate, even though most people cant identify it and dont know its history. Historic and other literal connections are not necessary for us to form associations between the font and the text. 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.

Comic Sans (top) Caslon 540 (bottom)

Copyright 2010 by Laura Franz www.typographicwebdesign.com

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

Why Serif Fonts Feel More Traditional, and Sans Serif Fonts Feel More Modern.
Weve 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 it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.

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 1700s, but the first commercial Latin printing type to include lowercase sans-serif letters wasnt in use until 1832. Thus, sans serif letters took a cultural backseat to serif letters until the end of WWI. In the 1920safter seven years of living in a country devastated by warGerman designers wanted to look forward, not back. They wanted to help society move toward a prosperous future. Influenced by industrialization, Modernism lauded clarity over decoration, and function over beauty. All decoration was seen as superfluous, including the serifs on letterforms. Traditionalists were accused of living in the past, described as aping what had come before. For both artistic and economic reasons, Traditionalists and Modernists each defended their typographic theories, while The letters on Trajans Column in Rome were originally brushed onto the stone before being chiseled out and repainted. Informal handwritten documents at the time were done in cursive, but formal documents and manuscripts were written in Latin Book Hand (based on the Roman Square Capitals used in inscriptions). Serif letters such as these live in our collective subconscious. We think of them as old and important.
The Inscription on Trajans Column, built in 113 BCE.

Georgia 13/20. Roll over the text to see it in Verdana 12/20.

verbally attacking the other camp. In the end, both continued to find work in the field: traditionalism predominated book design, while modernism predominated advertising and corporate 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.

Copyright 2010 by Laura Franz www.typographicwebdesign.com

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

19

Capital and Lowercase, Roman and Italic, Quirky Fonts

All caps. Roll over Justice to see it in lowercase letters.

JUSTICE
Justice
Justice
Above left: Georgia. Roll over Justice to see it in Courier. Above right: Verdana. Roll over Justice to

JUSTICE Justice
Justice
Italic. Roll over Justice to see it in roman letterforms.

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. In addition, early Roman and Greek alphabets did not have lower case letters, so inscriptions were done in all caps. Since only the most important words and ideas were worthy of carving into stone, we begin to associate a word set in all capital letters with power and importance. Quirky fonts give additional meaning to a word, and remind us we cannot classify type by serif and sans serif alone. Impact (a sans serif font) feels very different from Verdana. Its bold strokes and condensed forms make it feel both powerful and constricting. Courier (a serif font) does not feel traditional at all. It announces to the reader, Hello, I was written on a typewriter. The presence of the imaginary typewriter becomes dominant, and the reader wonders: is this some sort of potboiler justice, doled out by Raymond Chandlers Philip Marlowe? Sans serif italics (often called oblique, because they are slanted rather than italic in form), lack the organic, humanist quality of the serif italic. Words set in all lowercase letters are less formal and tend to feel more friendly. More variations in form, more rounded shapes, and no initial capital letter give lowercase words a common, conversational feeling. Connotation isnt just about fonts. When using less text (a word, a quote, a heading), it helps to consider how we read meaning into capital and lowercase letters, roman and italic type.

Words set in italic feel humanistthey reference letters written by hand. 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 have pooled on the paper.

see it in Impact.

Copyright 2010 by Laura Franz www.typographicwebdesign.com

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

20

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 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 process. Choose 4 versions of the word to set in HTML and CSS. All 4 versions must use web-safe fonts. If you want to work with other fonts, do more than 4 versions of the word. Have at least 2 people look at your finished assignment. Ask them to describe how they read each word (that is, the emotional associations they have with each version of the word).
Working with the word yes, I centered four versions of the word in a white space framed by a gray background. Visit the Typographic Web Design site to see other explorations. If you are an HTML/CSS beginner (or feeling a bit rusty), go on to the next section, where I show you step-by-step how to build the page above.

Objectives
style to communicate emotional associations with words.

1] Practice using font, size, case, and

2] Build your vocabulary for describing fonts and defending font choices. 3] Build your confidence to communicate emotional associations in a subtle way (no hearts, daggers, blood!), using available resources (web-safe fonts). 4] Take the time to find out how 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.

Remember, the words themselves communicate the message, the font plays a supportive role. The fonts you choose do not have to (and should not try to) say, look at me! I am ripe with meaning!

Write About What You See.

A great way to build your analytical skills when it comes to how fonts communicate is to carefully notice what you see, and to write down your observations. Writing will force you to slow down, notice the details, and practice your vocabulary. 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?

Copyright 2010 by Laura Franz www.typographicwebdesign.com

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

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, youll need a text editor to write your files. For the lessons in this book, I used TextWrangler. The software is free, works across platforms, gives more text editing control than bbedit or notepad, and is not
Lesson Resources Compare your syntax to HTML and CSS files available on the. If your syntax doesnt work, check out the HTML/CSS FAQ troubleshooting section of the site. Your word connotation solutions may require CSS syntax I dont cover in this lesson. My favorite site for looking up syntax is htmldog.

Your homepage should always be called index.html. A browser will look for and open up the index.html file in any folder you send it to. And finally, name your files and folders something meaningful. You wont remember what the heck new_page2.html is tomorrow morning.

weighed down by a lot of bells and whistles. If you are working with another program, such as DreamWeaver, you can still do all of the lessons and follow along with my notes. Simply work in code view.

Organizing Files
HTML files reference other files. They link to images, other HTML documents, PDFs, CSS files, etc. These links only work

Naming Conventions
A few things you need to know: File names need to be consistent, and HTML is case sensitive. I always use lowercase letters (no caps), so I know exactly what case I used for each file name.
HTML balks at spaces. If you create a file, folder, or image

if the HTML file knows where to find the other files. For now, well be working in a kind of closed system. Our
HTML files will only reference other files on our desktop. Its

still important we keep everything organized so links dont get broken. Start by creating a main folder for all of the lessons youll do from this book. Lets call it web_typography In that folder, create a folder for your first lesson. Lets call it 2_word_connotations. Well include the lesson number, so folders stay in numerical order (easier to more complex). This might come in handy later if you want to review HTML or CSS you wrote in earlier lessons. If you were creating a web page with images, youd also need to make an images folder. But since we arent incorporating any images at this time, well skip that step.

name with a space in it, any links to that file, folder, or image may break. I always use an underscore _ instead of a space. Thus, I would name a folder word_connotations instead of Word Connotations. To keep file names simple and links working, I recommend using only letters, numbers, and the underscore character. Periods (dots) should only be used with the suffixes (.html, .css, etc.)

Copyright 2010 by Laura Franz www.typographicwebdesign.com

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

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

In your text editor, create a new document and save it as index.html in your 2_word_connotations folder.
If this is your first time writing HTML and CSS, I recommend you follow along with my example. Periodically, youll save your files and view the web page in a browser. If your files dont work, youll be able to view my HTML and CSS files online at the Typographic Web Design web site. Youll be able to double-check your syntax character by character, and find errors. You can also
use the HTML/CSS FAQ troubleshooting section of the site.

Tags HTML uses tags to define elements. Tags come in pairs:

they open and close. For instance, look at the HTML closely and youll see an <html> tag and an </html> tag. The first tag opens the definition. The second tag (with the /) closes the definition. The <html></html> pair means: everything between these two tags is html. Youll 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.

Before we put content into the file, we need to type in a few things. Type in the text below, making sure not to skip any characters or spaces. Ill explain it when youre done. <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html> <head> <meta http-equiv=Content-Type: text/html; charset=utf-8 /> <title>Title of the document</title> </head> <body> </body> </html> OK, so what the heck does all that mean?
The first lines

Once youve worked out the lesson using my example, go back and re-do it using your own word connotations.

If DTD and validation make your head swim, dont worry about it. Just put that line at the start of your HTML files and youll be fine.

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> Allows your HTML to be validated against a Document Type Definition (DTD). The DTD youve typed in is HTML 4.01 Strict DTD. Your HTML will only be valid if youve used accepted elements and attributes, and if you have not used framesets. Since Im not going to show you any deprecated (e.g., no longer acceptable) elements or attributes, and we are not going to use framesets, this is the correct DTD to use.

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 dont 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 element. Notice how the meta data closes with />.
View your web page

Take a moment to save your document. Drag the document (icon) into a browser.

Copyright 2010 by Laura Franz www.typographicwebdesign.com

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

F O R H T M L A N D C SS BE G I N N E R S

What do you see? A blank screen, with Title of the document at the top of the browser window. Perfect! Lets start putting in some content.
First, give the page a title

Add line breaks

Usually, youd use the paragraph element <p></p> to define paragraphs and break the lines. But since we arent really using whole paragraphs of text here, and I want you to set each of the four words differently, Im going to have you use a variety of heading elements to define each word.
Define your headings

Between the title tags, change Title of the document to Lesson 2: Word Connotations
Next, add the content

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

Between the body tags, add your word four times. It will look something like this <body> yes yes yes
FIGURE 1: Headline elements (h1-h6) have default values. You need to describe elements differently in CSS if you dont want items to be displayed using default settings. View your web page

yes </body>

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]. Why does each word look a little different? The heading elements (h1-h6) have default values the browsers use to display the headingsunless you describe the elements differently. That is exactly what we are going to do.

Save your HTML document, and either drag the icon back into your browser, or (if your browser is still open) hit the refresh button. Youll see the changes. Now your web page has a meaningful title at the top of the 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 youve given it. You havent told the browser where to put in line breaks, so it didnt do it.

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 www.typographicwebdesign.com

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

F O R H T M L A N D C SS BE G I N N E R S

yes

YES
YES
yes
Georgia, Verdana) Four versions of the word yes. (Impact, Georgia italic, Spaces are not necessary and not recommended. Some web authoring software (e.g. DreamWeaver) add spaces into the syntax automatically. You can leave them in if they dont cause problems.

How to describe an element CSS descriptions are made of three parts:

Describe the first element: h1

For this example, I am using the word, yes. I want my top version of yes to be 48/48 Georgia italic, regular weight, centered on the screen. Ill write the syntax like this h1{ font-family:georgia; font-style:italic; font-weight:normal; font-size:48px; line-height:48px; text-align:center; }

1] the selector (the element/ID you want to describe) 2] the property (the attribute you want to affect) 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 with two words (e.g. sans serif), put that value in quotation marks. (e.g. font-family:sans serif). If you want to set your h1 in 24/32 Georgia, and remove the bold (default) setting associated with the h1 element, your syntax is going to get longer. To make the CSS easier to read, its customary to put one property:value pair on each line, separated with a semi-colon, like this h1{ font-family:georgia; font-weight:normal; font-size:24px; line-height:32px; }

Try typing in the CSS syntax above. Now save the CSS file. And lets look at the web page in the browser again. Wait! Nothing changed! What went wrong?
Tell the HTML file to reference the CSS file.

The browser doesnt know to use the CSS file. You need to 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 /> Youll put this syntax in the head element of any HTML file that references a CSS file. Notice we are telling the HTML file to reference word_connotations.css which is the CSS file you just created. This file name is a variable. Use the correct name of the CSS file for each project. Save the html file. Reload the file in the browser window. It worked!

Copyright 2010 by Laura Franz www.typographicwebdesign.com

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

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{ font-family:verdana; font-weight:normal; font-size:24px; line-height:24px; text-align:center; }

I want my second version of yes to be 60/60 Georgia, regular weight, all caps, 5 pixels of letterspacing, and centered on the screen. Ill write the syntax like this h2{ font-family:georgia; 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. Weve 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 (Ill cover them in the next lesson), and move on to creating a div.

Type in the CSS syntax above. Save the CSS file, and view the web page in the browser again.
Describe the third element: h3

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

I want my third version of yes to be 120/120 Impact,

FIGURE 2: Headings (h1-h4) after weve described them in CSS. Notice the white spaces between each word. These are caused by default margins in the elements. Leave them for now, well set margins in the next lesson. Authors Note You might need to use other properties to describe your words. htmldog and Cultured Code have typographer-friendly resources for finding and setting properties and values.

regular weight, all caps, and centered on the screen. Ill write the syntax like this h3{ font-family:impact; font-weight:normal; font-size:120px; line-height:120px; text-transform:uppercase; text-align:center; }

content

Type in the CSS syntax above. Save the CSS file, and view the web page in the browser again.
Describe the fourth element: h4

I want my fourth version of yes to be 24/24 Verdana, regular weight, and centered on the screen. Ill 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 www.typographicwebdesign.com

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

F O R H T M L A N D C SS BE G I N N E R S

Well become more acquainted with margins, padding and borders later, but for right now, lets add and describe a simple div.
Add a div in your html

margin-left:auto; background-color:#ffffff;

The div ID selector looks different from the h1 selectors. Thats because were dealing with an ID. We are describing a specific ID applied to a div, so we create and describe the ID #main_container, not div. To create and describe an ID in CSS, you must proceed the name with a hashmark (#). There are also some new properties in this syntax. Weve set the size of the container to 400px wide, and put a solid, 1px border around it. Weve 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. Weve put 20px between the top edge of the main_container and the browser window. Weve put 0px between the bottom edge of the main_container and the browser window. Most importantly, weve told the browser to automatically calculate the amount of margin to put between the sides of the main_container and the browser window. 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. Well use color later. We are almost done. Lets add the gray background.

We want the four words to live inside the div, so add the div tags around your content. Type the following syntax inside your body element, and before your h1 element: <div id=main_container> Notice we didnt just type in <div>. Why? 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 keeps the main_container centered in the browser.

After your h4 element, still inside your body element, type: </div>

Describe the div ID

If you were to save and view your index.html file in the browser, you wouldnt see any changes. Why? You havent 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. Ill write the syntax like this: #main_container{ width:400px; border-width:1px; border-style:solid; margin-top:20px; margin-right:auto; margin-bottom:0px;

Copyright 2010 by Laura Franz www.typographicwebdesign.com

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

27

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 background-color syntax to change the background color of the body (the whole page) to gray.

You have now created and described four heading elements, described the body element, and created and described an ID for a div. Congratulations! Now go back and re-do the lesson using your own word connotations. If you need to use syntax for a property I havent covered, both htmldog and Cultured Code have typographer-friendly resources for finding and setting properties and values. In the next lesson, well work with more text.