Devin Drennen Intro to Experience and Interactive Design

Over break I read Chapter 5 in Above the Fold. These are my notes:
Chapter 5 - Web Typography
WHY TYPE MATTERS:

Typography, of all elements of design, can have the greatest effect on the success or failure of a piece of communication.

This is because type carries the message, and the craftsmanship of the typography can either enhance of take away from the message

The two opposing characteristics, which combine to attract a user and convey a message, are called readability and legibility.

Readability refers to how well type can attract a reader.
Readability can come from size, font usage, composition, color usage, abstraction, or anything that helps type - or, more specifically, the message - stand apart
Legibility, on the other hand, references the ease with which a reader can gather a message, especially when it comes to long stretches of copy.

The recognizability of individual characters in a font as well as type size, leading, letter spacing, line length - even color and backgrounds - play a role in how effectively legible type appears

Readable or expressive typography can be important on the home page to grab the user's attention, define a unique brand characteristic, or alert the reader to a site feature or special offer
Legible type is essential for article or blog text, and can make the difference in the success of a site that invites users to return to read long articles or posts

MEASURING TYPE:

Type and typographic properties such as spacing are commonly measured in em units.
An em unit is a square unit that represents the distance between baselines when type is set without line spacing or leading
Most browsers default to 16-pixel type as a general rule

TYPES OF WEB TYPE:

When it comes to rendering type on the Web, a designer has three primary options: Images of type, web-safe fonts, font replacements and embedding
Using images to display type is a static method of rendering type - the type is rendered once by the designer or producer, and that image is distributed throughout the Web to be viewed by the user
Using Web-safe fonts is a means of displaying content as live text, which is rendered by the user's browser
Various means of embedded fonts - which give a designer the ability to select a wide range of typefaces while still rendering live text - have recently emerged
The reason selecting a method with which to display type is so critical to Web design is due to the fact that type delivers content and content drives the success of most web sites
Content, however, must be dressed with some form of style or branding in order to be truly effective for the web site's owner

IMAGE TYPE:

Images of type offer a web designer the most control over the typography on a web page
All-image Web sites, where the type is rendered as a jpg, png, or gif image, are extremely limited in their ability to be indexed by search engines, and thus limited in their ability to be found by users
The best approach for using images as type on a web site is to limit the use to particular areas of display type where the images can have the most visual impact
The bottom line is that images of type are a great way to add personality or brand recognition to a web site, but should be used extremely sparingly in order to maintain the search ability of a site

WEB-SAFE TYPE:

A font is a complete set of characters that makes up a single size, style, and weight of a typeface.
The term typeface refers to the unique styling applied to a set of glyphs, including an alphabet of letters and ligatures, numerals, and punctuation marks
While web-safe fonts vary slightly in appearance from Mac to PC - and their display varies from browser to browser - the general appearance is consistent enough that a designer can reasonably predict the look of the finished design when viewed by the user
Designers define a web-safe font using what is called a FONT STACK

Font stacks are prioritized lists of fonts, defined in the CSS font-family attribute, that the browser will cycle through until if finds a font that is installed on the user's system
Font stacks list fonts in order of the designer's preference: preferred, alternate, common, generic

FONT REPLACEMENT & EMBEDDING:

Font replacement is emerging as a way to give designers the most typographic flexibility with their design, while still being able to take advantage of the search ability of live text
There are three primary methods of embedding or replacing fonts within a web layout: Flash- and image-based replacement methods like sIFR; the @font-face css command; or JavaScript replacement like Cufon or TypeKit

sIFR replaces a specific tag, like an <H1> tag for example, with a swf file containing rendering information for a specific font

This method worked but it requires the end user to have the Flash plugin installed and there was some lag between when the page loaded and when the replacement font appeared

The @font-face CSS command is a two-step process that involves first defining a path to a font on the server
Once the path to the front has been identified, it's simply a matter of calling the font when defining other tags
Fonts represent valuable intellectual property and this method leaves some question as to the end users' ability to reuse the font without paying for it

Cufon works by converting font information into VML (Vector Markup Language), which is rendered and displayed on the user's computer
This proprietary JavaScript function prevents the end user from ever downloading the font, avoiding issues of redistribution

Monday, December 9, 2013