Unit 4 – Multimedia Element: Text 2014-15 Semester 2

Unit Outline In this unit, we will learn Fonts Typography Serif, Sans Serif, Decorative Monospaced vs. Proportional Style Size Spacing Color Alignment Line Length Graphic-based Typography Portable Document Format

Introduction With all the graphics and other media elements in multimedia applications, text remains the primary vehicle for communicating content. Text should be easy to read visually pleasing 3

Introduction The effective use of text is dependent upon typography and typefaces used. Typography is type design. It is the typeface used and the way the type is arranged to communicate an idea. Typeface: A set of characters, usually made up of alphabet letters, numerals, symbols, that all follow the same rules within the set.

Introduction Font: A set of characters within a typeface that has specific characteristics associated with it, especially with respect to: Size (the height of the characters) Weight (how dark the characters appear) Style (such as italic or condensed) Variations of a particular typeface are said to be part of a font family. Example: Times New Roman 12 point, bold, condensed is one font, and it is in the same font family as Times New Roman 16 point, light, expanded

Introduction Century font family 6

Fonts Readability is the primary goal. Fonts are also used to help create the desired look and feel of the site for the target audience. Different fonts, when used properly: Help in focusing attention on certain text on the screen Enhance readability Set a tone (serious, light-hearted) Project an image (progressive, conservative)

Fonts Default fonts are ones that come pre-installed with the operating system.

Fonts Many font designers sell or offer royalty free(1) fonts via the Web. If we use a font that is not on a user’s computer, the user’s operating system will substitute a default font when the Web page is viewed. (font substitution) In case of font substitution, word spacing might be changed and the alignment of objects on the page could be affected. (1) Royalty free refers to the right to use copyrighted material or intellectual property without the need to pay royalties for each use or per volume sold, or some time period of use or sales.

Fonts The following issues about fonts will be discussed: Serif, Sans Serif, Decorative Monospaced vs. Proportional Style Size Spacing Color Alignment Line Length

Serif, Sans Serif, Decorative Fonts are classified as serif, sans serif, or decorative. Serif fonts have feet or short lines at the ends of the strokes of the letter. Sans means “without”. A sans serif font is one without serifs or without feet. A decorative font may have a combination of serif and sans serif fonts or it may be one that cannot be categorized either way.

Serif, Sans Serif, Decorative Sans serif fonts are most often used for headings, titles and callouts. Serif fonts are used for long or dense bodies of texts. The serifs aid the user in reading, as the characters lead the eye across the page. Serif and Sans Serif

Serif, Sans Serif, Decorative

Serif, Sans Serif, Decorative Decorative font 14

Monospaced vs. Proportional Monospaced fonts: Each character takes up the same amount of horizontal space. Proportional fonts: Each character takes up a varying amount of horizontal space. Most fonts used in multimedia applications / web pages nowadays are proportional fonts. Monospaced vs. proportional

Monospaced vs. Proportional Self-Study Slide By using a monospaced font, the letters line up in columns. By using a proportional font, the letters take up only the amount of horizontal space they need. 16

Style The style of a font describes the way to emphasize a word or phrase. Font styles include: Italic, bold, and underline Italicized fonts do not generally read well on screen. An underlined word or phrase usually indicates a hyperlink. Unless the text is a hyperlink, the use of underline should be avoided. Bold style can be used for main headings.

Size Fonts are often measured in point sizes. 10 and 12 points are common point sizes for type displayed on a web page. The proper point size should depend on how the font is to be used (i.e. as a title, as body text, and so on.)

Size Text that appears as a title may be relatively large, whereas text that is used on a button might be quite small. Headings and subheadings are used to attract attention and provide the user with quick identification of the screen / page content, while body text provides the substance. 19

Spacing Kerning Tracking the process of adjusting the horizontal space between pairs of letters some pairs of letters create awkward spaces; Kerning adds or subtracts space between letters to create more visually appealing and readable text Tracking the process of adjusting the horizontal space between each character Kerning is selective letterspacing while tracking is overall letterspacing.

Spacing Leading amount of vertical space between lines of text Kerning, tracking and leading are important in making text readable. Kerning, tracking and leading are somewhat dependent on the font size and how the text will be used on the page / screen. 21

Spacing Self-Study Slide Kerning Leading Tracking 22

Color Color can be applied to text for emphasis. The greater the contrast between the type color and the background, the more the type will be noticed. Color may have a particular emotion associated with it. Color applied to text contributes to the overall mood and tone of the page.

Alignment Layout and alignment are important typographic considerations. When the content is primarily text, typography is used to create patterns of organization on the page. Text can be: left aligned right aligned center aligned justified In general, body text should be left aligned or justified. Center alignment should primarily be reserved for titles and headings.

Alignment Self-Study Slide Alignments 25

Line Length It is important to limit the amount of text on screen. It is more difficult and takes longer to read text on screen than on paper. Long lines of text are difficult to read. It is recommended that designers allow for approximately 30 to 40 characters per line. Columns are often more readable. Sentences containing a large number of items can be converted into lists. Complex information can be organized into tables.

Graphic-based Typography One way to ensure that text will be displayed in a specific format is to change the text into an image (i.e. to create the text and save it as a graphic) This is helpful when logos, headings, and titles need specific fonts. Because the font used in most company logos is important, company logos are usually converted to graphic-based type for use on the Web.

Portable Document Format The Portable Document Format (PDF) was developed in a way such that documents could be transported and viewed without the requirement that the users viewing the documents own or have access to the software with which the document was created. Users need a PDF reader that allows them to view the PDF document in its original layout with all of the proper fonts and graphics. PDF files can be viewed from any type of computer. 28

Portable Document Format PDF readers can handle any font and layout. Portable document software enables users to create, edit and read PDF files. Adobe Acrobat Reader is a PDF reader while Adobe Acrobat is a portable document software. 29

Reference Part of this slide set is prepared or/and extracted from the following book: Multimedia For The Web Revealed, Calleen Coorough & Jim Shuman, Thomson Learning, 2006, ISBN:1-4188-3953-1 This set of slides is for teaching purpose only. Self-study slide(s) is / are within the scope of the final examination.