DCAP303 - MULTIMEDIA - SYSTEMS - Text
DCAP303 - MULTIMEDIA - SYSTEMS - Text
DCAP303 - MULTIMEDIA - SYSTEMS - Text
They are
classified on the basis of spacing between characters, words, presence or absence of serifs, their
shape, stretch and weight such as bold or italics. Underlining, outlining and strikeout of characters
may also be added in the text.
Font size is measured in points and it does not describe the height or width of its character. This
happens because the height of two different fonts (in both upper and lower case) may differ. One
point is approximately 1/72 of an inch i.e., 0.0138.
Fonts are very useful as they help in gaining attention of the reader by highlighting headings,
increasing readability and project an image. They can be classified into three categories – serif,
sans serif and decorative. The serif is the little decoration at the end of a letter stroke.
Example: Times New Roman, Bodoni, Bookman are some fonts which come under serif
category. Arial, Avant Garde, Verdana are some examples of sans serif font.
Examples of Serif, Sans Serif and Decorative Fonts
Bodoni
Interactive multimedia is called hypermedia.
(This is a serif font. In this font, a line or curve extension from the end of a letter. Serif fonts
are best used for body text.)
Avant Garde
Interactive multimedia is called hypermedia.
(This is a sans serif font. There are no extensions in this font. Sans Serif fonts are best used
for titles.)
Matura MT Script
Interactive multimedia is called hypermedia.
(This is a decorative font. These fonts are stylish and formal and are best used for
emphasis.)
Did u know? The spacing between character pairs is called kerning and the space between
lines is called leading.
Text fonts are used for lengthy text passages, so they have to be simple and readable. Serif fonts
are usually used for this purpose. On the other hand, display fonts are used for headlines and
slogans. These fonts should be eye-catching and are not used for common purpose.
Installation of Fonts
Fonts can be installed on the computer by opening the fonts folder through Windows Explorer.
Go to C:\WINDOWS or C:\WINNT\FONTS. When the folder opens, select the fonts you want
to install from an alternate folder and copy and paste them into the fonts folder. The second
option is to go to Start > Settings > Control Panel > Fonts, then go to File > Install New Font.
Caution If there are too many fonts on the computer, or an older operating system, the
above mentioned methods would not work. A computer user have to get a program like
Adobe Type Manager, and use it to add fonts to the system.
Usage of Fonts
After the installation of the font, you have to change the font of the present text in any text
editing program. A user can also use the installed font in HTML documents but the document
can be viewed by only those users who have the same font installed on their computers. Always
remember the name of the font and keep in mind that the name of the font is not the same as the
file name of the .ttf file. If a user does not remember the font name then he can find it by going
through the font list or by visiting the .ttf file.
Selecting Text Fonts
There are a few things that a user must keep in mind before selecting fonts for a multimedia
presentation. Reading the guidelines given below will help a user in choosing appropriate
fonts:
• Choose a font that is legible and easy to read.
Example: San serif fonts are easier to read than serif fonts.
• The different effects and colours of a font can be chosen to make the text look distinctive.
• Try to use few different colours within the same presentation.
• Try to use few typefaces within the same presentation. Play with the style and size to
match up to the purpose and importance of the text. For instance, use large font size for
headings.
• Drop caps and initial caps can be used to accent the words.
• Anti-aliased can be used to make a text look gentle and blended.
• To attract instant attention to the text, the words can be wrapped onto a sphere or bent like
a wave.
• In case of text links (anchors) on web pages the messages can be highlighted.
• Meaningful words and phrases can be used for links and menu items.
• Overcrowding of text on a single page should be avoided.
• Do not use decorative passages for longer paragraphs.
Did u know? The concept of using many fonts in a single page is called ransom-note
topography.
The basic element of multimedia is the text. However, the text should be kept minimum to
avoid overcrowding unless the application contains a lot of reference material. Less text can be
read easily and quickly unlike longer text passages which can be time consuming and tiring.
A lot of information in a multimedia presentation is not ideally the best way to transfer
information to a wide range of audience. Combining other elements such as pictures, graphics,
diagrams, etc., can help reduce the amount of text written to provide information.
From design point of view, text should fill less than half the screen. There are following ways in
which a text can be used in multimedia:
• in text messaging
• in advertisements
• in a website
• in films such as titles and credits
• as subtitles in a film or documentary that provide a translation
Using Text Elements in a Multimedia Presentation
Interactive Buttons
• Reading a hard copy is easier and faster than reading from the computer screen.
• A document can be printed in one of two orientations - portrait or landscape.
• The taller-than-wide orientation used for printing documents is called portrait.
• The wider-than-tall orientation that is normal to monitors is called landscape.
HTML Documents
• HTML stands for Hypertext Markup Language which is the standard document format
used for Web pages.
• HTML documents are marked using tags.
• An advanced form of HTML is DHTML that stands for Dynamic Hypertext Markup
Language. It uses Cascading Style Sheets (CSS).
Some of the commonly used tags are:
• The <B> tag for making text bold faced.
• The <OL> tag for creating an ordered list.
• The <IMG> tag for inserting images.
• Symbols are concentrated text in the form of stand-alone graphic constructs and are used
to convey meaningful messages and human emotions are called emoticons.
• Icons are symbolic representations of objects and processes.
Text Layout
While creating a multimedia presentation, the presenter should plan the text layout to let a
reader read it with ease. One of the first things to be keep in mind is the length of the text.
It should neither too long nor too short. For a printed document, a line containing 13 to 17 words
is sufficient. A line having more than 17 words should be too long to fit on a screen and would
be difficult to follow. On the other hand, a very short line would not look good on screen.
Therefore, for better presentation a line of around 8 to 15 words should be used.
The next point of concern is the consistency of pages. The designer has to make sure that the
pages should be of same size. Moreover, every page should be designed in an eye-catching way.
(see Figure 2.4)
The distance between two lines should be adjusted to a suitable value to increase readability.
Ensure that the leading is not too small as then the text will be hard to read. (see Figure 2.5)
Effects of Different Leadings
The other one of the most common errors people make is while choosing the background
colour. Using a background colour too close to the text or a background image highly in contrast
to the text which makes the text difficult to read. (see Figure 2.6)
Use of Colour and Background
Using text in websites attract a visitor’s attention as well as help him in understanding the
webpage better. It is far better than the use of meaningless graphics and images which do not
contribute in understanding of the page.
Website loading speed is one of the important factors that influences conversion as visitors stars
to leave the page if it takes more than eight seconds to load. A website which contains a lot of
text loads faster than the websites that contains the following:
• Internal code (not placed in external CSS, JS, etc. files and linked to)
• A lot of images and graphics
• JavaScript (for menus, including various stat tracking scripts, such as Google Analytics).
• Audio and video clips on the page (especially without transcripts, which hurts accessibility
if you do use audio/video, do not auto-launch it and have a button to turn it on/off).
• Table-based layouts that are twice larger in file size, than the ones built in CSS.
Another important things is how easily visitors find what they are looking for which depends
upon both eye catching images and informative text. However, informative text draws much
more visitors than graphics and images. This is why text should be the primary concern of the
website than graphic elements. Informative text can also boost search engine traffic and
conversions to a great deal.
Text in Films such as Titles and Credits
Most films start with titles and end with credits. The text is shown over either plain background
or coloured background. Typography look different in different formats such as a in film subtitles,
on websites, poster, essay, etc. To include a text in multimedia, a designer has to keep in mind
the points given below:
• the theme or look of the multimedia product.
• the amount of text needed.
• the placement of the text (heading, body text or logo).
• the format of the project (video, website, blog, video, slideshow, etc.,).
• the content of the information.
Use of Text in a Film Poster
Before adding subtitles to a film, people working on the film need to look into different font
styles, spacing, font colour and size. Some fonts that work well on a website while some work
well in print.
Example: Fonts such as Georgia, Verdana and Tahoma are great for use in a website as they
are designed to work well in static design environments where the background does not
change.
However, there are also some fonts that work well with moving images.
Did u know? Tiresias, Univers 45 and Antique Olive. These three fonts work well as subtitles
over dynamic content and are great way of communicating with the audience.
While designing subtitles, a film maker will need to keep in mind that moving images interact
with the top layer subtitles.
Example: If subtitles are white and rest on top of a similar white tone in the image, the text
will be difficult and impossible to read. To ensure this does not happen, a black outline around
text should be used. Now the text will be viewable even against common black and white
backgrounds.
On the other hand, some filmmakers use a yellow font with black outline for their subtitles.
Black outline increases the readability of the text. Film makers may also experiment with fonts
for subtitles and can use Sans Sheriff fonts as they are much more readable than other fonts.
Text in Advertisements
The explosive growth of multimedia data on the web creates huge opportunities for further
monetizing them with multimedia advertisements. Multimedia content becomes a natural
information carrier for advertising in a way similar to radio wave to carry bits in digital
communications. More and more business models are rolled out to freely distribute multimedia
contents and recoup the revenue from the multimedia advertisements it carries. With the
increasing importance of online multimedia advertising, researchers from multimedia
community have made significant progresses along this direction.
Local business, such as a restaurant or bookstore, coffee shop, boutique or convenience store-
owners use text advertising. Similarly, event planners and party organizers publicize their
events by indulging in text advertising.
Some of the important features of advertising using text elements are as follows:
• The main headline may be the strongest element of the ad or it may be secondary to a
strong visual. Some ads may have subheads and other title elements as well. Just making
it larger isn’t enough, headlines should be well-written to get the readers’ attention.
• Try to choose a font that is easy to read. Buy a font or download a free font from the
Internet that matches the style of your advertisement. Make sure the font is big enough to
read. Design certain words to stand out from the text in order to create a lasting impression.
• Pick fonts that suit your business and conveys your message. Try using a creative and
exciting font for a day care business, instead of a bold and serious font, such as times new
roman.
• Stick with less than four different fonts in your design. Using too many fonts will create
clutter in your advertisement. Try to avoid fancy fonts because they are hard to read.
Never use all capital letters in a block of body text because the reader will not be able to
read your message.
• Choose between a serif or a sans serif font when creating an advertisement. Use sans serif
fonts for titles or headlines. Use serif fonts in large block of text because they are easier to
read. Serifs are fonts that contain small lines at the ends of the letters, which makes them
appear more detailed. Sans serif fonts are without serifs.
• Make a decision on the right font size for your advertisement. Body copy in print ads tend
to use an 11-point font size. Design headlines in a larger font size and allow for space
between text blocks to create unity.
• Large blocks of text are likely to deter a viewer from even attempting to read the contents.
As a rule of thumb any text that takes up more than three full-length lines is likely to
require higher than the minimum standards for both size and duration of hold.
• The text should be legible. Avoid using ornate, heavily serifed, italic typefaces as they
offer poor readability. The visible space between words should be greater than the visible
space between letters and the visible space between lines should be greater than the
visible space between words. For this reason fully justified and proportional text should
not be used.
• Avoid text shown sideways, at an angle or distorted in any way, such as by being wrapped
round a real or virtual object in the commercial.
• Complexity is another factor that determines legibility of the text. There are two kinds of
complexity, that of the offer itself and the way the offer is presented. The two elements are
closely related but these guidelines are targeted primarily at the second, the communication
of the message.
• Since the text ads are more of keyword oriented, they draw more attention than banner
advertising.
• The text ads are inexpensive, thus making it affordable and effective for your business.
• There are a few websites which offers a flat free rental services to place your text based
advertisements.
• A few websites request for a onetime payment to place your text ads.
• The foremost benefit of having text based advertisements is that it helps in improving
your search engine ranking.
• Since it creates more visibility and draws more traffic to your site, your page rank will be
improved.
Thus, text ads will help in making your business a successful venture.
Font Editing and Design Tools
A font editor is a class of application software specifically designed to create or modify font files.
Font editors differ greatly depending on if they are designed to edit bitmap fonts or outline
fonts. Most modern font editors deal with the outline fonts. Special font editing tools can be used
to make your own type, so you can communicate an idea or graphic feeling exactly. With these
tools, professional typographers create distinct text and displays faces.
ResEdit
• ResEdit is a source editor available from apple that is useful for creating and changing
graphic resource such as cursors, icons, dialog boxes, patterns, keyboard maps, and
bitmapped fonts on the Macintosh.
• It can be used to edit or create new font resources for storing the bitmaps of screen fonts.
Fontographer
Type-Designer
• Type-Designer for windows from DS Design is a font editor that lets you create, convert,
and manipulate PostScript Type1 and TrueType fonts as well as EPS file format illustrations.
• An extensive palette of editing tools allows you to make changes to a font’s outline.
• With Type-Designer you can open up to eight typefaces simultaneously and cut and paste
characters between them.
Font Monger
• Font Monger from Ares Software offers a proprietary hinting technology to ensure that
your fonts will look good regardless of size.
• To create new fonts or to manipulate existing ones, Font Monger includes a freehand
drawing tool, a scissors tool, and a gizmo tool that rotates, slants, and skews character
outlines.
• Font Monger converts Macintosh or PC fonts to either platform as well as in any direction
between PostScript Type 1, Type 3, and True Type formats.
• It allows you to edit and expand the font of small caps, oblique, subscript or superscript
characters.
• Font Monger will also save the previous original characters in the PostScript font so you
can modify it further in the future, or, if you wish to save on disk space, compress the font
and it will remove the extra information.
• Font Monger does not allow editing of the actual outlines of a font but it allows many
other functions such as the ability to copy characters between fonts, perform various
transformations to any or all characters of a font, and create a variety of composite characters
such as fractions and accented characters.
Cool 3D Text
Cool 3D Production Studio is a program for creating and animating 3D text and graphics, for
videos and other multimedia products. This software runs on Windows 98SE/ ME/2000/XP.
With this program, a user can create 3D graphics, animations for videos. It includes new modelling
tools, animations plugs-in, and new features for animation and video.
Font Chameleon
• Font Chameleon from Ares software for both Macintosh and Windows platforms builds
millions of different fonts from a single master font outline.
• The program provides a number of pre-set font descriptors, which you build into a
PostScript Type 1, or True Type Font.
• With slide bars you can manipulate various aspects of the font, including its weight,
width, x-height, ascenders and descenders, and the blend of the serifs.
• The fonts you do build from the master outline can be used on the Macintosh, Windows,
or OS/2 platforms.
• To make your text look pretty, you need a toolbox of fonts and special graphics applications
that can stretch, shade, shadow, colour, and anti-alias your words into real artwork.
• Most designers find it easier to make pretty type starting with ready-made fonts, but some
will create their own custom fonts using font-editing and design tools such as Fontographer,
Type-designer, and Font Monger.
Hypermedia and Hypertext
Hypermedia information spaces are connected by non-linear links which a user may follow in
any order. Multimedia information spaces are arranged sequentially, with only one path through
the information provided.
Hypertext is different from normal text in that it is nonlinear. The reader need not read a
document from beginning to end, but can jump around within the document by clicking on hot
spots (or hyperlinks) in the text.
Example: Hypertext systems include web pages and Windows help pages.
On the other hand, hypermedia involves more than simply hyperlinked text. It also incorporates
images, sounds, and video into the document. This allows for a more graphical interface to
information. Most web pages should be considered hypermedia instead of simply hypertext.
The function of hypertext is to build links and generate an index of words. The index helps to
find and group words as per user’s search criteria. Hypertext systems are very useful in
multimedia interactive education courseware. Hypertext systems provide both unidirectional
and bi-directional navigation. Navigations can be through buttons or through simple, plain
text. The simple and easy navigation is through linear hypertext where information is organized
in linear fashion. Nonlinear hypertext, however, is the ultimate goal of effective navigation.
Individual chunks of information are usually referred to as documents or nodes, and the
connections between them as links or hyperlinks the so-called node-link hypermedia model.
The entire set of nodes and links forms a graph network. A distinct set of nodes and links which
constitutes a logical entity or work is called a hyperdocument – a distinct subset of hyperlinks is
often called a hyperweb.
A source anchor is the starting point of a hyperlink and specifies the part of a document from
which an outgoing link can be activated. Typically, the user is given visual cues as to where
source anchors are located in a document (for example, a highlighted phrase in a text document).
A destination anchor is the endpoint of a hyperlink and determines what part of a document
should be on view upon arrival at that node (for example, a text might be scrolled to a specific
paragraph). Often, an entire document is specified as the destination and viewing commences at
some default location within the document (for example, the start of a text). Figure 2.8 illustrates
these concepts graphically.
Nodes, Links and Anchors
Some authors distinguish between referential and organizational hyperlinks. Referential links
are the cross-references distinctive of hypermedia. Organizational links are special links which
establish explicit structure by connecting a parent node with its children, forming a tree within
the overall node-link graph.
• Information management and hypertext programs present electronic text, images, and
other elements in a database fashion.
• Software robots visit Web pages and index entire Web sites.
• Hypertext databases make use of proprietary indexing systems.
• Server-based hypertext and database engines are widely available.
• Software robots visit Web pages and index entire Web sites.
• Hypertext databases make use of proprietary indexing systems.
• Server-based hypertext and database engines are widely available.
• Information management and hypertext programs present electronic text, images, and
other elements in a database fashion.
Hypermedia Structures
• Links
• Nodes
• Anchors
• Navigating hypermedia structures
Nodes
Did u know? Links are connections between conceptual elements and are known as
navigation pathways and menus.
Anchors
• Anchor is defined as the reference from one document to another document, image, sound,
or file on the Web.
• The destination node linked to the anchor is referred to as a link end.
• The source node linked to the anchor is referred to as a link anchor.
Hypertext Tools
• Two functions common to most hypermedia text management systems are building
(authoring) and reading.
The functions of ‘builder’ are:
• Generating an index of words
• Identifying nodes
• Creating links
Hypertext systems are used for:
• Technical documentation
• Electronic catalogues
• Interactive kiosks
• Electronic publishing and reference works
• Educational courseware
Sometimes a physical web page behaves like two or more separate chunks of content. The page
is not the essential unit of content in websites built with Flash (an animation technology from
Macromedia) and in many non-web hypertext systems. Hence, the term node is used as the
fundamental unit of hypertext content. Links are the pathways between nodes.
When a user clicks links a succession of web pages appear and it seems that a user is navigating
the website. For a user, exploring a website is much like finding the way through a complex
physical environment such as a city. The user chooses the most promising route and if get lost,
he may backtrack to familiar territory or even return to home page to start over.
A limitation of the navigation is that it does not correspond to the full range of user behaviour.
Majority of users click the most promising links they see which has forced the web designers to
create links that would attract users.
Information Structures
Website designers and other hypertexts must work hard to decide which nodes will be linked to
which other nodes. There are familiar arrangements of nodes and links that guide designers as
they work. They are called information structures. Hierarchy, web-like and multi-path are three
of the most important of these structures.
Hierarchical Structure
The hierarchy is the most important structure because it is the basis of almost all websites and
most other hypertexts. Hierarchies are orderly (so users can grasp them) and yet they provide
plenty of navigational freedom. Users start at the home page, descend the branch that most
interests them, and make further choices as the branch divides. At each level, the information on
the nodes becomes more specific. Notice that branches may also converge.
When designing larger hypertexts, website designers must choose between making the hierarchy
broader (putting more nodes on each level) or deeper (adding more levels). One well-established
design principle is that users more easily navigate a wide hierarchy (in which nodes have as
many as 32 links to their child nodes) than a deep hierarchy.
You may have recognized that a great many print documents are hierarchies in one significant
respect. They are often divided into hierarchical divisions like parts, chapters, sections and
subsections. These divisions create a logical hierarchy that the user encounters while reading
linearly. Cross references in print invite the reader to jump from one part of the document to
another and so are analogous to links in hypertext.
Hierachy
Web-like
Multipath
Web-like Structures
Nodes can be linked to one another in web-like structures. There are no specific designs to
follow but web designers must take care in deciding which links will be most helpful to users.
Many structures turn into a hierarchical structure and cause trouble to users in navigating them.
This is why few web-like websites and non-web hypertexts are made.
Many web-like hypertexts are short stories and other works of fiction, in which artistic
considerations may override the desire for efficient navigation.
Multi-path Structures
As shown in Figure 2.9, it is possible to build a sequence of nodes that is in large part linear but
offers various alternative pathways. This is called multi-path structure. Users find multi-path
structures within hierarchical websites. For instance, a corporate website may have a historical
section with a page for each decade of the company’s existence. Every page has optional
digressions, which allows the user to discover events of that decade.
Future Developments
Computing and the web will continue to evolve in a great many ways. Monitors may give way
to near-eye displays, at least for mobile computing. Virtual reality may become more widespread
and may be routinely incorporated into the web.
For instance, websites may provide much improved site maps consisting of a 3D view of the site
structure, maybe using the metaphor of galaxies and solar systems. The web may well become
more intelligent and capable of generating personalized links that really match users interest.
The web may also become more social as users click links that open up live audio or video
sessions with another user. As communications medium changes, theory must keep pace. Or
else it becomes increasingly difficult to understand the medium and design successfully for it.