Elements of Multimedia

Text
Text in Multimedia

Introduction
Text in Multimedia

What is text?
- Text is the basic form of written
communication.
- It includes characters like letters, numbers,
punctuation marks, and special symbols like
*, &, ^, %, and so on. These characters are
combined into words, sentences, and
paragraphs to convey basic multimedia
information.
- Texts in the form of words, sentences, and
paragraphs are used to convey thoughts,
ideas, and facts in our everyday life.
 Text in Multimedia

Multimedia products depend

on text for many things.

Text is the easiest form of

communication; thus, it Navigation through the Text provides the information
provides a means to explain application is facilitated using regarding the application.
the functioning of different text.
applications.
Text in Multimedia

The building blocks of text are elements like letters,

numbers and special characters, words, sentences,
paragraphs, articles/chapters, and even books.
These elements are:
• Alphabet characters: A–Z
• Numbers: 0–9
• Special characters: punctuation [. , ; ‘…] and signs
and symbols [* & ^ % $ Åí ! /Ä ~ # @ …] called
character sets.
• Icons or drawing symbols, mathematical symbols,
Greek letters, and so on
Text in Multimedia

Typefaces and Fonts

Typefaces and Fonts

The words “typeface” and “font” While a typeface describes a particular style of
are typically thought of as lettering, a font refers to variations of a typeface,
like its size and weight. The simplest way to
synonymous, but they actually understand this difference is that a typeface is a
refer to di erent things. set of fonts with common aesthetic qualities.
ff
Typefaces and Fonts

A font exists as part of a

typeface.
For instance, Times New Roman is a typeface,
with a complete set of serif characters to
choose from, and a consistent design ethos.

However, there are various “fonts” in the

Times New Roman family.
Typeface
Typefaces and Fonts

Typeface
- Typically, what we refer to as a font is actually a typeface.
That is, Times New Roman, Helvetica, and Arial are not
actually fonts—they’re typefaces.
- Essentially, a typeface is the set of design features that
characterize a particular style of lettering.
- This may include:
‣ the presence (or lack) of a serif;
‣ the relative height, spacing and width of the letters;
‣ and any other aesthetic embellishments.
 Guess the Typeface

The quick brown fox jumps over the lazy dog Comic Sans

The quick brown fox jumps over the lazy dog Times New Roman

The quick brown fox jumps over

Courier New
the lazy dog

The quick brown fox jumps over the lazy dog Arial Black

The quick brown fox jumps over the lazy dog Rockwell
 Guess the Typeface

The quick brown fox jumps over the lazy dog Impact

The quick brown fox jumps over the lazy dog Montserrat

The quick brown fox jumps over the lazy dog Bradley Hand

The quick brown fox jumps over the lazy dog Papyrus

The quick brown fox jumps over the lazy dog Arial Narrow
Typefaces and Fonts

There are several different type classi cations, including:

AaBbCc AaBbCc AaBbCc AaBbCc

Serif Sans Serif Script Decorative
fi
 Type Classi cations

Serif typefaces

- These are typefaces that include serifs, which are

slight projections added to the ends of a stroke. In
web design, this style tends to evoke a sophisticated
and timeless feel.
- Perhaps the most obvious example of a serif
typeface is Times New Roman. Classic and readable
(but, arguably, without much character), it was
originally designed in 1932 for The Times of London
newspaper.
fi
 Type Classi cations

Serif typefaces
- Serif typefaces are most commonly used for both
body text and headlines.
- It projects history, tradition, authority, and
integrity.
- Historic newspapers like The New York Times and
The Washington Post use serif type. It’s a good
choice for professional businesses like insurance
companies, law practices, and newspapers.
fi
Popular serif typefaces
 One can safely say that the
printing industry is the
widest area of use for serif
fonts.
Most of books and magazines, brochures and
posters are set in serifs. Such typefaces are
eye-catching and can look elegant and
graceful, which is why they are often used by
those associated with the arts.

— David Felipe
 Type Classi cations

Sans Serif typefaces

- Sans serifs are in many ways the exact opposite of
serifs. If a serif font is easy to identify by serifs, then
the sans serifs are easily identi ed by their absence.
- Etymologically, the word serif comes from old Dutch
for “dash” or “line”, and sans is French for “without”.
- While this style started developing in the 1800s, it
wasn’t widely used until the 1920s and 1930s.
- It continues to be popular because it’s refreshingly
clean, minimalist and bare, with a more relaxed and
casual feel than serifs.
fi
fi
 Type Classi cations

Sans Serif typefaces

- Sans serif typefaces can be ef ciently used in modern
devices because the letters require less space.
- However, these fonts also embody cleanliness and clarity,
which mainly shows for companies that have
straightforward agendas and no uff around them.
- What typically describes sans-serif fonts?
‣ Clean-looking and clarity
‣ Simple
‣ Modern and technological
‣ Ef cient
‣ Straightforwardness
fi
fi
fi
fl
Popular sans serif typefaces
 Type Classi cations

Script typefaces
Script is a genre classi cation for While there’s the potential for crossover with the
typefaces that take direct in uence from “handwritten” sub-genre, most script type is
handwriting and calligraphy. slightly more formal in its composition and is
decorated with numerous ourishes.
Scripts offer a wide variety of moods and
characteristics, ranging from formal to casual.
fi
fi
fl
fl
 Type Classi cations

Scripts: Keeping it Formal

- Formal scripts are very uid and graceful, and often
have connecting strokes. They are appropriate
when an elegant, stately look is desired.
- Formal scripts are commonly used for invitations,
announcements, and decorative initial letters,
where their elegant look can go a long way towards
setting a sophisticated tone
- TIP: Most script typefaces should never be set in all
caps. The elaborate design of script capitals make
them dif cult to read, and their spacing is designed
to work with adjacent lowercase letters.
fi
fi
fl
 Type Classi cations

Scripts: Getting Casual

- Casual scripts are meant to look friendly and loose,
as though quickly drawn with a pen, brush, or
similar writing instrument.
- Their strokes can be connected or not, and the
mood conveyed tends to be warm, personal and
relaxed.
- Casual scripts are often used for ads, brochures,
and anything that requires an intimate, informal
look.
- Before choosing a casual script, look the type over
carefully and check the legibility of both the caps
and lowercase.
fi
 Type Classi cations

Decorative typefaces
- Decorative, or display, typefaces come packed with
personality.
- These are highly decorated versions of sans serif,
serif, script, and other styles.
- The point of using a decorative typeface is to grab
attention with a really unique look.
- Decorative types come in many varieties and are
often used in logos, billboards, posters, book
covers, and headers to distinguish a brand.
fi
 Type Classi cations

Decorative fonts o er a
customized look to a brand
and are reserved for large,
stand-alone formats.
Use them when designing a logo, in headers, or
printed phrases (on a t-shirt, for example).

Avoid using decorative fonts in body text as their

details are often lost.
fi
ff
bit.ly/shotserifgame
Font
Typefaces and Fonts

Font
A font is just a more speci c Neue Haas Grotesk Display Pro 15 XXThin

way of de ning the kind of text Neue Haas Grotesk Display Pro 25 XThin
Neue Haas Grotesk Display Pro 35 Thin
you’re using. It hones in on both
Neue Haas Grotesk Display Pro 45 Light
the size and weight of a Neue Haas Grotesk Display Pro 55 Roman
typeface. Neue Haas Grotesk Display Pro 65 Medium
Let’s look at the typeface Neue Haas Grotesk Neue Haas Grotesk Display Pro 75 Bold
Display Pro as an example: Neue Haas Grotesk Display Pro 95 Black
fi
fi
Typefaces and Fonts

As you can see, there are lots of variations of

Neue Haas Grotesk Display Pro. Each line
Neue Haas Grotesk Display Pro 15 XXThin represents a different font.
Neue Haas Grotesk Display Pro 25 XThin
These seven fonts are distinct because of
Neue Haas Grotesk Display Pro 35 Thin
their different weights, but they all lie within
Neue Haas Grotesk Display Pro 45 Light
the same typeface: Neue Haas Grotesk
Neue Haas Grotesk Display Pro 55 Roman
Display Pro.
Neue Haas Grotesk Display Pro 65 Medium
Neue Haas Grotesk Display Pro 75 Bold In this way, a typeface is a broader term that
Neue Haas Grotesk Display Pro 95 Black encompasses all the possible versions of that
particular design—whether it’s large, small,
italic, bold, expanded or condensed.
Typefaces and Fonts

Size
A Different Vocabulary 50 pt
You know how titles and headings tend Taylor Swift 33 pt
to be larger than body text?
A man does something, it's 'strategic'; a
Technically, that makes them different woman does the same thing, it's 'calculated.'
fonts, even when the typeface is A man is allowed to 'react'; a woman can
only 'overreact.'
identical.
28 pt
It goes on and on and on. A man does
something? 'Con dent and bold.' A woman
does it the same way, and she's 'smug.' A
man 'stands up for himself'; a woman 'throws a
temper tantrum.'
fi
Typefaces and Fonts

Weight

The example of Neue Haas Grotesk Display Pro

shows how fonts can be different by virtue of
their weights, even when the typeface is the
same.
That is, Neue Haas Grotesk Display Pro 25 XThin is a
different font from Neue Haas Grotesk Display
Pro 75 Bold, with the latter having incrementally
thicker strokes.
Typefaces and Fonts

Letterform Width

- Spacing further highlights the difference

between typefaces versus fonts. As a multimedia
designer, you can get creative with typefaces by
expanding or condensing them (creating more
or less space between each letter).
- When you squish the letters together, you’re
compressing them. When you space them far
apart, you’re expanding them.
- There’s a whole range of letterform widths:
compressed, condensed, narrow, normal, extended,
and expanded. Just like font weights,
different widths indicate different fonts.
Text in Multimedia

Typography
Typography

Typography is the art of

arranging letters and text in
a way that makes the copy
legible, clear, and visually
appealing to the reader.
It involves font style, appearance, and
structure, which aims to elicit certain emotions
and convey speci c messages. In short,
typography is what brings the text to life.
fi
Typography

Why is typography important?

Typography has two main purposes:

1. To promote legibility

2. To help communicate the messaging, tone, and sentiment

of a design piece.

Another function of typography revolves around aesthetics.

We're drawn to visually attractive designs that are clean and

easy on the eyes. In contrast, if a design is busy, confusing,
and causes us to strain our eyes, we run the other way.

Thus, it's in our best interest, and our audience’s, to learn

how to effectively use typography in multimedia.
Typography

Important typography terms

- Hierarchy
- Leading
- Tracking
- Kerning
 Typography

Hierarchy
Hierarchy is used to guide the reader's eye to
whatever is most important. In other words, it
shows them where to begin and where to go
next using different levels of emphasis.

Establishing hierarchy is simple: Just decide

which elements you want the reader to
notice rst, then make them stand out. High-
level items are usually larger, bolder, or
different in some way. Remember to keep it
simple and stick to just a few complementary
styles.
fi
 NO HIERARCHY LIMITED HIERARCHY IMPROVING MUCH BETTER

On the Moon! ON THE MOON! ON THE MOON! ON THE MOON!

‘A Giant Leap’ for All of ‘A Giant Leap’ for All of ‘A Giant Leap’ for All of ‘A Giant Leap’ for
Mankind Mankind Mankind All of Mankind
Americans First to Walk on Americans First to Walk on Americans First to Walk on
Dead Lunar Surface Dead Lunar Surface Dead Lunar Surface Americans First to Walk on
Space Center, Houston — Lorem Space Center, Houston — Lorem Space Center, Houston — Lorem Dead Lunar Surface
ipsum dolor sit amet, consectetur ipsum dolor sit amet, consectetur ipsum dolor sit amet, consectetur Space Center, Houston — Lorem
adipiscing elit, sed do eiusmod adipiscing elit, sed do eiusmod adipiscing elit, sed do eiusmod ipsum dolor sit amet, consectetur
tempor incididunt ut labore et tempor incididunt ut labore et tempor incididunt ut labore et adipiscing elit, sed do eiusmod
dolore magna aliqua. Ut enim ad dolore magna aliqua. Ut enim ad dolore magna aliqua. Ut enim ad tempor incididunt ut labore et
minim veniam, quis nostrud minim veniam, quis nostrud minim veniam, quis nostrud dolore magna aliqua. Ut enim ad
exercitation ullamco laboris nisi exercitation ullamco laboris nisi exercitation ullamco laboris nisi minim veniam, quis nostrud
ut aliquip ex ea commodo ut aliquip ex ea commodo ut aliquip ex ea commodo exercitation ullamco laboris nisi
consequat. consequat. consequat. ut aliquip ex ea commodo
consequat.
Typography Do you know why I actually built the bagel? It wasn't
to destroy everything. It was to destroy myself. I
wanted to see if I went in, could I nally escape?
Like, actually die. At least this way... I don't have to
do it alone.

TOO TIGHT

Leading
Do you know why I actually built the bagel? It wasn't
Leading (rhymes with wedding) is the space to destroy everything. It was to destroy myself. I
between lines of text, also known as line wanted to see if I went in, could I nally escape?
spacing. Like, actually die. At least this way... I don't have to

If you're not sure how much line spacing to do it alone.

use, don't fret—the default is usually ne. The TOO LOOSE

goal is to make your text as comfortable to
read as possible. Too much or too little Do you know why I actually built the bagel? It wasn't
to destroy everything. It was to destroy myself. I
spacing, as in the example below, can make wanted to see if I went in, could I nally escape?
Like, actually die. At least this way... I don't have to
things unpleasant for the reader. do it alone.

BETTER
fi
fi
fi
fi
Typography

Tracking
Tracking is the overall space between
characters, sometimes called character
spacing. Most programs let you condense or
expand this depending on your needs.

In some designs, you might adjust your

tracking to create a certain artistic effect. It
can also help you x fonts that are poorly
spaced to begin with.
fi
Typography

Kerning
Kerning is the space between speci c
characters. Unlike tracking, it varies over the
course of the word because each letter ts
together differently.

Some typefaces have what we call bad

kerning, making certain letters look
improperly spaced. If a type you're using has
bad kerning, it's best to cut your losses and
choose something else.
fi
fi
type.method.ac
Typography

Font pairing
Font Pairing

Font pairing is the creative

technique of putting typefaces
together harmoniously, in a way
that pleases the eye and
matches the intended message.

Font pairing is not only the way fonts work together

but also how these fonts complement the copy.
Font Pairing

League Spartan is a modern

typeface with strong structure
and geometric form. This
contrasts well against the
elegant and more traditional
style of Libre Baskerville.
Using a serif for your body copy
makes dense information easy to
read.
Font Pairing

Julius Sans One offers a ne

stroke, and its broader baseline
makes it a great display font.
Offsetting well against the more
masculine and geometric style
of Archivo Narrow, these
typefaces offer a good font
combination for easy readability.
fi
Font Pairing

Don’t be afraid to use one

typeface across your entire
brand.
Finding fonts like Libre
Baskerville that have style
variants is a clever way to create
nuance without overcomplicating
your designs.
This typeface is a classic serif that
is beautifully applied as a
heading and easy-to-read body
copy.
Font Pairing

Six Caps is a condensed and tight

display font, ideal to use for a
heading.
Teamed with Archivo Narrow,
this font combination makes for a
60s retrospective styling.
The clear distinction between the
three styles means the information
will be communicated in order of
importance.
Font Pairing

Source Sans Pro and Source

Serif Pro were created to be
used as a combination in design
and are another excellent
example of typographic
harmony.
Font Pairing

A fun combination: Yellowtail is

a fat brush script typeface with a
mix of connecting letterforms.
It contrasts nicely against the
bold and more basic style of
Open Sans Bold and Open Sans
Light.
Script typefaces make for lovely
and embellished short headings.
Too many words are hard to read,
so best to keep your application
of script to a limited number of
words. Take advantage of the
slanted form of a script typeface
by adjusting the angle a little.