You are on page 1of 54

Topic 002

Text

|
Overview

• Introduction
• What is Text?
• Understandings fonts and typefaces
• Using text element in multimedia presentation
• Computers and text
• Font editing and design tools
• Hypermedia and hypertext
08/21/2021 |
Introduction
• Text came into use about 6,000
years ago where meaningful marks
were scraped onto mud tablets and
left to harden in the sun (Jiahu
symbols)
• Only for members of the ruling
classes and the priesthood.
• In some former eras it was a
capital offense to read, unless you
belonged to the proper social
class.

08/21/2021 |
Do you know king Njoya of Bamum,
Cameroon

08/21/2021 |
Introduction (cont.)
• Importance of text in multimedia products:
– To explain how the application works.
– To guide the user in navigating through the application.
– Deliver the information for which the application was
designed.
– The power of meaning and the importance of text: words must
be chosen carefully. Example for titles, menus, etc.

08/21/2021 |
What is Text?
• Alphabet characters : A – Z
• Numbers : 0 – 9
• Special characters : Punctuation [. , ; ‘ …] , Sign or
Symbols [* & ^ % $ £ ! /\ ~ # @ .…]
• May also include special icon or drawing symbols,
mathematical symbols, Greek Letter, etc

08/21/2021 |
What is Text? (cont.)

• Factors affecting legibility of text:


–Size
–Background and foreground colour
–Style
–Leading (pronounced “ledding”)

08/21/2021 |
Understanding Fonts and Typefaces
• Typeface – a family of graphic characters that usually includes
many type sizes and styles (font family).
– Example: Arial
• Font - is a collection of characters of a single size and style
belonging to a particular typeface family.
– Typical font styles: bold, italic, underline, superscript, etc.
– Type sizes are expressed in points.
– Example: Arial Black, Arial Narrow, Arial Rounded MT Bold

ABC ABC ABC


08/21/2021 |
Understanding Fonts and Typefaces (cont.)

• The study of fonts and typefaces


includes the following:
–Font styles
–Font sizes
–Cases
–Serif versus Sans Serif
08/21/2021 |
Understanding Fonts and Typefaces (cont.)
• Font Styles
– The technology of font effects in bringing viewer’s attention
to content:
• Bold
• Italic
• Underline
• superscript
or subscript
• Embossed or Shadow
• Colours
• Strikethrough

08/21/2021 |
Understanding Fonts and Typefaces (cont.)
• Font Sizes
– Font size is measured in points.
– Character metrics are the general measurements applied to individual
characters.
– Font’s size: distance from the top of the capital letters to the bottom of
the descenders in letters such as g and y.

08/21/2021 |
Understanding Fonts and Typefaces (cont.)
• Font Sizes (cont.)
– Leading is the space
between lines.

– Kerning is the adjustment


of the space between
letter pairs (e.g. AV) to
make them look more
uniform.

08/21/2021 |
Understanding Fonts and Typefaces (cont.)

• Cases
– A capitalized letter is referred to as uppercase.
– A small letter is referred to as lowercase.
– Placing an uppercase letter in the middle of a
word is referred to as an intercap (e.g.
MyBlog.com).

08/21/2021 |
Understanding Fonts and Typefaces (cont.)
• Cases (cont.)
– Case sensitive: the text’s upper- and lowercase letters must
match exactly to be recognized.
– Example: the directory names and filenames used in Uniform
Resource Locator (URL) addresses in the Internet:
• http://en.wikipedia.org/wiki/Pattern_recognition
• http://en.wikipedia.org/wiki/Pattern_REcognition

08/21/2021 |
Understanding Fonts and Typefaces (cont.)

• Cases (cont.)
–Case insensitive: the text’s upper- and
lowercase forms of a character are treating
or interpreting as being the same.
–Example: e-mail addresses
• HizMawati@UPM.Edu.My =
hizmawati@upm.edu.my
08/21/2021 |
Understanding Fonts and Typefaces (cont.)

Serif Sans Serif


• Serif is the little decoration at the • Sans serif fonts do not have a serif
end of a letter stroke. at the end of a letter stroke.
• Serif fonts are used for body text • These fonts are used for headlines
as it is said to help guide the and bold statements.
reader’s eye along the line of text. – E.g.:
– E.g.: Century Gothic
Times New Roman Arial
Bookman Comic Sans MS
Rockwell Light Impact
Courier New Tahoma
Century

08/21/2021 |
Using Text in Multimedia

• Designing with Text


– Choosing Text Fonts
• Use the most legible font available. Decorative fonts that
cannot be read are useless.
• Use as few different faces as possible.
• Use bold and italics to convey meaning.
• To make your type stand out or be more legible, explore
the effects of different colours and of placing the text on
various backgrounds.
08/21/2021 |
Using Text in Multimedia (cont.)

• Designing with Text (cont.)


– Choosing Text Fonts (cont.)
• Adjust the leading for the most pleasing line spacing. Lines
too tightly packed are difficult to read.
• In large-size headlines, adjust the spacing between letters
(kerning) so that the spacing feels right.
• Use meaningful words/phrases for links and menu items.

08/21/2021 |
How to design a font

08/21/2021 |
How to design a font
Step 1: Research
It’s important to know the style
you want for your typeface,
what different applications it
will be used in and who will use
it

If creating a typeface beyond


personal use, such as a software
package, you may be required to
use a Glyphs palette. Glyphs are
essentially all available
characters in a font – from
letters to numbers and special
characters.

08/21/2021 |
How to design a font
Step 2: Drawing and Calligraphy

This is where a
typeface takes its
most basic form –
essentially, where
you create a
prototype.

08/21/2021 |
How to design a font
Step 2: Drawing and Calligraphy

It’s a matter of
exploring different
ways – is your
typeface mimicking
natural handwriting,
is it more vector
based?

08/21/2021 |
How to design a font
Step 2: Drawing and Calligraphy

Common prototype
words are:
Hamburgefonstiv or
Adhesion, or a brand
adjective like
“friendly”.

08/21/2021 |
How to design a font

• “The capitals ‘H’ and ‘O’ set standards for


round and straight parts of the other capital
characters.
• In the lowercase, ’n’ and ‘o’ will do the
same job, and letters with ascenders and
descenders such as ‘d’ and ‘p’ will help
define vertical proportions of the font.
08/21/2021 |
How to design a font

08/21/2021 |
How to design a font

• These key characters not only dictate the


structure of the shapes of the typeface, but also
their spacing – shapes with similar aspects to their
sides are spaced in the same manner.

08/21/2021 |
Step 3: Tools for sketching and drawing
letters
• When using a tool, the size can change the weight of the
typeface very much.
• Seb Lester is best known for exquisitely beautiful
lettering, but he’s also designed typefaces including Neo
Sans.

08/21/2021 |
Step 4: Tools for digital typeface design

• This stage happens when you’re ready to


scan your letters into software such as Adobe
Photoshop, Illustrator, Inkscape or the Mac-
only Glyphs app for font creation.
• Manipulate the pixel images and auto trace
so the glyphs turn into digital fonts.

08/21/2021 |
Step 4: Tools for digital typeface design

• Once the basic characters like A-Z, a-z and


numbers are defined, start extending the
character set.

• Begin to experiment with letters, keeping in mind


their anatomy - such as kerning, alignment,
measurement, leading and ligatures.

08/21/2021 |
Step 5: Testing in context

• Once a working version of the design is ready, test


the typeface within its intended context.
• This stage can be as equally challenging as getting
the design of the shapes right.
• Expanding the character set, including accent
figures and punctuation, might also occur at this
stage

08/21/2021 |
Step 6: From design to market

• Getting fonts from the design stage to market gets


technical, and maybe a little boring.
• “Basically, it depends on the delivery format (OTF
vs TTF), hinting methods, testing of OpenType
features, and building proper style names. In-app
quality assurance testing. Web font formats get
created from the OTF or TTF ‘masters’,” says
Terrance.
08/21/2021 |
Using Text in Multimedia (cont.)

• Designing with Text (cont.)


– Installed Fonts
• Before you can use a font, it must be recognized by
the computer’s operating system.
• To use fonts other than those installed with your
basic operating system, you will need to install
them.

08/21/2021 |
Using Text in Multimedia (cont.)

• Designing with Text (cont.)


–Animating Text
• A plenty of ways to retain a viewer’s attention
when displaying text.
• E.g. Fly in some words, dissolve others, rotate
or spin others – animate one word, or one
letter, or to animate an entire line.
08/21/2021 |
Using Text in Multimedia (cont.)

• Menus for navigation


• Interactive buttons
• Fields for reading
• HTML documents
• Symbols and icons

08/21/2021 |
Using Text in Multimedia (cont.)
• Menus for navigation
– A user navigates through
content using a menu.

– A simple menu consists of a text


list of topics.

08/21/2021 |
Using Text in Multimedia (cont.)
• Interactive buttons
– A button is a clickable object that executes a command when
activated.
– Users can create their own buttons from bitmaps and graphics.
– The design and labeling of the buttons should be treated as an
industrial art project.
– Use common button shapes and sizes. Label them clearly.
– BE SURE THEY WORK!

08/21/2021 |
Using Text in Multimedia (cont.)
• Fields for reading
• Reading a hard copy is easier
and faster than reading from
the computer screen.
• If the purpose of your
multimedia project is to
display large blocks of text
( try to present only a few
paragraphs per text page, use
font that easy to read )
08/21/2021 |
Using Text in Multimedia (cont.)
• Fields for reading (cont.)
– Portrait vs. Landscape
– Portrait: the taller-than-wide orientation used for printed documents.
– Landscape: the wider-than-tall orientation normal to monitors.
– Possible solution if working with a block of text that is taller than what
will fit:
• Put the text into a scrolling field.
• Break the text into fields that fit on monitor-sized pages, and design control
buttons to flip through these pages.

08/21/2021 |
Using Text in Multimedia (cont.)
• HTML documents
– HTML stands for Hypertext Markup Language. It is the standard
document format used for web pages.
– HTML documents are marked using tags annotations that
control a text document’s layout and formatting or indicate
its structure.
• Tags:
– <B> tag for making text bold faced
– <IMG> tag for inserting images

– Learning guides and references: http://www.w3.org/TR/

08/21/2021 |
Using Text in Multimedia (cont.)
• Symbols and icons
• Symbols are concentrated text in
the form of stand-alone graphic
constructs.
• They are used to convey
meaningful messages.
• Symbols used to convey human
emotions are called emoticons.
• Icons are symbolic representations
of objects and processes common
to the graphical user interfaces of
many operating systems.
08/21/2021 |
Using Text in Multimedia (cont.)

• Symbols and icons (cont.)

08/21/2021 |
Using Text in Multimedia Applications

• Labels and Captions


–Help to identify the relationship of a
picture to other information.
–Tend to be short and to the point.
–Should stand out from the background
and easy to read.
08/21/2021 |
Using Text in Multimedia Applications
• Informational Text
– Consists of a number of words, sentences, and paragraphs that convey a
message.
– Text should be easily to be positioned appropriately on the display.
– Always make a simple sentence, emphasis on what should be there !!!.
– Background and foreground also important.
– Scroll bars should be used for large amounts of text rather than shrinking
the text to fit on the display.

08/21/2021 |
Using Text in Multimedia Applications

• Keep Navigation Aids Consistent


– Use the same navigation aids (navigation scheme) on all pages.
– To ensure that users can use the Web site navigation effectively.

08/21/2021 |
Computers and Text (cont.)

• Character sets
– The American Standard Code for Information
Interchange (ASCII) is a 8-bit coding system – 128
characters including upper and lower case letters,
punctuation marks, Arabic numbers and math symbols.
– The extended character set is commonly filled with
(American National Standards Institute) (ANSI)
standard characters.

08/21/2021 |
Computers and Text (cont.)

• Character sets (cont.)


– The ISO-Latin-1 character set is used while
programming the text of HTML pages.
– Unicode is a 16-bit architecture for multilingual text
and character encoding.
– The shared symbols of each character set are unified
into collections of symbols called scripts.

08/21/2021 |
Font editing and design tools
• Fontlab
– www.fontlab.com
– It is compatible with both
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 .

08/21/2021 |
Font editing and design tools (cont.)

• Creating Attractive Text


 Adobe Photoshop, TypeStyler, COOL 3D, HotTEXT,
TypeCaster, SebLester

08/21/2021 |
Hypermedia and Hypertext

• Definition:
– Multimedia?
– Interactive multimedia?
– Hypertext?
– Hypermedia?
• Please refer to Chapter 1!

08/21/2021 |
Hypermedia and Hypertext (cont.)

• Hypertext systems are used for:


– Electronic publishing and reference works.
– Technical documentation.
– Educational courseware.
– Interactive kiosks.
– Electronic catalog.

08/21/2021 |
Hypermedia and Hypertext (cont.)
• Hypertext tools – Two functions common to most hypermedia
text management systems are building (authoring) and reading.
• The functions of ‘builder’ are:
– Creating links (link anchor – where the link from, link end – the
destination node linked to the anchor).
– Identifying nodes (conceptual elements consist of text, graphics, sound
or related information).
– Generating an index of words (find & group words according to user
search criteria).

08/21/2021 |
Summary
• Text is one of the most important elements of multimedia.
• A typeface is a family of graphic characters that usually includes
many type sizes and styles.
• The standard document format used for Web pages is called
HTML.
• A hypertext system enables the user to navigate through text in
a non-linear way.
• You can search and view potentially billions of text documents
and files.

08/21/2021 |
Questions & Discussion

08/21/2021 |
Ole Sangale Road, Madaraka Estate. PO Box 59857-00200, Nairobi, Kenya
Tel +254 (0)20 606155, 606268, 606380 Fax +254 (0)20 607498
Mobile +254 (0)722 25 428, (0)733 618 135 Email info@strathmore.edu
www.strathmore.edu |

You might also like