Week 2-3 Text and Hypertext PDF
Document Details
Tags
Summary
This document provides notes on text and hypertext design for multimedia. It discusses various aspects of creating engaging and effective webpages, including font selection, navigation design, and the use of hypermedia. The notes also touch on the importance of visual design and efficient user-interface elements.
Full Transcript
### Text AND HYPERTEXT At the end of this lesson... ============================ 1 --- -- 2 3 4 TEXT ---- ### Aa Bb Cc - Graphic representation - A typeface is a family - Collection of characters of different - A serif is the decorative 'bit' - Serifs are usu...
### Text AND HYPERTEXT At the end of this lesson... ============================ 1 --- -- 2 3 4 TEXT ---- ### Aa Bb Cc - Graphic representation - A typeface is a family - Collection of characters of different - A serif is the decorative 'bit' - Serifs are usually used for printed media or documents that have large quantities of text, guiding the - 'Sans' is a French word - Sans serifs are used better for computer displays because ![](media/image3.jpeg) - Ascenders / descenders are strokes that rise above the x- - Serifs are the small strokes added to the ends of character shapes in conventional book fonts - Tracking is the spacing between characters - Kerning is the adjustment of space between certain pairs of letters (e.g. AV) to make them look more uniform - Leading is the distance between successive baselines - ![](media/image10.jpeg)Baseline is the line on which the bases of characters are arranged - X-height the distance between the baseline and the top of a lowercase *x* - ![](media/image12.jpeg)Cap height is the height of capital letters - An aperture is the opening between an open counter and the outside of the letter - Letter spacing, also referred to as *tracking* by typographers, refers to an optically consistent degree of increase (or sometimes decrease) of inter-character spaces to affect visual density in a line or block of text between certain pairs of letters (e.g. AV) to make them look more uniform - ![](media/image15.png)An ascender is the portion of a minuscule letter - A descender is the portion of a letter that extends below the baseline of a font - ![](media/image17.jpeg)Condensed typefaces have set widths that are narrower - The set widths of expanded typefaces are wider than in the standard typeface TEXT AS A READING TOOL ---------------------- FONT MAPPING ------------ - Specifying which font to be substituted is called font mapping - Some fonts installed on your personal device may not come available if using - If the fonts that you have used is not available in other people's computer, a VARIOUS DESTINATION ANCHORS --------------------------- COMMERCIAL HYPERMEDIA --------------------- HYPERMEDIA AUTHORING -------------------- ##### ![](media/image23.jpeg)Authoring tools, as part of hypermedia, allow users to create interactive digital content and training materials as Learning Management System (LMS), such as Presentation Software, Video Production and Editing, Hypermedia Authoring, ### Two areas to look at - Ability to offer multiple channels for processing information - Increased creative solutions with problem solving - Greater comprehension and retention - Impact on higher level skills - Learner style ### Hypertext ![](media/image25.png) Linearity vs. Non-linearity =========================== ### Hypertext / media graph STRUCTURE - Use text for titles and headlines, menus, navigation, and content - Too much text -- crowded or 'busy' screen - Too little text -- too many page - Do not use decorative fonts in small text points as they become unreadable - Use 2 to 3 fonts of the same family (typeface) consistently - Adjust the leading (line spacing) between sentences and kerning (spacing between characters) of larger headlines for easier reading - Adjust the text size and style according to the importance of the context (textual hierarchy) - Do not overkill the text by using bold and italic at the same time - Hypertext can accent the content of a web page (i.e. avoiding red texts and - Use drop shadows minimally, avoid totally if possible - If one is using center alignment, adjust the line width of sentences (text ragging) proportionately - If going for an experimental text display: - Anti-aliasing or dithering blends colors along the edges of letters to create gentle effect - Drop caps can be useful to warrant one's attention, as the first letter - Make web pages no more than 1 to 2 screen full of text - Bring the user to the destination with as few actions as possible - Use menu text accompanied by a single action - Use meaningful words or phrases for links and menu items - Do not make text look like a hyperlink when it is not - Place vital text and menu in the top 320 pixels of a web page #### MENUS FOR NAVIGATION - content or information - menus, mouse clicks, key presses or touch screen - some indication or map of where the user is in the presentation #### BUTTONS FOR INTERACTION - Use common button shapes and sizes - Label them clearly and be sure they work #### FIELDS OF READING - People blink 3 to 5 times a minute using a computer and 20 to 25 times a minute reading a book - This reduced eye movement causes fatigue, dryness - Try to present only a few paragraphs per page with legible typefaces - Display whole paragraph on screen and avoid breaks in between paragraphs #### PORTRAIT VS. LANDSCAPE - Put the text in a scrolling field (web browser) - Put text into a single field or graphic image in a project widow - Let the user move up and down based on command - Break the text into fields that fit on monitor-sized pages and design control buttons to flip through the pages