Transcript

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: