multimedia & webpage design objective 1.01: understand typography, multiuse design principles...
TRANSCRIPT
![Page 1: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/1.jpg)
Multimedia & Webpage Design
Objective 1.01: Understand typography, multiuse design
principles and elements
![Page 2: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/2.jpg)
• Typography refers to the design of the characters and the way they are presented on the page.
• Consistency is important!
![Page 3: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/3.jpg)
![Page 4: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/4.jpg)
![Page 5: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/5.jpg)
![Page 6: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/6.jpg)
![Page 7: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/7.jpg)
The Target Audience• Publications are created to convey a
message to the intended audience, called the target audience.
• The target audience will determine the:– Language used.– Typefaces used.– Colors used.– Graphics used.
![Page 8: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/8.jpg)
Babies Galore!
Babies Galore!
![Page 9: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/9.jpg)
Reference Books
Reference Books
![Page 10: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/10.jpg)
Shoes
Shoes
![Page 11: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/11.jpg)
Typefaces, Fonts, and Font Families
• A typeface is the basic design of a character.
• Each typeface has a design for each letter of the alphabet, numbers, punctuation symbols and may contain other symbols.
• Example:
Arialabcdefghijklmnopqrstuvwxyz
1234567890
!@#$%^&*()_+-=?,.:”’;
![Page 12: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/12.jpg)
Typeface Categories
• Typefaces can be divided into five main categories.1. Serif
2. Sans Serif
3. Script
4. Decorative/Ornamental
5. Symbol
![Page 13: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/13.jpg)
Serif Typefaces• Have attributes or strokes at the tips of the
letters called serifs.• Examples:
Bodoni Courier
Goudy Times New Roman
• Used for body text in printed publications. Business correspondence Book text Magazine article text Newspaper text Newsletter text
k
![Page 14: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/14.jpg)
Serif Typefaces
![Page 15: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/15.jpg)
Sans Serif TypefacesSans Serif typefaces have no attributes (serifs)
at the tips of the letters.
• Examples:• Arial Gill Sans• Berlin Sans Verdana
• Used for digital display.• Webpages On-screen display• Headings Tables• Captions Headlines
k
![Page 16: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/16.jpg)
Serif vs Sans Serif Typefaces
Sans SerifThe ends of each character do not have attributes (serifs)
![Page 17: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/17.jpg)
Decorative/OrnamentalTypefaces
• Designed strictly to catch the eye • Should be used sparingly.• Can be hard to read.
• Examples
Chiller AlgerianForte
• Used for decoration.• Banners and headlines
![Page 18: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/18.jpg)
Script Typefaces• Appear to have been written by hand
with a calligraphy pen or brush– Should never be used to key in all caps.
• Example
•French Script• Uses
• Formal Invitations• Place cards• Poetry • Announcements
![Page 19: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/19.jpg)
Symbol• Uses decorative pictures or symbols instead
of characters• Allows the user to use a symbol to convey the
message without importing a graphic • Can be used for fun or for musical and
mathematical symbols
Examples:Webdings Wingdings
![Page 20: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/20.jpg)
Fonts• It’s easier to understand fonts if you begin with
the original definition of a font. • Before desktop publishing, people called
‘typesetters’ set the type by hand using moveable type.
• Each character was a separate block of metal. • The letters were “set” on the layout to form the
text. • Each typeface had a complete set of metal
characters for each size, weight, etc.
![Page 21: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/21.jpg)
![Page 22: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/22.jpg)
Fonts Continued• Each different size or weight required a completely
separate set of metal characters.• Each metal set of characters was kept in its own drawer
and was called a type font.
• So a font is the specific size, weight and style applied to a typeface.
• Examples: Arial, bold, 12 point
Arial, italic, 14 point
Arial, 10 point
![Page 23: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/23.jpg)
Font Style
• The font style refers to the slant, weight and special effects applied to the text.
• Examples:
– Bold
– Italic– Underline– ShadowShadow– Outline– SMALL CAPS
![Page 24: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/24.jpg)
Font Families
• A font family is the different sizes, weights and variations of a typeface.
• Examples: Arial
Arial BlackArial NarrowArial Rounded MT Bold
![Page 25: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/25.jpg)
Typeface Spacing
• Monospace• Proportional
![Page 26: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/26.jpg)
Monospaced Typefaces
• Each character takes up the same amount of horizontal space regardless of the letter size.
• Advantages– Easier to see thin punctuation marks.
– Similar characters look more different.
– If limited to a certain number of characters per line, each line will look alike.
• Disadvantage: Harder to read in large bodies of text
Courier is monospaced
![Page 27: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/27.jpg)
Proportional Typefaces• Proportional
– The amount of horizontal space each character takes up is adjusted to the width of that character.
– Therefore, an i is not as wide as an m and receives less space.
• Advantages
–Easier to read.– Does not take up as much space as monospaced
typefaces.
• Used in documents and publications.
Times New Roman is proportional
![Page 28: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/28.jpg)
Proportional vs. Monospace
![Page 29: Multimedia & Webpage Design Objective 1.01: Understand typography, multiuse design principles and elements](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649dab5503460f94a9938e/html5/thumbnails/29.jpg)
Any Questions?