Multimedia

For Mobile
Ameer M. Telbani
 02
Second
section
Text
What Is
Multimedia
Multimedia is any combination of text, art, sound,
animation, and video delivered
. to the particular
user by computer or other electronic or digitally
manipulated means
Introduction

For more than 6000 year text and symbols were used
for communication ( Egyptian,
.
Sumerian, Babylonian)
Typefaces
and Fonts
Typeface : is a family of graphic characters that
usually includes many type sizes and styles ( Bold ,
Italic) as a style.
Typefaces
and Fonts
Font : is a collection of characters of a single size
and style belonging to a particular typeface family
(such as bold, italic)
Typefaces
and Fonts
To understand typeface and font is to relate both of them
as family and family members. In this example, typeface is
the family and font is mother, father, daughter and son.
Typefaces and Fonts
IN HTML5
Factors affecting
legibility of text

‒ Background and foreground color.

‒ Leading (pronounced “ledding”).
‒ Font Style.
Font
size

‒ Font size is measured by points ( 1=0.0138 inch = 1/72 inch)

‒ The font's size is the distance from the top of the capital
letters to the bottom of the descender in letters such as q
and y.
Font
size

‒ In the computer world, the term font is commonly used

when typeface or face would be more correct.
‒ X-height :the height of the lowercase letter x.
Leading
(ledding)
‒ Computer fonts automatically add space below the
descender to provide appropriate line spacing
‒ Leading determines how text is spaced vertically in lines,
For content that has multiple lines of readable text.
Leading
(ledding)
‒ You'll want to make sure the distance from the bottom of
the words above to the top of the words below has
appropriate spacing to make them legible.
‒ The leading is measured from the baseline of each line.
Leading
(ledding)
‒ Descenders: the parts of certain letters that are longer (p),
fall below the baseline.
‒ Ascenders: letters with taller features (h).
‒ They need to be considered as well when determining the
leading distance.
Kerning

Kerning : the spacing between character pairs.

‒ Set too closely together, words are indecipherable.
‒ Set too far apart, and they're awkward to read.
‒ If some letters have wider spacing and others narrower, it
can be frustrating for someone to read without fully
understanding what’s wrong.
Tracking

‒ Tracking involves adjusting the spacing throughout the

entire word.
‒ Tracking can be used, with great restraint, to change
the spacing equally between every letter at once.
Tracking

‒ Tracking is generally used to fill a space that’s larger or

smaller than currently suits the type’s parameters or to
make a single word seem wide and impressive.
‒ You should be very careful when changing the tracking,
as it can quickly lead to difficulty in reading.
Leading, Kerning and
Tracking
IN PHOTOSHTP
Rasterizing,
Aliasing &
anti-aliasing
‒ Rasterizing converting the letters from mathematical
representation to recognizable symbols on the
screen/printed.
‒ Aliasing is the visual stair-stepping of edges that
occurs in an image when the resolution is too low.
‒ Anti-aliasing is the smoothing of jagged edges in
digital images by averaging the colors of the pixels at
a boundary
Uppercase and
lowercase
‒ Uppercase which is the capital letter and the lowercase
which written as a small letter.
‒ In case of passwords in computer system the uppercase
or the lowercase must match exactly.
‒ The computer is case sensitive that detect the input
letter by keyboard either upper or lower case
Serif and
Sans Serif

Usage of serif and sans serif.

‒ The serif is the little decoration at the end of a
letter stroke
Serif and
Sans Serif

‒ Serif fonts are traditionally used for body text because it

guides the reader’s eye along the line of text.
‒ Sans serif fonts are used for headlines and bold statements.
Font styles
IN WORD
Using text in
multimedia

‒ Imagine designing a project that used no text at all, its

content could not be at all complex, and you would needs
many pictures and symbols to train your audience how to
navigate through project
 Using text in
multimedia

‒ Use what is right for your delivery system (WYSIWYG).

‒ From design perspective select your font based on the
complexity of your message and to its site.
‒ In presentation use bulleted points in large fonts and few
words with lots of white spaces.

WYSIWYG: What You See Is What You Get

text in multimedia
IN PHOTOSHTP
Choosing
text fonts

‒ Use the most legible font available for small types,

decorative fonts can’t be read are useless.
‒ Use few different faces as possible in the same work with
varying in size and weight.
‒ Adjust the leading for the most pleasing line spacing.
Choosing
text fonts

‒ Vary the size of your font based on the importance of

your message.
‒ Use anti-aliasing text for gentle and blended look.
Choosing
text fonts

‒ In large sizes adjust the spacing between letters (kerning).

‒ Try drop caps, and initial caps to accent the words.
‒ Keep the number of lines and their width to a minimum if
using centered type text
Choosing
text fonts

‒ Try to alter your text graphically with images or symbols.

‒ Experiment with drop shadow.
‒ (criticism) after you choose the Font
‒ Use meaningful words for links and menu items.
Font styles
IN WORD
Animated
Text

‒ For retaining viewer attention when displaying text we can

animate bulleted or fly on the screen, or growing, dissolve,
rotate, spin a headline a character at a time.
Animated
Text

‒ Highlighting text work well as a pointing devices for speakers.

‒ Do not overdo the special effects, they will become boring.
Symbols
and icons

‒ Symbols convey meaningful messages.

‒ The special symbols designed for multimedia project must be
learned before to be useful message carrier.
‒ like the shared symbols by millions of people.
Symbols
and icons

‒ In early computer the graphic artists create interesting symbols

to alleviate the need for text.
Menus for
navigation

‒ key, clicking a mouse, or pressing a touch screen.

‒ The simplest menus consist of text lists of topics. Users choose
a topic, click it, and go there.
‒ Sometimes menu items are surrounded by boxes or made to
look like push buttons.
Menus for
navigation

‒ On the Web, designers typically place on every page at least a

Main Menu of links that offers the user a handhold and
mechanism for returning to the beginning.
Buttons for
interaction

‒ In multimedia, buttons are the objects, such as blocks of text,

that make things happen when they are clicked.
‒ With Sound effect to indicate that you hit the target.
The ASCII
Character set

‒ The ASCII Character Set It all began with a set of characters

called ASCII, for the American Standard Code for Information
Interchange.
‒ ASCII was initially invented and standardized for analog
teletype communication before the digital age began.
‒ Based on 8 bit.
The ASCII
Character set

‒ it was in place and available when computers needed a

system to display or print characters.
‒ This simple system assigns a binary value to 128 characters
(7 bits), including both lower and uppercase letters,
punctuation marks, Arabic numbers, and math symbols.
The ASCII
Character set
How to type
The ASCII
Character set
‒ Press the "Alt" key on your keyboard, and do not let go.
‒ While keep press "Alt", on your keyboard type the number “258",
which is the number of the letter or symbol " Ă " in ASCII table.
‒ Then stop pressing the "Alt" key, and ...you got it!
Unicode

‒ As the computer market became more international, one of the

resulting problems was handling the various international
language alphabets.
‒ And because of limited ASCII’s ability to encode only Latin
alphabet, the Unicode standard provide the capacity to encode
all of the character used for the written language of the world.
Unicode

‒ To keep character coding simple and efficient, the Unicode

assigned each character a unique numeric value and name.
‒ The Unicode standard used Three encoding forms (UTF-8, UTF
16, UTF 32) that’s allow for encoding as many as million
characters.
Unicode

‒ The original standard accommodated up to about 65,000

characters to include the characters from all known languages
and alphabets in the world.
Unicode
Font editing
and design tool

‒ Special font editing tools can be used to make your own type.
‒ There were hundred of sites for downloading free and
shareware font drawn by others.
‒ Fontographer specialized in font editors for both windows and
Mac platform.
Typography In
Mobile Design
Typeface and brand
‒ Use a single typeface and a few font variants and sizes. Mixing
several different typefaces can make your app seem fragmented
and sloppy.
Font size
‒ Mobile screen is limited, so the font size matters a lot. For iOS,
use text size that’s at least 11 points, while for Android, choose 14
points for main text.
Typography In
Mobile Design
Text styles
‒ Use built-in text styles whenever possible. The built-in text styles
let you express content in ways that are visually distinct, while
retaining optimal legibility.
Leading
‒ Mobile screen is smaller, so leading is usually smaller than a
desktop version. When set leading, tighten it for mobile screens
than on desktop.
Typography In
Mobile Design
Line length
‒ The length of a text line can impact the whole text. Line length of
a desktop screen will go beyond the mobile screen borders. the
amount of characters on each line, font size and line length are
closely connected.
Space
‒ Space can bring the feeling of freedom and relaxing. Space in
mobile text mainly contains: space between lines, space in the
margins, paragraph space. Proper space in mobile text can help
user better interact with the text.
Typography In
Mobile Design
Hierarchy
‒ hierarchy in mobile text is thinner than a web interface, which
normally owns 3 levels. Mobile screens have a more limited
space, so many designers apply only 2 levels. A headline and a
body is enough
Contrast
‒ On mobile screen, the text is less than web face, as a result, the
contrast becomes exaggerated. The biggest rule is to weaken
the contrast. If you use ambient light, and short fonts on small
screen, you are not helping but bring a headache to your user.
Typography In
Mobile Design
Kerning
‒ It is a quite tiny factor in mobile text but worth attention. Yes, in
a large copy block, kerning may not seem as a problem.
Tracking
‒ Effective tracking makes text more readable. Usually, font usage
can adjust tracking appropriately, so you don’t need to adjust
tracking often. And Larger text block requires less tracking, and
smaller one requires more tracking.
Typography In
Mobile Design
Alignment
‒ Normally, text can be placed 4 ways: left, right, center or
justified. Left side alignment is the best choice of the rest 3. It
can resulting in a ragged right edge, which allows user’s eyes
jump from one end of a line to the next consistently.
Function
‒ Functional text should be highlighted among the other and
clickable elements should be big enough to tap on them.
Typography In
Mobile Design
Be responsive
‒ Mobile device have various sizes. Responsive design also have
already applied to mobile design. Any wrong usage of the whole
above elements can ruin the overall mobile UI design. It’s
requirement for designers to consider how mobile text will look
on different devices.