Chapter 9 Text

So, chapter 10 is about Photography, now Chapter 9 is about text What should it look like, how big should it be, how do colors contrast, does the ‘reading computer’ have that font you used? And where does it go on the screen?

Text The element of text is one of the most important components of a multimedia experience. We continue to rely on text as the primary means of recording, receiving, and transferring human knowledge and ideas.

Typography A thoughtful arrangement of stylized text can be used creatively as an element of both form and content.

Font Families A font family includes all the variant styles associated with a particular typeface.

The Printing Press Replica of the Gutenberg Press.

Legibility & Readability Legibility  Refers to a typeface’s characteristics  Can change depending on font size Readability  How easy text is to read in context, not just as isolated letters  Depends on a variety of factors

Legibility & Readability Which words are easiest to distinguish?

Stroke, Contrast, & Stress  Strokes can move vertically, horizontally, diagonally, or in a curved direction  Stress is the location or angle of a transition from thick to thin, or vice versa  Contrast refers to the transition between the thick and thin areas of a stroke

High/Low contrast typefaces Garamond (high contrast) vs. Arial (low contrast).

Font Characteristics Font characteristics define each typeface and determine a font’s suitability for various uses.

Serifs A serif is decorative accents added to the end of a stroke.

Serif Fonts Six main groups of serif typefaces: Blackletter Humanist Old Style Transitional Modern Slab Serif Serif typefaces are the industry standard for print media.

Sans-Serif Fonts Sans is a French word for without. Sans-serif literally means without serif. Three types of Sans-serif typefaces:  Humanist  Geometric  Transitional Sans-serif typefaces are ideal for headings and digital media where lower resolution can make serifs harder to render cleanly.

Typeface development through history

Decorative Fonts UrbanFonts.com provides access to thousands of decorative fonts.

Computers and Typefaces  Some typefaces don’t render cleanly in a web browser  Sometimes font substitutions are made  Web-safe fonts are supported by the most popular browsers  Verdana is one of the most popular screen fonts

Symbols and Special Characters € á ≠ ± é © ® ¢ Ω β Many common symbols are included in the Universal Character Set.

Webdings The Webdings font includes this fun assortment of symbol glyphs.

Web-safe Fonts For a web browser to accurately display text on a web page, all the fonts must reside on the client computer.

Commercial Typefaces Linotype is a commercial type foundry that specializes in the design of commercial typefaces.

Adobe Photoshop Character Panel

Font Effects Differences between True Bold, Italic, and Faux effects are quite apparent when compared side-by- side.

Vertical & Horizontal Scaling Type can be condensed, expanded, scaled, or stretched.

Font Size Each font takes up different amounts of space.

Font Color and Contrast Color contrast affects readability.

Baseline Typically, all type in a row of text sits uniformly on a common baseline. Shifting the baseline is a creative choice.

Font Management Font management software is used for previewing and managing the fonts on a computer system.

Font Book Font Book is Apple’s proprietary font manager utility for computers running OS X.

Kerning & Tracking  Kerning selectively varies the amount of space between a single pair of letters.  It accounts for letter shape.  Tracking uniformly adjusts letter spacing across a range of selected text.

Leading Leading is the amount of space between vertically adjacent lines of text.  In digital typesetting, leading is measured in points as the distance between the baseline of one row and the baseline of the next.

Leading - Which text block is easiest to read?

Justification - Which text block is easiest to read?

Justification There are four kinds of line justification.

1. Ragged-right or Left-justified

2. Ragged-left or Right-justified

3. Centered text

4. Justified left and right

Alignment buttons Most design programs have a set of alignment buttons or menu commands for aligning selected text and objects within the design space.

Font Transformations in Adobe Photoshop  Color gradients and pattern fills  Warping  Drop shadow  Stroke  Bevel & Emboss  Inner & Outer glow

Column 1: warped text and bevel and emboss Column 2: reversed type, stroke, drop shadow, and inner glow Column 3: pattern fill, gradient fill, image fill, and outer glow Font Transformations in Adobe Photoshop

Font effects

Font Effects A clipping mask was used to create this colorful font-fill effect.

Limit the Number of Typefaces  Limiting the number of typefaces in a design can keep the design looking uncluttered and professional.  When you do combine typefaces, try choosing ones that are totally different from one another.

Last week / this week  Content in your site: graphics, audio, video, photography, text, layout…  Next, usability – Chapter 6  This week’s web site development:  Train for shooting & editing  Produce new content for your site (script / production)  WordPress

Break, then WordPress installation and set up…