Week 1 - On Web Typography

Chapter 1 – How We Read

I. Typographical design is important in affecting how the viewer reads.
            A. Legibility vs. Readability
                        1. Legibility = decipherable design
                        2. Readability = emotional impact of type and ease of reading
            B. The Reading Process

                        1. Positive vs. Negative space within and between characters (texture)
                        2. The mind focuses more on creating mental imagery from the text

            C. Saccades and Fixations

                        1. Saccades = leaps within lines of text while reading

                        2. Fixations = moments of pause within lines of text while reading

                        3. Ease of reading depends on text precision and reader’s proficiency

                        4. Typing in all caps creates less distinction between letterforms

            D. Screen vs. Print

                        1. Design for multiple devices

                        2. Design to accommodate for as many different users as possible

Chapter 2 – How Type Works

II. Choosing the right typeface plays a major role in communication.
            A. Importance of Typography

1.     Type is the linchpin of a designer’s ability to communicate

B. Collection of typefaces

            1. Over 50,000 commercial typefaces exist

            2. Typefaces change and adapt with time and trends (Print vs. Screen)

            3. Older typefaces are still relevant

                        a. Examples: Bell Centennial, Georgia, Verdana

C. Type on the Web

            1. System fonts

                        a. Examples: Arial, Verdana, Georgia, Times New Roman

            2. Images

                        a. Type could be uploaded as an image
                        b. Restricted ability to easily alter type size and attributes

            3. Text Replacement

                        a. Coding via CSS, Flash, or Java to replace hidden text

                        b. @font-face compatible with most major web browsers

                        c. Better than other methods as files become smaller

D. Language of Type

            1. Learn important type vocabulary to become better communicators

            2. There are no set rules in typography

Chapter 3 – Evaluating Typefaces

III. There are many different typefaces, so it is important to classify them properly.

            A. Font vs. Typeface
                        1. Typeface – Full name of the design
                                    a. Example: Helvetica
                                    b. Can contain numerous files under a single typeface
                                    c. “song”

                        2. Font – Format or storage mechanism for the design
                                    a. Example: Helvetica.ttf

                                    b. “mp3”
            B. Classifications
                        1. Serif, Sans-Serif, Slab Serif, Script, Monospace, Decorative

                        2. Typefaces under same classification can elicit different responses

                        3. Icon Fonts – Characters filled with symbols rather than letters

                                    a. Pros: Scalable, editable via CSS, responsive

                                    b. Cons: Screen readers may read icons as letters aloud

                                    c. Example: dingbats, symbol, picture, or pi fonts

                        4. Allows for typeface organization and aesthetic communication

            C. Physical Traits

                        1. Creates the overall aesthetic and feel of a typeface

                        2. Stroke

                                    a. High-Contrast – Stroke widths vary

                                    b. Monoline – Stroke widths are consistent throughout

                                    c. Can create ears, counters, shoulders, terminals, etc.

                        3. Em Box

                                    a. Variance in physical size of typefaces depends on the em

                                    b. Size of em is relative to font size

i. Example: Font size = 16px » 1 em = 16px

ii. Useful in responsive design rather than fixed pixels

iii. Characters exist within a “box” of 1 em height

iv. Typefaces can take up more or less space of “box”

                                    c. FOUT – Flash of unstyled text

                                                i. Occurs when default font loads before correct font

            D. Typeface Contrast

                        1. Refers to the differences in thick and thin strokes

                                    a. More variance = more contrast = more attention to letters

                        2. More contrast makes more exceptional headers

                        3. Less contrast makes for better readability

                        4. Medium to low contrast is best for readability

                                    a. Helvetica is too uniform for good readability

            E. Weights and Styles

                        1. 4 Basic Styles = Regular (Roman, Book), Italic, Bold, and Bold Italic

                        2. Weight = thickness of stroke

                        3. Posture = alteration of letter’s stance

                                    a. Example: Regular vs. Italic

                        4. CSS font-weight is in numerical value

                                    a. 100 = thinnest; 900 = heaviest

                                    b. 400 = normal

                        5. Condensed = narrower; Expanded = wider

                        6. Avoid using more than 2 typefaces in a single design

                                    a. Selecting from typeface with large family creates unity

7. Pseudo- or Faux-Italics/Bold = CSS improperly-generated italics or  bold when the necessary italic or bold font is missing

                                    a. May lack proper tail strokes in italic

                                    b. Maintains the original typeface’s body

                                                i. Lacks proper and correct alteration of the letterform

                                    c. Proper bolds are heavier but may not be uniformly increased

            F. X-Heights

1. Refers to the height of a lowercase letter from the baseline to the top of the lowercase letter

                        2. Low x-heights create elegant typefaces with high contrast between
                        the lowercase and capital letters

3. High x-heights are ideal for web and print; they fill more space and convey information more clearly
            a. Letters a, d, h, and n, etc. can be visually indistinguishable

            b. Counters take up more of em-box

                        i. Letters become more distinguishable to an extent

4. Counters – letters’ interior space

            a. Open vs. Closed

                        i. Example: O vs. C

5. Aperture – opening of the counter

            a. Example: space between ends of the letter C

            G. Numbers, Punctuation, and Special Characters

                        1. Uppercase Numerals – Lining or Titling Figures

                                    a. Same height and contrast as capital letters

                                    b. Can be distracting and attract too much attention

                        2. Lowercase Numerals – Text or Old Style Figures

                                    a. Designed for running text

                                    b. Can contain ascenders, descenders, and blends with text

                        3. Tabular Figures

                                    a. Designed with fixed spacing for use in tables

                                    b. Aligns vertically

                        4. Punctuation

                                    a. Curly Quotes – Smart Quotes – appear as filled-in 6’s/9’s

                                    b. Straight Quotes – Dumb Quotes­ – incorrect dashes; straight

                                    and vertical

i. Originated when keyboard real estate was at premium; opening and closing quotes reduced to one key

ii. HTML helps to avoid errors in apostrophes

                                    c. Primes – appear as italicized straight quotes

                                                i. Signifies inches, feet, minutes, seconds, coordinates

            H. Small Caps and Ligatures

                        1. Small Caps – slightly taller than x-height; capital in shape

                                    a. Not shrunken down capitals; maintains proper contrast

                                    b. Reduces distraction of acronyms and maintains visual flow

2. Ligatures – combines two or more characters to create a joined letterform

            a. Used for avoiding unappealing letterform messes

                        i. Example: f and i serifs that do not combine

                                    b. Effective in large colliding letters

            I. Language Sets

1. Many professional sets contain characters necessary to span across multiple languages

                        2. Notdef character – empty rectangle

a. Occurs when necessary character is missing; occurs most commonly with accented characters

            J. Optical Sizes

                        1. Typefaces with family members that suit a specific size range

                        2. Relates back to days of metal type

                        3. Fonts can contain alternative sizes

                                    a. Examples: Caption, Text, Display

                                                i. Avoids clutter of small text and heaviness of large

                        4. Typefaces should be no smaller than 6-8px on screen

                                    a. Larger resolutions provide better small type-size output

            K. Historical Context

                        1. Classic Typefaces

                                    a. Usually reliable and unoffensive

                                    b. Examples: Helvetica, Garamond, Caslon, Futura, Gotham

                                                i. May not be contemporary

                                                ii. Not all designed for screen
                                    c. Chaparral or FF Meta Serif are modern alternatives to Caslon
                        2. Remakes and Revivals
                                    a. Fonts may be reworked or edited for more variations
                                                i. Example: Garamond (ITC, Premiere Pro, etc.)

                                                ii. ITC Garamond is a bad interpretation and rework

                                                iii. Sabon is a beautiful rework of Garamond; contains

italics; takes up same space for bold, regular, and italics
3. Finding Alternatives
            a. Helvetica – Geometric, but not always legible

                                                i. FF Dagny or Pragmatica Slabserif are alternatives
                                    b. Georgia – big counters, large x-height, good spacing, serifs
                                                i. Chapparal, FF Tisa, Droid Serif = good alternatives

                                    c. Recognizing important attributes of typefaces lead to finding

alternatives easier

            L. Technical Considerations

                        1. OpenType = .otf

                                    a.  Contains eithers PostScript or TrueType fonts in one

                                    b. Works for Windows and Mac

c. Supports more characters, languages, special features, small caps, ligatures, all in one file

                        2. TrueType = .ttf

                                    a. Generally only works for either Mac or Windows

                        3. Web Open Font Format = .woff

                                    a. Works across all browsers

b. Wrapper that contains TrueType and OpenType compressed files

                        4. Loaded Assets

                                    a. Fonts should be kept to a minimum to reduce load time

                                    b. CDN = Content Delivery Network

                        5. Web Font Loader

                                    a. Avoids FOUT

                                    b. Framework codeveloped by Google and Typekit engineers

                                    c. CSS – {Display: none;}

                                                i. Hides content until font loads

                                                ii. Avoids FOUT

                                    d. Have fallback fonts

                                    e. Design with custom fonts after system fonts

            M. Rendering

                        1. Retina displays make old rendering problems less problematic

                        2. Different browsers load different font qualities

                        3. Core Text and DirectWrite = best text rendering engines

                                    a. Core Text – For Mac OS X; Anti-alias and beefier text

                                    b. DirectWrite – For Windows; Pixel-grid crispness
                                    c. One is not necessarily better or more correct

4. Always test designs for typography issues