2 Unit Outline In this unit, we will learn Fonts TypographySerif, Sans Serif, DecorativeMonospaced vs. ProportionalStyleSizeSpacingColorAlignmentLine LengthGraphic-based TypographyPortable Document Format
3 IntroductionWith all the graphics and other media elements in multimedia applications, text remains the primary vehicle for communicating content.Text should beeasy to readvisually pleasing3
4 IntroductionThe 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 IntroductionFont: 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
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 screenEnhance readabilitySet a tone (serious, light-hearted)Project an image (progressive, conservative)
8 FontsDefault fonts are ones that come pre-installed with the operating system.
9 FontsMany 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, DecorativeMonospaced vs. ProportionalStyleSizeSpacingColorAlignmentLine 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
14 Serif, Sans Serif, Decorative Decorative font14
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 SlideBy 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 StyleThe style of a font describes the way to emphasize a word or phrase.Font styles include: Italic, bold, and underlineItalicized 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 SizeText 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 letterssome pairs of letters create awkward spaces; Kerning adds or subtracts space between letters to create more visually appealing and readable textTrackingthe process of adjusting the horizontal space between each characterKerning is selective letterspacing while tracking is overall letterspacing.
21 SpacingLeadingamount of vertical space between lines of textKerning, 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
23 ColorColor 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 AlignmentLayout 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 alignedright alignedcenter alignedjustifiedIn general, body text should be left aligned or justified. Center alignment should primarily be reserved for titles and headings.
26 Line LengthIt 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 ReferencePart 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.