Introduction to Interactive Media 06: Text: Static Interactive Media Component

Introduction to Interactive Media Choice of Typeface Sometimes the way in which the text is rendered communicates more than the words, themselves.

Introduction to Interactive Media Text Tradition Text properties are grounded in the print tradition. Typeface is a family of characters sharing a common design. –Arial –Chicago –New York –Palatino

Introduction to Interactive Media Text Tradition Typefaces are commonly categorized as: – Serif – Sans serif – Script

Introduction to Interactive Media Serif vs. Sans Serif Serif typefaces tend to look more traditional. Sans serif typefaces tend to look more modern.

Introduction to Interactive Media Serif vs. Sans Serif Serif typefaces are more legible in print Sans serif typefaces are more legible on the screen.

Introduction to Interactive Media TYPE TERMINOLOGY

Introduction to Interactive Media Upper vs. Lower Case Case –Upper and lower case. –UPPERCASE TYPE FEELS LIKE IT IS SHOUTING AT YOU. IT ALSO TAKES LONGER TO READ BECAUSE EACH WORD TAKES ON A BLOCKY SHAPE. A a

Introduction to Interactive Media Upper Case Text is Harder to Read

Introduction to Interactive Media Typeface vs. Font Font = complete set of characters of a particular typeface, style, and size. Typeface = family name of type

Introduction to Interactive Media Monospace vs. Proprtional Monospaced fonts: same width assigned to each character. (typewriter type) Proportional fonts: adjust width based on shape.

Introduction to Interactive Media Type Characteristics Weight – Line thickness of the typeface. – Arial Black has heavier weight. Condensed/extended text –Narrow width of text / widen width of text.

Introduction to Interactive Media Manipulating Text Kerning – Adjusting spacing between specific letters. Tracking – Adjusting spacing between all characters.

Introduction to Interactive Media Manipulating Text Leading –Spacing between lines.

Introduction to Interactive Media Manipulating Text Alignment –Alignment positions text relative to document's margins.

Introduction to Interactive Media Center Alignment Center aligned content has an inherent formal feel.

Introduction to Interactive Media Manipulating Text Justification –Justification adjusts line length to produce straight edges on left and right margins.

Introduction to Interactive Media TYPE IN DESIGN

Introduction to Interactive Media Effect of Manipulating Leading and Tracking Manipulating Type (via kerning, tracking, leading, etc…) can create a graphic element.

Introduction to Interactive Media Typographic Contrast Different type styles are used together to establish contrast.

Introduction to Interactive Media Type as Design Type can serve as a design element.

Introduction to Interactive Media TYPE AND THE COMPUTER

Introduction to Interactive Media Font Technologies Two techniques for displaying text on computer: –Bitmapped fonts (much less common) –Outline fonts – vector-based

Introduction to Interactive Media Bitmapped Fonts Bitmap fonts consist of "pictures" of a typeface at specific sizes Every character is stored as a bitmapped letter, number, or symbol. –Require large memory and storage capacity.

Introduction to Interactive Media Bitmapped Fonts Advantages –Precise control over letter appearance. –Letters can be edited at pixel level. Disadvantages –Letters can't be easily scaled. –Requires large storage capacities.

Introduction to Interactive Media Outline Fonts Most fonts are outline fonts Store a description of the character to be displayed. –Description is a series of commands to create the letter on the computer display. Look crisp and clean at every scale.

Introduction to Interactive Media Anti-Aliasing – smoothing the lines – text on screen Text is displayed on a monitor as a pattern of pixels. –Squares that display curved or diagonal lines produce a stair- stepped effect called JAGGIES. Anti-aliasing creates a smooth edge by blending the color of the text with the color of the background.

Introduction to Interactive Media Installed Fonts – the Problem Fonts are not standardized across computer platforms. –If the font is not available on the computer, it will substitute one that is –The result may not be acceptable.

Introduction to Interactive Media Installed Fonts – the Solution Solution –Use only widely available fonts. –Package the unique font with the application (e.g. embed with Flash, CSS embedding of fonts) –Render text as an image (lose editing / copy and pasting ability)

Introduction to Interactive Media Advantages of PDF docs PDF files maintain original formatting of documents across computer platforms. –Platform and application independent. –Support multiple media and user interaction. –Require a reader program to view the file and an application to convert a document to pdf format. Adobe Acrobat Reader is a free download. PDFCreator is a free open source converter.

Introduction to Interactive Media Text and Interactivity Hypertext is linked text. –User interacts with links to trace relationships of words and ideas created by the author. Can be beneficial to provide options and additional information –Hyperlinks within content of a web site should be opened in a new window if they take the user to a new site.