Chapter 5 Working with Text Incorporating Text Text

Chapter 5 Working with Text

Incorporating Text • Text refers to written words and can be: – plain text, which has no formatting applied. – formatted text (or rich text), which has formatting applied. – enriched text, which has formatting applied specifically for email messages.

Incorporating Text • Type is the term you use when you’re including text characteristics such as font name, size, color, or style.

Incorporating Text • Typography is the art of placing and arranging type. It includes choosing properties such as typefaces, styles such as bold and italic, size, color, alignment, spacing, and other formatting choices that affect text appearance. • Typefaces are designs, like Times New Roman or Arial, that type designers create.

Incorporating Text • Typefaces often come in font families, groups of similarly designed type sets. • Fonts, as opposed to typefaces, are the complete character sets of a single style of a particular typeface.

Incorporating Text • Your computer operating system includes a font library; individual applications include sets of fonts; and websites such as fonts. com offer fonts for downloading. • The fonts. com website alone has over 167, 000 fonts available.

Incorporating Text Fonts. com website

Incorporating Text • Unless you use license-free fonts (freeware), fonts are protected by copyright law. • Even though a font is already installed on your computer, you can’t assume you can freely embed it in a document, especially a document that will be used commercially.

Incorporating Text • To find the copyright information about a font, you can select the font’s filename, and rightclick Properties (Win) or Ctrl-click Get Info (Mac).

Incorporating Text Font properties listed Font name

Incorporating Text • It’s tempting to use unique fonts, but there are times when it’s best to stick with standard fonts. • If you’re creating a document for printing, any font that’s installed on your computer system and accessible through the application menu will print correctly, as long as the printer can read the font.

Incorporating Text • If you’re going to create a PDF, the font will be embedded in the document. • If you’re formatting text that will be published on a website, you’ll want to stick to standard fonts that will likely be installed on most users’ computers, unless you’re using embedded fonts.

Incorporating Text Font embedding warning Adobe Illustrator font embedding notification

Incorporating Text • When a document is created on one computer and then opened on a different computer, sometimes the application will be unable to find the fonts used, which are then known as missing fonts. • Many applications, such as In. Design and Photoshop, will highlight or otherwise let you know that they can’t find the requested font.

Incorporating Text • When this happens you have two choices: – you can either choose to substitute the missing font with a different font. – you can note the name of the missing font, download it, and install it. • Some programs will automatically substitute missing fonts with default fonts.

Incorporating Text • When you’re concerned about being able to display a font correctly on all computers, one option, besides using standard fonts, is to create outlines from the type. • This converts the text to vector graphics, essentially creating shapes from the individual characters so they’ll be “drawn” using mathematical equations rather than displayed as type.

Incorporating Text Comparison of editable text and text converted to outlines

Incorporating Text • Editing refers to changing content, and formatting refers to changing the appearance of content. • For example, using a spell check command is an editing function, and changing a font color is a formatting function.

Incorporating Text • The Dreamweaver Find and Replace dialog box includes options for entering search parameters such as where you want to search and what you want to search.

Incorporating Text Save Query button Find and Replace dialog box in Dreamweaver Load Query button

Incorporating Text • Most text editors also have a tool that creates text hyperlinks, especially useful for text in web pages or PDF documents. • A PDF (Portable Document Format) document is one that’s been saved using a special file format that allows it to be read on any computer using a free application called Adobe Reader.

Incorporating Text • You can create PDFs using an application called Adobe Acrobat. • You can also create them from files native to many other applications, such as Adobe Photoshop or Microsoft Word.

Incorporating Text • Most applications that include text editing capabilities have character and paragraph settings formatting text. • The Character panels and Paragraph panels in Adobe Photoshop, Flash, Illustrator, and In. Design is where these settings can be formatted.

Incorporating Text Illustrator In. Design Flash Photoshop Character panels in Photoshop, Flash, Illustrator, and In. Design

Incorporating Text Illustrator Photoshop Flash Paragraph panels in Photoshop, Flash, Illustrator, and In. Design

Incorporating Text • Post. Script is a page description language that stores glyphs as outlines or shapes, rather than as fixed-resolution bitmaps. • This is similar to the different ways image files are created.

Incorporating Text • Bitmap images are created pixel by pixel. • Vector images are created using mathematical formulas. • Glyphs are character shapes on a page or screen. Post. Script-derived glyphs can be reliably created at any resolution, so fonts will print clearly no matter what point size is specified.

Incorporating Text • The three most common font formats are: – True. Type: created by Apple – Open. Type: created by Microsoft – Post. Script: created by Adobe

Incorporating Text • To type web page text, most people use a word processing program like Microsoft Word. • When you create text using a word processor, rather than typing the text directly in a web editor such as Dreamweaver, it’s important that you not format the text. • Instead, apply all formatting using CSS in the web editor.

Using Type • Fonts are classified in two ways: sans-serif and serif. • Sans-serif fonts are block-style characters often used for headings and subheadings. • Examples of sans-serif fonts are Arial and Verdana.

Using Type • Serif fonts are more ornate, with small extra strokes, or “tails, ” at the beginning and end of each character and are considered easier to read in printed materials because the strokes help to lead your eye from character to character. • Examples of serif fonts are Times New Roman and Georgia.

Using Type • Regardless of which font or font classification you use, a good rule of thumb is to limit a website to no more than three fonts. • Fonts help us to express the message we want to convey to our users.

Using Type Message emphasized through type size, style, and color

Using Type • Fonts are also classified by their formats. • A font’s format provides the instructions for how a digitized font is printed on paper, presented on screen, or both.

Using Type • With Post. Script-derived glyphs, the document will always look crisp and clean. • To some extent, each of the following font formats uses Post. Script: – Type 1 – True. Type – Open. Type

Using Type • Open. Type fonts are: – the most sophisticated of the three font technologies. – were developed through a joint venture by Adobe and Microsoft. – based on True. Type fonts.

Using Type • Several additional features of True. Type fonts: – They are cross-platform compatible. – They can support expanded character sets and languages, because they contain more variations of glyphs in a single font set, including nonstandard ones like old-style figures and fractions. – They have more glyph variations. – They provide better control over type layout and design.

Using Type • It’s easy to identify a font’s format on an Adobe application menu. • On a font list, you’ll see a small icon to the left of the font name that indicates the font type.

Using Type Indicates an Open. Type font Indicates a True. Type font Indicates a Type 1 font Viewing Font format icons in a Font menu

Using Type • In addition to the three principal font types, Web Open Font Format (WOFF) was developed by the Mozilla Foundation, in concert with several other organizations, to use for text on the World Wide Web.

Using Type • Currently, the following browsers support the WOFF format: – Firefox Version 3. 6 and up – Internet Explorer Version 9 and up – Google Chrome Version 5 and up – Safari Version 5. 1 and up

Writing Screen-Based Text • Jargon is language that is specific to particular groups or professions. • Slang is similar to jargon, but considered very informal. • Both slang and jargon can be misunderstood by users unfamiliar with their meanings.

Writing Screen-Based Text • If you paste your page text into Microsoft Word, you can easily evaluate it with two tests: – the Flesch Reading Ease Test – the Flesch-Kincaid Grade Level Test

Writing Screen-Based Text • To do this, open the Word Options dialog box, click Proofing, make sure Check grammar with spelling is checked, then click the Show readability statistics check box to select it. • After you use the Check Spelling and Grammar command, the Readability Statistics dialog box will display the results for your document.

Writing Screen-Based Text Passive sentences should not be higher than 15% Flesch Reading Ease should be above 60% Readability Statistics dialog box in Microsoft Word Grade level should be 5 to 9 for general readers

Writing Screen-Based Text • Follow these accepted guidelines to make it as readable and usable as possible: – – – – Use attention-grabbing headings and blurbs. Use bulleted and numbered lists. Use embedded links. Use descriptive meta tags. Provide plain text link navigation equivalents. Incorporate comments in your HTML code. Use text placeholders.

Writing Screen-Based Text • Rollover buttons are sets of buttons that change appearance when the user points to, presses, or clicks them. • Comments are notes that you can add to a page’s HTML code that don’t appear on the page itself.

Writing Screen-Based Text Comments are preceded by an exclamation mark and enclosed in beginning and ending tags Using comments to document code

Writing Screen-Based Text • CSS are made up of sets of formatting attributes called rules, which define the appearance and placement of page content. • Style sheets are classified by where the code is stored: in a separate file (external style sheet), as part of the head content of an individual web page (internal or embedded style), or as part of the body of the HTML code (inline style).

Writing Screen-Based Text • A Class type can be used to format any page element. • An ID type and a Tag type are used to redefine an HTML tag. • A Compound type is used to format a selection. You define the type of rule when you create it.

Writing Screen-Based Text Selector type choices for a new rule New CSS Rule dialog box

Writing Screen-Based Text • Using CSS saves an enormous amount of time. • Being able to define a rule and then apply it to page elements across the site means that you can make hundreds of formatting changes quickly.

Writing Screen-Based Text • Style sheets also create a more uniform look from page to page and they generate much cleaner code. • Clean HTML code is code that does what it’s supposed to do without using unnecessary instructions, which can take up memory.

Writing Screen-Based Text • Most sites today are delivered on multiple devices, so it’s smart to define separate style sheets for mobile content. • Separate style sheets will ensure that the content will appear correctly when it’s accessed on multiple devices. • You can also define separate style sheets for printed content.

Writing Screen-Based Text • Other strategies for styling your written content include the following: – – Use templates for consistency across the pages. Use good contrast between the text and background. Choose fonts designed for screen-based viewing. Include a link to a printer-friendly page for content that may be printed. – Use leading, tracking, and kerning to space text. – Limit fonts.

Working with Text Using Adobe Dreamweaver, Illustrator, and Flash • To add text to web pages using Dreamweaver, you can either type the text, use the File > Import command to import a Word document, or paste text onto a page. • It’s easier to start with text that isn’t formatted.

Working with Text Using Adobe Dreamweaver, Illustrator, and Flash • If text has been formatted, use the Property inspector to remove all prior formatting. • Once you have “clean” text to work with, use style sheets to apply all formatting; don’t use manual formatting, such as indented or centered paragraphs, or lists.

Working with Text Using Adobe Dreamweaver, Illustrator, and Flash Selected text Click to select the rule to apply Click the Targeted Rule text box to display the list of rules Using the CSS Property inspector to apply a rule

Working with Text Using Adobe Dreamweaver, Illustrator, and Flash • There are three methods for creating text in Illustrator: – type at a point – type in an area – type on a path • The method you choose to use depends on the aesthetic goal you have in mind.

Working with Text Using Adobe Dreamweaver, Illustrator, and Flash Selected Type tool and its expanded options

Working with Text Using Adobe Dreamweaver, Illustrator, and Flash • Text created in Flash is rendered within an optimized Flash movie. • Text Layout Framework (TLF) text properties together with the Flash Player 10 text engine and AIR 1. 5, aims to deliver multilingual, printquality typography for the web.

Working with Text Using Adobe Dreamweaver, Illustrator, and Flash • There are three types of text in Flash: – Static – Input – Dynamic

Working with Text Using Adobe Dreamweaver, Illustrator, and Flash • Static text displays text that doesn’t change within your Flash movie (or SWF). It’s embedded when you publish the movie. • Input text allows you to create form fields in which users enter text that can either be sent back to them or to another receiving party.

Working with Text Using Adobe Dreamweaver, Illustrator, and Flash Classic Text option Static Text option Selecting the Text tool and formatting options

Working with Text Using Adobe Dreamweaver, Illustrator, and Flash • Dynamic text displays text created in response to a variable. • It can be imported at the run time of a SWF from another source, such as a text (. txt) file outside of Flash, or a database with continuously updated content like stock quotes or the weather report.

Working with Text Using Adobe Dreamweaver, Illustrator, and Flash • Another unique feature of Flash is that it can be represented in two ways: – as font outlines (characters broken down into shapes) that are embedded within a published Flash document (SWF) – by device fonts which is a font determined by a specific font names

Working with Text Using Adobe Dreamweaver, Illustrator, and Flash • The advantage of embedded fonts is that the typographic design of a movie is uncompromised, maintaining the layout envisioned by the designer. • The disadvantage is that they increase the size of the SWF file and, depending on the font style and size, can make the text less legible than if they were rendered as a device font.

Working with Text Using Adobe Dreamweaver, Illustrator, and Flash • Flash includes three generic device fonts, and when you specify one of these fonts and then export the document, Flash Player uses the font on the user’s computer that most closely resembles the generic device font: – _sans (similar to Helvetica or Arial) – _serif (similar to Times Roman) – _typewriter (similar to Courier)