introduction to multimedia unit 4 – multimedia element: text 2014-15 semester 2

Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Unit Unit 44 – – Multimedia Element: Multimedia Element: TextText

2014-15 2014-15 Semester 2Semester 2

Unit 4: Multimedia Element: TextUnit 4: Multimedia Element: Text

Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

2

Unit OutlineUnit 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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

IntroductionIntroduction

• 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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

4


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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

5


• 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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


6

Century font family


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

7

FontsFonts

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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

8

FontsFonts

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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

9

FontsFonts

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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

10

FontsFonts

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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

11

Serif, Sans Serif, DecorativeSerif, 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.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

12


• 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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

13



Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


14

Decorative font


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

15

Monospaced vs. ProportionalMonospaced 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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

SSelf-elf-SS

tudy

tudy

SSlid

elid

e

Monospaced vs. ProportionalMonospaced vs. Proportional

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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

17

StyleStyle

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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

18

SizeSize

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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

SizeSize

• 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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

20

SpacingSpacing

• Kerning– 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.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

SpacingSpacing

• 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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

SpacingSpacing

22

Leading

Kerning

Tracking

SSelf-elf-SS

tudy

tudy

SSlid

elid

e


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

23

ColorColor

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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

24

AlignmentAlignment

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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

AlignmentAlignment

25

Alignments

SSelf-elf-SS

tudy

tudy

SSlid

elid

e


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

26

Line LengthLine 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.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

27

Graphic-based TypographyGraphic-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.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Portable Document FormatPortable 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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Portable Document FormatPortable 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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

ReferenceReference

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

30

introduction to multimedia unit 4 – multimedia element: text 2014-15 semester 2

Documents