Typography Web Design Professor 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 Acronym Address Block quotation Citation Computer code Defined term Emphasis Headings,,,,, Lists,,,, Strong emphasis

Display Typography With Graphics

Provide the equivalent text using the “alt” attribute of the 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”