Chapter 2: Text Eyad Alshareef Eyad Alshareef

Topics: Definition of Text Text elements Text usages Font Working with text Eyad Alshareef

Temporal & Non Temporal Media Refer to Multimedia elements. Two Media types:Temporal and Non-Temporal Temporal Media The media has an associated time aspect. Example: its view changes with respect to time. Examples: Audio, video, animation, music etc. Eyad Alshareef

Temporal & Non Temporal Media Also known as a static media. It has the same representation regardless of time Examples: texts, graphics, paintings, book etc Multimedia applications are typically composed of both media Eyad Alshareef

Definition of Text Text is words and symbols in any form, spoken or written, are the most common system of communication. Text is used in most Multimedia applications. With multimedia technology, text can be combined with other media in a powerful and meaningful way to present information and express moods. Text is the easiest to manipulate. Eyad Alshareef

Text Elements Based on creating letters, numbers and special characters. Text elements can be categories into: Alphabet characters : A - Z Numbers : 0 - 9 Special characters : Punctuation [. , ; ‘ …] , Sign or Symbols [* & ^ % $ £ ! /\ ~ # @ .…] Also known Character Sets May also include special icon or drawing symbols, mathematical symbols, Greek Letter etc. Eyad Alshareef

Text Usages Heading / Title Bullet / list Paragraph Scrolling text Navigation Text as graphics Eyad Alshareef

Eyad Alshareef

Typefaces, Fonts and Points The graphic representations of the alphabet, numbers and special character. Usually vary by type sizes and styles. FontsParticular size of typefaces The sizes are measured in points - One point is 1/72” or 0.0138 inc” Measuring distance from the top of a capital letters (e.g. ‘A or P’) to the bottom of a descenders (e.g. ‘y , ‘p’ , ‘q’). Eyad Alshareef

Font A design for a set of characters. A collection of characters of a single size and style belonging to a particular typeface family. There is some basic consistency of look that makes the individual characters, regardless of size and style variations, part of the same family. Eyad Alshareef

Eyad Alshareef

Eyad Alshareef

Font Size Users may have difficulty reading small text, seeing small objects or targeting small icons and controls with a mouse. Small fonts can cause eye-strain and make reading difficult or impossible for many users. Screen elements with fixed sizes may be too small on high-resolution displays or exceed the screen size on small, hand-held devices. Eyad Alshareef

Fonts Effects A numbers of effects that are useful for bringing viewer’s attention to content: Case: UPPER and lower letter Bold, Italic, Underline, superscript or subscript Embossed or Shadow Colours Strikethrough Eyad Alshareef

Font Style Bold Underline italic Refers to whether text is bold, italicized, underlined, or any combination of the three The term font styler efers to the particular style of textual characters. Styles are usually standard. Bold Underline italic Eyad Alshareef

Font Style-Bold Use bold fonts for emphasis, to highlight important points. Eyad Alshareef

Font Style- Bold Whole paragraphs of text set in bold type are hard to read. Eyad Alshareef

Font Style-Bold In some instances it is useful to readers to have titles, proper names, or key terms in a manual within a block of copy highlighted with bold for ease in scanning. Eyad Alshareef

Font Style -Italic Use italics to emphasize small amounts of text within a block of text. Avoid long passages in italics. It is harder to read than normal roman faces. Eyad Alshareef

Font Style -Italic When they are not a common part of your language, italicize foreign words and phrases. Eyad Alshareef

Font Style- Underline Underlines are appropriate for section headings and some bibliographical notations. In web browsers, default settings typically distinguish hyperlinks by underlining them. Eyad Alshareef

Font Categories Fonts can be characterized as Serif Sans serif Decorative Eyad Alshareef

Font Categories -Serif Serif characters have a little "flag" or decoration at the end of the letter stroke. Serif fonts are usually used for documents or screens that have large quantities of text This is because the serif helps guide the reader’s eye along the text Eyad Alshareef

Font Categories –San Serif Sans Serif (sans is French for "without") characters don't have these decorations. Eyad Alshareef

Types of Fonts For computer displays, Sans Serif fonts considered better because of the sharper contrast. Examples of San Serif fonts Times New Roman Bookman Rockwell Light Courier New Century Century Gothic Arial Comic Sans MS Impact Tahoma Examples of Serif fonts Eyad Alshareef

FD xhp Text Characteristics This example shows the Times New Roman font Ascender Capital Height x-Height FD xhp Point size p -Height Serif Descender Eyad Alshareef

Tracking, Kerning and Leading Tight tracking Loose tracking Av v A Kerned Unkerned Eyad Alshareef

Tracking, Kerning and Leading Reading Line One Leading Ascender : an upstroke on a character Descender : the down stroke below the baseline of a character Leading : spacing above and below a font or Line spacing Tracking : spacing between characters Kerning : space between pairs of characters, usually as an overlap for improvement appearance Eyad Alshareef

Paragraph Alignment The arrangement of text relative to a margin. Four types of alignment: Flush left Flush right Centered Justified Eyad Alshareef

Paragraph Alignment –Flush Left The text is aligned along the left margin, also known as ragged right. In English and most European languages where words are read left-to-right, text is often aligned ‘flush left’, meaning that the text of a paragraph is aligned on the left-hand side with the right-hand side ragged. This is the default style of text alignment on the World Wide Web for left-to-right text. Eyad Alshareef

Paragraph Alignment –Flush Right The text is aligned along the right margin, also known as ragged left. In other languages that read text right-to-left, such as Arabic and Hebrew, text is commonly aligned ‘flush right’. Additionally, flush-right alignment is used to set off special text in English, such as attributions to authors of quotes printed in books and magazines, and is often used when formatting tables of data. Eyad Alshareef

Paragraph Alignment -Centered Text is aligned to neither the left nor right margin; there is an even gap at the end of each line. This is often used for the title of a work, and for poems and songs. As with flush-right alignment, centered text is often used to present data in tables. Eyad Alshareef

Paragraph Alignment -Justified Text is aligned along the left margin, and letter- and word-spacing is adjusted so that the text falls flush with the right margin, also known as full justification. Eyad Alshareef

Sources - Font Software: Word processor Image Editor Hardware: Scanner OCR-Optical Character Recognition Other: Internet Eyad Alshareef

Working with Text Following are some considerations and guidelines to keep in mind when working with text : Be Concise Use Appropriate Fonts Make it Readable Consider Type Styles and Colors Use Restraint and be Consistent Eyad Alshareef

Working with Text -Be Concise Text should be kept to a minimum unless the application includes a great deal of reference material. Reading volumes of text on a computer screen is difficult and tiring. From a design standpoint, text should fill less than half the screen Eyad Alshareef

Working with Text -Use Appropriate Fonts Fonts are useful in focusing attention on certain test on the screen, enhancing readability, setting a tone (serious, lighthearted), and projecting an image (progressive, conservative). When choosing a font, always consider the objectives and the audience. Eyad Alshareef

Working with Text -Use Appropriate Fonts Eyad Alshareef

Working with Text -Make it Readable Although a decorative font maybe attractive but it may also hard to read. The size of text depends on the application. Heading and subheadings are used to attract attention and provide the user with quick identification of the screen contents, while text blocks provide the substance. Eyad Alshareef

Working with Text -Make it Readable Suggested guidelines are as follows : Eyad Alshareef

Working with Text -Make it Readable Eyad Alshareef

Working with Text -Consider Type Styles and Colors Three common type styles are bold, italic, and underline. These styles are often used for emphasis in print materials. In multimedia applications, however, there are more often used to indicate hypertext, or hot words. Eyad Alshareef

Working with Text -Consider Type Styles and Colors Contrast between the lettering and background also is a very important factor in legibility and readability. Eyad Alshareef

Working with Text -Use Restraint and be Consistent Although it may be tempting and certainly easy to use various typefaces, sizes, and styles, it is important to exercise restraint. Be careful to avoid a busy and difficult to read design resulting from too many fonts and type styles on one screen. In addition, try to maintain consistency in the use of text. Eyad Alshareef

Bitmapped and vector fonts Fonts can either be stored as bitmapped or vector graphics Bitmaps font depend to the size and the pixel numbers - File size increases as more sizes are added 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

Text Data Files The common data encoding schemes for text are: Plain text (ASCII) is text in an electronic format that can be read and interpreted by humans Rich text is similar but it also embeds special control characters into the text to provide additional features Hypertext is an advance on rich text which allows the reader to jump to different sections within the document or even jump to a new document

Text Data Files Plain text This is plain text. It is readable by humans. It can contains numbers (01234) and punctuation (.,#@*&) since it uses the ASCII character set. Rich text This is <bold>rich text</bold>.<br><center>It is also readable by humans but contains additional tags which control the presentation of the text.</center> Hypertext This is <a href=“http://www.w3c.org/”>hypertext</a>. It uses the rich text format shown above but adds the ability to hyperlink to other documents.<hr><img src=“logo.gif”>

Eyad Alshareef