Text.

Slides:



Advertisements
Similar presentations
BM109 Computer Applications For Media. Text Overview Importance of text in a multimedia presentation. Understanding fonts and typefaces. Using text elements.
Advertisements

Week 7 Web Typography. 2 Understanding Type Design Principles.
DIGITAL GRAPHICS & ANIMATION Complete LESSON 4 ADDING TEXT TO GRAPHICS.
1 LECTURE 4 THE USES OF TEXT IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.
Chapter Concepts Discuss Fonts Understand Fonts
Digital Media Text Text Text in History Text came into use about 6,000 years ago.
Text and Image Pertemuan 01 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.
Text dan Hypertext Pertemuan 3 Matakuliah: T0732 / Sistem Multimedia Tahun: 2007.
Chapter 6 Placing Type in an Image. Chapter Lessons Learn about type and how it is created Change spacing and adjust baseline shift Use the Drop Shadow.
Multimedia Elements – Text and Graphics. Text in Multimedia Applications Of all multimedia elements, text is the easiest to manipulate General guidelines:
7 Selecting Design and Color Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2.
Text in multimedia Why would course designers like text? The most inexpensive media to develop Least overhead in storage/transmission But text creation.
Categories TYPE of Text is the most essential ingredient in design communication. With type you communicate in two distinct ways. The first message your.
Multimedia: Making it Work
Interactive Multimedia Development
Unit 4 – Multimedia Element: Text
Introduction to Interactive Media 06: Text: Static Interactive Media Component.
1 CP586 © Peter Lo 2003 Multimedia Communication Font and Text.
Multimedia Building Block : Text
Text Text. Multimedia Elements u Text u Graphics u Animation u Sound u Video.
TYPOGRAPHY.
Text. Table of Content 1.Introduction of text. 2.Text elements. 3.Types of text. 4.Fonts and typefaces. 5.Font Terminology. 6.Classification of fonts.
Chapter 2: Text.
Typography Terms. o.php?viewkey=d26eb03e91d5741a4a 3b.
Chapter 7 Web Typography Principles of Web Design, 4 th Edition.
All of the following terms describe parts of a font that give the eye visual clues to decoding the letters while reading. Many of these terms stem from.
Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 10 This presentation © 2004, MacAvon Media Productions Characters & Fonts.
Chapter 4-Text.
B.Sc. Multimedia ComputingMedia Technologies Character Representation & Font Technology.
COM 205 Multimedia Applications St. Joseph’s College Fall 2004.
CHAPTER FIVE TEXT.
1 Pertemuan 03 Text and Hypertext Matakuliah: T0553/Sistem Multimedia Tahun: 2005 Versi: 5.
Introduction to Interactive Media Interactive Media Components: Text.
Text dan Hypertext Pertemuan 05 & 06 Matakuliah: O Computer / Multimedia Tahun: Feb
Copyright 2002, Paradigm Publishing Inc. CHAPTER 2 BACKNEXTEND 2-1 LINKS TO OBJECTIVES Formatting Characters Formatting Characters Changing Fonts Character.
Adobe Photoshop CS Design Professional AN IMAGE PLACING TYPE IN.
Chapter 5 Placing Type in an Image. Chapter Lessons Learn about type and how it is created Change spacing and adjust baseline shift Use the Drop Shadow.
Anlab ( ) Kim, Yangjung Characters & Fonts.
Text. Text came into use about 6,000 years ago Text in History.
1 MULTIMEDIA TECHNOLOGY SMM 3001 MEDIA - TEXT. 2 What is Text? the basic element of most multimedia the basic element of most multimedia consisting of.
Typography Graphic Design Fundamentals
Chapter 3 - Text Revamped by Hamzah Asyrani Sulaiman.
Text and Image Session 02 & 03 Subject: L0182 / Web & Animation Design Year: 2009.
Business and Computing Deanery Multimedia Week 7 Text.
Microsoft® Word Work with fonts. 1 Apply basic character formatting. 2 Work with the Font dialog box. 3 Repeat and copy character formats. 4 Change.
Week - 9 Multimedia: Text element. Overview Importance of text in a multimedia presentation. Understanding fonts and typefaces. Using text elements in.
Chapter 6 Placing Type in an Image. Chapter Lessons Learn about type and how it is created Change spacing and adjust baseline shift Use the Drop Shadow.
UNIT 4 - TYPOGRAPHY Digital Communications I. 3-D  an effect that gives the illusion of depth.
Computer Engineering and Networks, College of Engineering, Majmaah University Text in multimedia Mohammed Saleem Bhat CEN-318 Multimedia.
Characters & Fonts Digital Multimedia, 2nd edition
SCA Introduction to Multimedia
DFP 4113 MULTIMEDIA TECHNOLOGY
Basic Desktop Terminology
Chapter 2: Text.
Multimedia Systems and Applications
THE USES OF TEXT IN MULTIMEDIA
Text.
Chapter 2: Text Eyad Alshareef Eyad Alshareef.
Text and Hypertext Kuliah 03
Text and Hypertext Kuliah 03
Desktop Publishing Terminology
Text and Hypertext Kuliah 03
Characters & Fonts Digital Multimedia, 2nd edition
Text and Hypertext Kuliah 03
Assist. Lecturer Safeen H. Rasool Collage of Science Department of IT
SCA Introduction to Multimedia
SCA Introduction to Multimedia
Layout Terms Visual Hierarchy
UNIT-2 Text.
SCA Introduction to Multimedia
Presentation transcript:

Text

Table of Content Introduction of text. Text elements. Types of text. Fonts and typefaces. Font Terminology. Classification of fonts. Font styles. Font types. Bitmapped and Vector fonts. Font appearance. Font mapping. Guidelines of choosing fonts. Efficient use of text.

Introduction Text is obviously the simplest of data types and requires the least amount of storage. Text in the form of words, sentences, and paragraphs is used to communicate thoughts, ideas, and facts in daily life. Text may not be as visually exciting as some of the other media types, but it often conveys essential and precise information.

…continued Multimedia applications depend on text for many things including: Page titles Delivering information in form of multiple sentences / paragraphs Labels for pictures Instructions for operating the application Text is probably the most common form of information delivery.

Text elements Alphabet characters Numbers Special characters A – Z and a – z Numbers 0 – 9 Special characters Punctuation (. , ; “ ‘ ! : - /) Signs ($ + - = @ # % ^ & *)

Obtaining Text Text can be captured in following ways: Keyboard Mouse Scanner (OCR) – Optical Character Recognization* * designed to translate images of handwritten or typewritten text (usually captured by a scanner) into machine-editable text.

Types of Text Unformatted text (Plaintext) Formatted text (Richtext) comprise strings of fixed-sized characters from a limited character set. Formatted text (Richtext) comprise strings of characters of different styles, size and shape together with tables, graphics and image inserted at appropriate point. Example: Rich Text Format (RTF), HTML, .doc

Types of Text Hypertext It enables the integrated set of documents (each comprising formatted text) to be created which have defined linkages between them.

Unformatted Text This is a set of characters that are available in the ASCII (American Standard Code for Information Interchange) character set. This is one of the most widely used character sets and the table includes the binary codeword used to represent each character. Basic ASCII character set

ASCII Code ASCII Code Each character is represented by a unique 7-bit binary codeword, meaning that there are 128 (27) alternative characters. In addition to all normal alphabetic, numeric and punctuation characters, the total ASCII character set also includes control characters such as BS (backspace), DEL (delete), etc.

ﺍﺏﺙﺚﺝﺡﺥ αβγδεζ …continued ¢  ä ü Extended Character Set (ISO Latin-1) Extra 1 bit in ASCII is filled with ANSI (American National Standards Institution) characters (256 characters) Unicode Unicode is the universal standard for multi language characters published by Unicode Consortium. Unicode 4.0 standard covers 96,382 characters using 16 bits uniform encoding. Unicode can support a wide variety of non-Roman alphabets including Han Chinese, Japanese, Arabic, Korean, Bengali, and so on. Extended Characters ¢  ä ü Unicode Characters ﺍﺏﺙﺚﺝﺡﺥ αβγδεζ

Formatted Text An example of formatted text is that produced by most word processing packages. It enables documents to be created that consist of characters of different styles and variable size and shape, each of which can be plain, bold, or italicized. In addition, a variety of document formatting options are supported to enable an author to structure a document into chapters, sections and paragraphs, each of which with different headings and with tables, graphics and pictures inserted at appropriate points.

Hypertext Hypertext is a type of formatted text that enables a related set of documents, normally referred to as pages, to be created which have defined linkage points, referred to as hyperlinks, between each other. Figure 2.3. Example of an electronic Document written in hypertext

Fonts & Typefaces Font Typeface Collection of characters of different sizes and styles of a typeface. Example : Arial 18 point Bold Typeface Graphic representation or the shape of characters. A typeface is a family of related fonts Example : Bookman Old Style

337 Font Terminology Baseline – the line on which the bases of characters are arranged Leading – the distance between successive baselines x-height – the distance between the baseline and the top of a lower-case letter x Ascenders/descenders – strokes that rise above the x-height/drop below the baseline Kerning – adjustment of space between certain pairs of letters (e.g. AV) to make them look more uniform

Font Terminology Tracking - Spacing between characters. Serif - Flag or decoration at the end of a character stroke.

Classification of Fonts 327–330 Classification of Fonts Spacing: monospaced (fixed width)/proportional Serifs: serifed/sans serif Serifs are the small strokes added to the ends of character shapes in conventional book fonts Shape: upright/italic/slanted Slant is a vertical shear effect, italic uses different glyph shapes with a slant Weight: bold/normal/light

FD xhp This example shows the Times New Roman font Ascender Cap height X-height FD xhp Point size Serif Descender Baseline

336

BD hp Av Reading line one. Reading line two. Kerning Leading Serif Tracking Ascender Kerning Descender Leading

Av v A Tight Loose tracking tracking Tracking and Kerning Unkerned

Serif and sans serif fonts Fonts can broadly be said to be of one of two types: serif or sans serif A serif is the decorative ‘bit’ at the end of a letter stroke Serif fonts have them and sans serif fonts don’t (‘sans’ being French for ‘without’) Serif fonts are usually used for printed media or documents that have large quantities of text. This is because the serif helps guide the reader’s eye along the line Sans Serif fonts are considered better for computer displays because of the sharper contrast.

Times New Roman Bookman Old Style Monotype Corsiva Courier New Arial Serif fonts Sans serif fonts Times New Roman Bookman Old Style Monotype Corsiva Courier New Arial Tahoma Impact Verdana

Font Styles Bold, Italic, Underline, Strikethrough, superscript or subscript, embossed or shadow Colours Some common fonts used today include: Arial (or Helvetica) A sans serif font Times New Roman (or Times Roman) A serif font Courier New (or Courier) A monospaced font (all characters have the same width)

Font Types PostScript Page Description Language Uses mathematical construct Allows the character to be scaled bigger/smaller; able to be finely printed. Needs special software to display Needs licensing Example: Adobe’s PostScript TrueType TrueType is joint effort by Apple & Microsoft. Uses mathematical construct. In addition to printing smooth chars, it allows chars displayed on low-resolution monitors. No special software needed to display No licensing needed Bitmap Images of characters Requires a lot of memory

Bitmapped and vector fonts Fonts can either be stored as bitmapped or vector Bitmaps require one bitmap for each size File size increases as more sizes are added. Require a lot of memory. Vector fonts can draw any size by scaling the vector drawing primitives mathematically File size is much smaller than bitmaps. TrueType and PostScript are vector font formats.

Bitmapped and vector fonts A bitmapped font A vector font

Font Appearance Rasterization Font is drawn on the screen one pixel at a time Jaggies are the jagged edges you see when a bitmapped image is resized It is a consequence of the underlying array of pixels from which the image is composed Anti-aliasing Blend the font into the background color. This technique minimizes the jagged edges making for smoother overall appearance. It substitutes additional pixels in other colours to fool the brain into thinking it is seeing continuous lines

Font mapping Some fonts installed in your machine may not be available in other user’s machine. If the fonts that you used is not available in other people’s computer, a default font will be used for substitution. Specifying which font to be substitution is called font mapping.

CAN YOU READ THIS? IF NOT IT IS BECAUSE EVERYTHING IS WRITTEN IN CAPITAL LETTERS. THEREFORE THIS SHOULD ALWAYS BE AVOIDED. Can you read this? It is easier because people will recognize shape of characters easier this way.

Meaningful words Text is use for titles and headlines, menus, navigation, and content. Too much text – crowded or ‘busy’ screen Too little text – too many page Words must be chosen carefully

Guideline of choosing fonts For small type, do not use decorative fonts because in small size they are unreadable. Use as few typefaces as possible but you can vary the size and style using italic or bold. Adjust the leading or line spacing where you have a lot of text for easier reading. Vary the size of a font according to the importance of the message you are delivering. Use bold or emphasize text to highlight ideas or concept.

Guideline of choosing fonts In large headlines, adjust the spacing between letters (kerning) so that the spacing feels right. Use anti-aliasing for big fonts but turn off anti-aliasing for small fonts. Surround headlines with white space Distinguish text links with colors and underlining Use drop caps and initial caps

Efficient use of text Positive ways to communicate message by less text and other ways are Hypertext Pop-up Messages Drop-down Boxes Scroll Bars Buttons for interaction Symbols & Icons

Hypertext Linking a hypertext or hot word / hotspot to another part of the title that displays more text Very effectively used to retrieve info from databases Helps user in decision making User can process information faster and strategically

Pop-up messages Another type of Hot word used to save space Click on a hot word or a text, a small message pops up explaining in brief about the hot word Remains for some time and vanishes after programmed duration or by a mouse click

Drop-down boxes Gives the user a set of choices and reduces his strain of decision making That is making choice in a easier way and limited according to the system’s capabilities Choosing may lead to another page with text or may retrieve info from database

Scroll Bars Usually not a good practice to use scroll bars Mostly irritates the user Important messages should not be posted using scrollbars, since the user may not notice it

Buttons The concept of hyper linking remains the same Change in appearance by using a button with text to glow on it rather than using a hyper text

Symbols & Icons Using symbols or icons in-order to express a meaning Eg: A floppy icon in MS Word represents “Save”, expressing to save the document

Summary Text is the simplest of data types and requires the least amount of storage. 3 categories of text elements: Alphabet characters, Numbers, Special characters 3 types of text: Unformatted text, Formatted text, Hypertext Font is the collection of characters of different sizes and styles of a typeface. Typeface is the graphic representation or the shape of characters. Font Terminology: Baseline, Leading, x-height, Ascenders/Descenders, Kerning, Tracking, Serif Classification of fonts: Spacing, Serifs, Shape, Weight

Summary Font types: PostScript, TrueType, Bitmap 9. Bitmaps require one bitmap for each size. File size increases as more sizes are added. Require a lot of memory. Vector fonts can draw any size by scaling the vector drawing primitives mathematically. File size is much smaller than bitmaps. Rasterization refers that font is drawn on the screen one pixel at a time. Anti-aliasing blends the font into the background colour to minimize the jagged edges making for smoother overall appearance.

Summary Font mapping specifies which font to be substitution if the fonts that you used is not available in other people’s computer. 14. Positive ways to communicate message by less text: Hypertext, Pop-up Messages, Drop-down Boxes, Scroll Bars, Buttons, Symbols & Icons.