1. Unit 4 – Multimedia Element: Text
Semester 2

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

3. 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

4. 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.

5. 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

6. Introduction
Century font family 6

7. 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)

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

9. 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.

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

11. 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.

12. 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

13. Serif, Sans Serif, Decorative

14. Serif, Sans Serif, Decorative
Decorative font 14

15. 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

16. 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

17. 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.

18. 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.)

19. 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

20. 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.

21. 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

22. Spacing
Self-Study Slide
Kerning
Leading
Tracking 22

23. 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.

24. 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.

25. Alignment
Self-Study Slide
Alignments 25

26. 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.

27. 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.

28. 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

29. 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

30. 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:
This set of slides is for teaching purpose only.
Self-study slide(s) is / are within the scope of the final examination.