Typography

Web DesignProfessor Frank

Characteristics of Type on the Web

• Magazine/book typography – 1200 dpi• Computer screens – 85 ppi (maximum)

Anti-aliased type

On the Fly Construction

• Web page layouts and typography are suggestions of how your pages should be rendered—you never know exactly how they will look on the reader’s screen

Cascading Style Sheets (CSS)

• Provide control over the exact visual style of headers, paragraphs, lists, and other page elements

Advantages of CSS

• Separation of content and design• Efficient control over large document sets• Greater typographic control with less code• More formatting options than plain html tags

and extensions• Universal usability

Advantages of CSS

How CSS Works

• Site authors/users determine the size, style, and layout details for each standard html tag

• Once text has been styled, you can change the look of each occurrence of an element by changing its style information

Media Style Sheets

Consistency is Key!

• Provides polish to a site • Gives visitors expectation about structure of

text• Increases readers’ confidence in your words

Legibility

• Good typography depends on the visual contrast between one font and another, as well as among text blocks, headlines, and the surrounding white space

Alignment and White Space

• Delineate main text from other page elements• Add visual interest – contrasting positive and

negative space

Alignment

• Justified text• Centered and right-justified text• Left-justified text• Headlines

Alignment

Line Length

• Longer line lengths are harder to read• Fixed length vs flexible• Design standpoint vs users should be able to

structure their own view

Type Color

• Refers to various ways of manipulating fonts, line spacing, and paragraphs to optimize the overall look and legibility of type on the page

Leading

• Vertical space in a text block• Too much leading makes it hard for the eye to

locate the start of the next line• Print rule: 2 points above type size; web rule:

be more generous

Indenting Paragraphs

• Indenting vs line of white space• Use depends on type of document• Be consistent!

Typefaces

• Legibility on-screen• Adapted traditional typeface• Designed for the screen• Typefaces for other media

Choosing Typefaces

• Body text – use serif font like Times New Roman or Georgia

• Headlines – use sans serif like Ariel or Verdana• Use compatible fonts from same family• Don’t use more than two typefaces on a page

Screen vs Print Fonts

Specifying Typefaces

• If specified typeface isn’t available, browsers will display default

• Specify multiple fonts for each style: p { font-family: "Times New Roman", Georgia, Times, serif }

Type Size

• Set body text to the default text size defined in users’ browser

• Set all text variants (such as headings, captions, and links) using relative units, such as ems or percentages

p { font-size: 1em; text-indent: 2em; }

Text Size & Fixed/Flexible Layout

Type Sizes for Comfortable Reading

• Readers prefer large type• Generous leading (line spacing) = legibility• Most users never change default setting in

their browsers

Type Sizes for Comfortable Reading

Emphasis

• Italics• Bold• Underlining• Color• Spacing

CAPITALS

• Avoid ALL CAPS!• Users recognize shape of words

Semantic Emphasis• Abbreviation <abbr> • Acronym <acronym> • Address <address> • Block quotation <blockquote> • Citation <cite> • Computer code <code> • Defined term <dfn> • Emphasis <em> • Headings <h1>, <h2>, <h3>, <h4>, <h5>, <h6> • Lists <ol>, <ul>, <dl>, <menu>, <dir> • Strong emphasis <strong>

Display Typography With Graphics

Display Typography With Graphics

• Provide the equivalent text using the “alt” attribute of the <img> tag

• Use Photoshop’s anti-aliasing type unless type is smaller than 10 points or 10 pixels

Signal to Noise Ratio

• Good communication maximizes what’s important while minimizing the things that distract from the message

“Webjunk”

• Avoid:– Desire for attention at any cost (ie Flash)– Overcrowding/restricted space – Lack of control over the elements of a page

“Cliff of Complexity”

• Complexity in data displays is good – to a point – but push the degree of complexity too far and you go past a point of rapidly diminishing viewer interest: the “cliff of complexity”