Fonts

SLIDE 2 “TYPOGRAPHY is the balance and interplay of letterforms on the , 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 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 MAKES READING HARDER

SLIDE 9-11 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 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 , generally the height of lowercase letters excluding ascenders and . An 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 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 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 (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 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 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 . 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. Faces designed for headings and headlines may have only one weight. Body text faces usually have four, with professional fonts offering as many as 16 Stress is always measured in points. There are approximately 72 points per inch. Body text, such as the text you're reading, is generally set from 10 to 12 point. Subheads should generally be between 14 and 18 point. Headings range from 24 to 72 point, or larger for special effects. Baseline Shift positions a single character up or down Drop Cap used with all capital letters to indicate that the first letter of the word should appear larger. Body Text is the main block of text in a document (also called body copy)

Jody Walker, 2007 5

Body Vs. Display Type can be broken down into two more categories: body and display. Body or Headline Text typefaces, such as the one you're reading right now, are designed to be read for or pages, but they can also be used for display text. Most body faces in printed materials have serifs. Display text is larger type designed specifically for headings and headlines to break up information into sections. Display text uses one of more of the following elements: size (larger), color, font type, style (underline, bold) to stand out, that is, to be used for only a few words at a time. Display faces shouldn't be used for body text because they're too difficult to read in smaller sizes. Spacing the amount of space between each letter of a word is the reducing of the space allocated to one or both sides of a letter to make it fit more comfortably with its neighbor. It makes a better word when cap combinations like LT or AV occur. It even improves word shapes like 'Today', bringing the T a little closer to the o. But since computer setting has made kerning particularly easy, there is far too much setting in which legibility has actually been impaired by over-kerning. Most of the letter shapes we know were designed so that well-distributed weight would compensate for their odd shapes, so that they did fit well with nearly all of their possible neighbors. With over-kerning a pair like rn, set too close together, becomes indistinguishable from an m. Hinting adjusts the uniform spacing between letters in digital text. It is indispensable in every font intended to be legible at small sizes on low resolution output devices. Hinting (or, more accurately, instructing) a font is a method of defining exactly which pixels are turned on in order to create the best possible character bitmap shape at small sizes and low resolutions. A hint is a mathematical instruction added to the font to distort a character's outline at particular sizes. In TrueType a combination of these hints, and the resulting distortions, affords a very fine degree of control over the bitmap shape produced. Tracking adjusts global spacing between letters and should not be confused with kerning. Tracking is an overall increase or decrease in letter spacing over a line, or over more than a line, to make it fit better Word Spacing spacing between words (pronounced ledding) is the measurement of space between lines of type. The space between lines of text is called leading because in the days when metal type was used, the space between lines was achieved by using thin strips of lead hammered to a precise thickness. The general rule for determining leading is to add 20 percent to the type size.

Jody Walker, 2007 6