Fonts SLIDE 2 Typography “TYPOGRAPHY is the balance and interplay of letterforms on the page, a verbal and visual equation that helps the reader understand the form and absorb the substance of the page content. Typography plays a dual role as both verbal and visual communication. As readers scan a page they are subconsciously aware of both functions: first they survey the overall graphic patterns of the page, then they parse the language, or read. Good typography establishes a visual hierarchy for rendering prose on the page by providing visual punctuation and graphic accents that help readers understand relations between prose and pictures, headlines and subordinate blocks of text.” http://www.webstyleguide.com/type/ SLIDE 3-5 Readability How we really read… we scan word shapes USING ALL CAPS MAKES READING HARDER SLIDE 9-11 Point Size The point system is how type is measured, with 72 points per inch. Point-size is the height of the stamp, the space which contains the individual letters. The baseline is the line on which the letters sit, much like the rules used for handwriting on notebook paper. X-height is the height of the lowercase “x” in the font, generally the height of lowercase letters excluding ascenders and descenders. An ascender is any part of a letter that extends above the body height, usually the strokes that extend above the x-height in lowercase characters. A descender is any part of a letter that extends below the baseline. SLIDE 13-14 Serifs The body is the major lines of a character. Serifs are the strokes (fillips) attached to the ends of a character’s body. Bracketed serifs have rounded joints to the major lines of the letters. Serifs help the reader’s eye follow the baseline and facilitate reading. They can also help define the vertical spaces separating letters in a word. Serif for printed text Sans serif for projected text For titles, headers, you can use either. Jody Walker, 2007 1 SLIDE 15-17 Proportion, Mono Space See definitions below SLIDE 20-22 Dyslexia Read Regular typeface (shown as a graphic text above) makes a distinct difference between the titled oval shape in the letter b and the round circle shape in the letter d. This helps the brain avoid the mirror-image difficulty associated with Dyslexia. http://ww.readregular.com/english/index.html SLIDE 23 Text and Background Color Dark characters on a light background are superior to light characters on a dark background. The color combination perceived as being most readable is the traditional black text on white background. However, it is common for websites to have an off-white background in order to reduce the flicker and glare associated with white backgrounds. http://www.wtv-zone.com/phyrst/color/contrast.html SLIDE 24 There are two ways to display text on the web. ASCII text (created by coding HTML or CSS) however, the fonts must be pre-installed on the user’s system in order to be viewed. The number of HTML-generated fonts are relatively limited. ASCII text is searchable. Web Graphics (pictures of text in GIF, JPEG or SWF) (not searchable) is used whenever you want the text to have an exact look…and is often used in headings. Graphic text eliminates the jagged edges of screen text by smoothing, or "anti-aliasing" letters. Anti-aliasing blends the letter color to the background smoothly by adding transitional colors. Anti-aliased graphic text is often used for titles. For anti-aliased fonts, Arial may be the best font choice. SLIDE 24-27 Fonts for the Web Digital type is generally not well hinted (the uniform spacing between letters) for the screen. Letters often touch one another, making them hard to read—especially in very small sizes (9 pt. and below). TrueType is a digital font technology designed by Apple Computer to improve hinting. Operating systems in both Macintosh and Microsoft use the technology to convert already existing fonts to the TrueType format. Verdana and Georgia Two fonts were designed by Matthew Carter specifically for web delivery: Verdana and Georgia. Both have larger x-height (size of ascenders and descenders such as d and g. Letter combinations do not touch fi, fl, ff. Uppercase characters are taller than lowercase to improve readability. Character spacing is looser, making it easier to scan. http://www.microsoft.com/typography/WhatIsTrueType.mspx Jody Walker, 2007 2 Reading and font tips • Commonly used fonts are equally legible at the 10-, 12-, and 14-point size. • Serifs…improve readability when printed at high resolution, but they actually interfere with readability on the screen. • Older Adults and children prefer sans serif fonts (Arial & Comic). • Italics are even more problematic and are almost illegible in many sizes and on many platforms. • The optimal text line length is 40-60 characters (11 words per line). Lynda Weinman. (2003) Designing Web graphics. Indianapolis, Ind. : New Riders SLIDE 28-30 Which is type important? Type and typeface design influence the reader the same way as other visual elements. Thinking about shape and type complexities, and how type reacts to other shapes, often helps to create a more unified aesthetic in your layouts, designs, and art. TYPE IS YOUR PERSONALITY ON PAPER. Change your typeface and you go from casual to formal, silly to serious, staid to stylish, old fashioned to modern. TYPE IS IMAGE. You'd dress your best if you were going to an important meeting, and your documents need to be well-dressed, too. Type can reinforce your image as a company or an individual. If you use it consistently enough, people will start to associate you with certain typefaces. They might find themselves thinking of you when they see that typeface, without knowing why. TYPE IS POWER. Type has an effect on you even if you don't consciously notice it. You can use this power to your advantage to attract attention, strengthen your message, and improve your image, or you can overlook it and work against yourself saying one message with your text while conveying another with your font. TYPE IS COMMUNICATION. Communication means relaying information about our logic and emotions to others. The better you learn to communicate, the better others will know you, and the better you'll know yourself because logic, emotion, and about 98-percent water are what you're made of. TYPE IS IMPORTANT. The right typeface can encourage people to read your message. The wrong typeface or bad typography can make your message go unread. http://www.will-harris.com/esperfonto/ There is no right or wrong font. Just appropriate and inappropriate. Jody Walker, 2007 3 Some things to consider when choosing a font Is your message Formal or Casual? Type is your personality on paper (casual, formal, silly, serious, staid, stylish, old fashioned, modern). What kind of feeling or impression you want the type to convey? Type is emotional on a subliminal level because of the connotations it conveys. Will the typeface be used for Body or Display? http://store.adobe.com/type/ SLIDE 23, 31, 32 Figure Ground Contrast: Text, textural Background textures and colors can affect the readability of text. An important determinant, though, is the contrast between the text and the background. SLIDE 33-34 Text Alignment • Left Justified • Right Justified • Centered • Justified Type and typeface design influence the reader the same way as other visual elements. Thinking about shape and type complexities, and how type reacts to other shapes, often helps to create a more unified aesthetic in your layouts, designs, and art ADDITIONAL TUTORIALS http://www.webstyleguide.com/type/ http://usability.gov/guidelines/fonts.html#one http://psychology.wichita.edu/optimalweb/text.htm Jody Walker, 2007 4 IMPORTANT TERMS RELATED TO TYPEFACE / FONT Font / Typeface A single typeface is made up of the upper and lowercase letters of the alphabet, the numbers zero through nine, punctuation marks, and special characters-all in particular style. Typefaces are either Serif or Sans Serif. Sans-Serif A sans-serif typeface has no slab attached. It is easier to read on a monitor than a serif typeface and is used with ASCII text. Serif A serif typeface has a stroke attached to the beginning or end of one of the main strokes of each letter. Printed copy is usually serif The default font in most browsers is a serif typeface: Times Roman on Macs and Times New Roman on PCs. Proportional or Type (fonts) can either be monospaced or proportionally spaced. Typewriter Monospaced type, and certain fonts such as Courier and Letter Gothic, are monospaced- each character has the same width whether it's an i or a W. Typeset- quality fonts, such as Times Roman and Arial, are proportionally spaced…each letter is just the width of the character (you can fit four i's in the space of one W). Character Width Is the horizontal dimension of a character, including its assigned white space on both sides Font Families A family is all the fonts that comprise a group, as in Bunface Light, Bunface Light Italic, Bunface, Bunface Italic, Bunface Bold and Bunface Bold Italic. Some families will also include other weights, like Semi-Bold or Book, and fonts that have been Condensed or Extended, or any combination of these two, weight and aspect ratio. Weight, Contrast Weight is strictly an indication of the amount of vertical thickness in the characters of a font. A light font has a much thinner stem than does a medium one, while medium is thinner than semi-bold, which in turn is lighter than a bold. The main weights nowadays are Extra Light, Light, Book, Medium, Semi-bold, Bold, Extra Bold and Black.