Elements of

Multimedia
Lecture 2
Dr.Eman Abdellatif
Advanced Multimedia
SIM
• Typography in Multimedia
 Company Identity
• Color modes
• Intended Learning Outcomes (ILOs) (task)

• visual Weight
• Composition
• Golden Ratio & Rule of Thirds.
 Typography in Multimedia
Simply put, typography is the art of arranging text for optimal
legibility, readability, and accessibility.
It’s one of the main factors contributing to how easy a website
is to navigate since it ensures how comfortably we can read and
understand all of its text-based content. Because of this,
understanding its importance and using it according to best
guidelines and practices will help your website stand out in any
niche and give your customers a better online experience
overall.
 Graphic-based Typography
Because the font used in most company
● One way to ensure that logos is important, company logos are
text will be displayed usually converted to graphic-based type for
in a specific format is use on the Web.
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.

4
Typography
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 and visually pleasing
Why would course designers like text?
The most inexpensive media to develop
Least overhead in storage/transmission
Text is a vital element of multimedia menus, navigation
systems, and content.
But text creation requires skill:
Good writing and effective use of fonts
● Typography refers to the design of the characters and the
way they are presented on the page.
● Typography is the style, arrangement, and appearance of text
and plays a role in how text communicates the message of a
multimedia production.
● Font: A set of characters within a typeface that has specific
characteristics associated with it.
● Variations of a particular typeface are said to be part of a font
family.
 Fonts

● Many font designers sell or offer

royalty free fonts via the Web.
 The following issues about fonts will
● If we use a font that is not on a
be discussed:
user’s computer, the user’s
operating system will substitute  Serif, Sans Serif, Decorative
a default font when the Web  Monospaced vs. Proportional
page is viewed. (font substitution)  Style Size
● In case of font substitution,
word spacing might be changed  Spacing Color
and the alignment of objects on  Alignment Line Length
the page could be affected.

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

 Typefaces can be divided into four main categories.

 Serif
 Sans Serif
 Script
 Decorative/Ornamental
9
 Serif Typefaces
k
● 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

 Recommended sizes for body text are 10 to 12 points.

 Sans Serif Typefaces
There are no attributes (serifs) at the tips of
the letters.
Examples:
●
•
•
Arial
Berlin Sans
 Gill Sans
 Verdana k
● Used for very large or very small text and
for digital display.
• Webpages  On-screen display
• Headings  Tables
• Captions  Headlines
Serif vs Sans Serif Typefaces

The ends of each

character do not
have attributes
(serifs)

Sans Serif
 Decorative/Ornamental Typefaces

● Designed strictly to catch the eye

• Should be used sparingly.
• Can be hard to read.

● Examples
• Chiller  Broadway
• Webdings  engravers MT
● Used for decoration.
• Headlines on flyers or advertisements.
• Webdings can be used for symbols in logos.
 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
 Font Style
● The font style refers to the slant, weight and special
effects applied to the text.
● Examples:
○ Bold Italic
○ Underline Shadow
○ Outline small caps

Font Families
 A font family is the different sizes, weights and variations
of a typeface.
 Examples: Arial
Arial Black
Arial Narrow
Arial Rounded MT Bold
 Typeface
Spacing

1 2 3 4

Monospace Proportional Leading Kerning

5 Tracking
 Typeface vs Font
A typeface is a group of alphabetic and
numeric characters that have been given
a particular appearance and feel. Inter,
Arial, Roboto, SF Pro, are all examples of
common typefaces.

Fonts are specific implementations of

typefaces. A typeface may have multiple
fonts, each of which may have a different
weight (bolder or lighter), size, be
italicized or non-italicized, capitalized,
underlined, etc. To give you a better
example – check sample >>>>>
about Inter is one of the most flexible,
variable typefaces with many available
fonts like Light, Medium, SemiBold, Bold,
etc.
 Monospaced Typefaces

● Each letter takes up the same amount of 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.
● Used often in computer programming and
biology

Courier is monospaced
 Proportional Typefaces
● Proportional
○ The amount of 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
○ Does not take up as much space as
monospaced typefaces.
○ Easier to read.
● Used in most documents and publications.

Proportional vs. Monospace

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

20
 Leading
● The vertical spacing between lines of text.
● Pronounced “led-ding.”
● In most software programs, it is referred to as line spacing.
● If there were no space between the lines of text, the letters
would touch the lines above and below them and would be
extremely difficult to read.
 Leading space

● Increase the leading space:

Having adequate whitespace between lines of text and after line breaks makes
it easier for readers to follow the text, which is very important. Accessibility
standards usually allocate a specific amount of vertical space to text based on
the font size.
For starters, set the spacing between lines of body text to 1.5. This will result in
leading that is half as tall as each line of text.

For headings, it’s recommended to make this space a little bigger.

You should start with a spacing of 2.5 between heading paragraphs, then
increase or decrease it as necessary. If you don’t want to edit this manually, look
up Material 3 type scale guidelines. Don’t worry, though, I’ll show you how to do
this later.
 Kerning
● Horizontal spacing between pairs of letters
● Used to add or subtract space between pairs of
letters to create a more visually appealing and
readable text.
● BOOK – before kerning.
– after kerning the O’s.

Kerning, Leading, Tracking

 Tracking
• Horizontal spacing between all of characters in a large
block of text.
• Makes a block of text seem more open or more dense.
 Spacing

Kerning

Leading

Tracking 25
 your font sizes <h>

● H1 heading:
● H2 heading:
● H3 heading
● H4 heading
● H5 heading
● H6 heading
 your font sizes <p>
A common practice is to set regular body text to a minimum size of paragraph
16px to 18Px. This is roughly the size of body text in printed media, and is the
smallest font that most people can read without needing to zoom in. To further
establish hierarchy, you can and should increase or decrease the size of your
text, all depending on the context.

● (Don’t) Limit your paragraph length You should keep your paragraph length
between 40 and 80 characters long since that’s about the most optimal
setting.
● (Do) Remember to include around 60–70 characters in each line, and don’t
go over that. Your users’ eyes will appreciate it.
 Units Of Measurements
The standard unit of measurement for online content is Pixel (1 px). We use
pixels to describe the base values of shapes, text, distances, etc.
When font sizes change, spacing requirements need to change too. When the
font size is set to 16px, a line height of 24px might work perfectly fine, but at
32px tall, that height would be far too small.
 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.

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

30
 Using Text Elements in a Multimedia
Presentation
The text elements used in multimedia are:
 Menus for navigation.
 Interactive buttons.
 Fields for reading.
 Symbols and icons.

Computers and Text  The font wars:

PostScript
TrueType
 Character sets.
 PostScript
● PostScript is a method of
describing an image in terms TrueType
of mathematical constructs.
● PostScript characters are  Apple and Microsoft developed the
scalable and can be drawn TrueType methodology.
much faster.
 TrueType is a system of scalable
● The two types of PostScript outline fonts, and can draw
fonts are Type 3 and Type 1. characters at low resolution.
● Adobe developed Adobe Type
Manager for displaying
PostScript fonts on both
Macintosh and Windows.
 Character Sets
● The American Standard Code for Information Interchange (ASCII)
is a 7-bit coding system.
● The extended character set is commonly filled with ANSI standard
characters.
● Unicode is a 8/16-bit architecture for multilingual text and
character encoding. (UTF-8 ---& from 16 to- UTF-32
(use different bit representations depending on the requirements of the specific encoding.))
Mapping across platforms:
○ Fonts and characters are not cross-platform compatible.
○ They must be mapped to the other machine using font
substitution.
 Macromedia Fontographer
● Fontographer is a specialized
graphics editor.

● It is compatible with both https://www.fontlab.com/font-editor/fontographer/

Macintosh and Windows
platform.

● It can be used to develop

PostScript, TrueType, and
bitmapped fonts.

● It can also modify existing

typefaces and incorporate
PostScript artwork.
 Text File Formats

 File format
determines which
programs can open a
file.
 The chart at the right
outlines text file
formats, their uses,
and their accessibility.
 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.

 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.
36
 Tips for fonts
● Avoid decorative (serif) fonts for small sizes
● Be consistent: standardize on a few fonts
○ Possible exception: attention-grabbing headlines
○ Surround headlines with plenty of white space
● Use different colors and backgrounds
● Use ample leading (space between lines)
● Avoid scrolling text (contiguity principle)
● Keep lines short
○ Help user transition from line to line
○ End lines with end of sentence or phrase
● Convert non-standard fonts to graphics
 Intended Learning Outcomes (ILOs)
(Task)

● Create your own font using any application by following steps:

○ Draw your letters (UpperCase & LowerCase & Numbers --etc) or
Customize any availble font style
○ using any font creator method create your font with ext (.OTF, .TTF,
.OTC or .TTC. )
○ Try to install your font and use it in FIGMA
○ Send ReadMe file
Examples for Typography Logos
• Company Identity
Brand Identity
 Logos should be

Simple Attractive Memorable Usable Timeless

Logos
L
o
g
o
s
Logos should be easy to reproduce
Logos should be easy to reproduce
01

Next
Color modes
Color modes
○Provide good contrast.
○Use increased point size to emphasize information.
 Anatomy of colors in design Color Mode

The color wheel shows

the relationship between
colors and it’s an
excellent resource for
learning the
fundamentals of color
theory.
 Anatomy of colors in design Color Mode

The basic color wheel consists of 12 primary colors.

Secondary colors are made up of a combination of two primary colors.

They are green, orange, and purple.

Tertiary colors are created by combining the secondary colors with primary
ones. There are 6 tertiary colors.
Examples of sites
Color Mode
Primary color
The spectrum of colors begins with the primary colors and these are
red, yellow, and blue (RYB). They can’t be mixed from other colors.
Secondary color
We create secondary colors by combining two primary colors.
There are 3 secondary colors and these are purple (red + blue),
green (blue + yellow), and orange (red + yellow).
Tertiary colors
The tertiary colors are combinations of primary and secondary
colors (i.e. red-purple, yellow-orange, blue-green, etc.)
 Analogous
featuring three colors that are next to each other on
the color wheel. Using colors close to each other
creates vibrant, bold, and natural-looking
compositions.
Analogues color scheme
 Monochromatic
color palettes are based on a single color paired with various
shades and tints. They appeal to the eye, producing interesting,
appealing, and harmonious designs.
 Complementary

color palettes
consist of colors
located on
opposing sides of
the color wheel.
These color
schemes are
fantastic for
making websites
look balanced and
exciting..
Complementary
Triadic

palettes consist of three colors evenly spaced apart on the color

wheel, forming a triangle, like red, yellow, and blue. Typically one
color will act as the primary, while the other two will act as
accents.
Triadic
Monochromatic

palettes consist of one single color or hue color

and add white or black or gray color to get light /
dark variations of it.
Monochromatic
 Split Complementary
palettes consist a base color and two adjacent
colors to its direct complement on the color
wheel, may be more than one color in main side
its provide subtle contrast in vibrant designs
Split Complementary
Square
It uses two pairs of complementary colors spaced
evenly around the color wheel (with two colors in
between each one) to get finally 4 colors . You can
find a tetradic combination by placing a square on
the color wheel and choosing the colors at each
corner.
 Colour Theory

Square
 Colour Theory

Screens
Colour
mode: RGB
Print Colour
mode: CMYK
Hue, Saturation, and Lightness
 Hue, Saturation, and Lightness
Hue is, in other words, color. It describes the degree of similarity between different colors. Primary
colors such as red, green, and blue serve as a reference point. For example, when you describe a
hue of turquoise, you’re thinking of mixing green and blue hues.

Saturation refers to the intensity of color. Colors with increased saturation will appear much more
vibrant while decreasing it gradually will make the color fade away until it’s gray and pale.

Lightness, also known as value or tone, defines the perceived brightness of a given color
compared to pure white.
References

Where to find color inspiration?

Choosing a primary brand color is a challenging task. Coming up with an entire color palette
might be even more confusing. Apart from establishing your brand language and
researching your audience, you can use tools to help you get there a bit faster. Here are a few
places to start looking for your new palette!

• Coolors.co
• Adobe Color
• Huemint
• Dribbble
• Material 2
• Figma plugins