| home / programming / typography / 1 |    [previous] [next] |
|
|
|
Here’s the scoop on some other type topics you will come across.
You’ve probably noticed in your browser preferences that you have two font choices to make: one for a proportional, or variable-width, font, and one for a monospaced, or fixed-width, font.
In a proportional, variable-width font, each character takes up a proportionate amount of space—a capital “W” takes up much more space than a lowercase “i” or a period, as you would expect. The text in this paragraph you are reading is a proportional font. The proportional font you choose in your browser will be your default text.
Some typographic styles on the web are known as physical styles and some are known as logical styles.
Logical styles tag text according to its meaning or desired effect. Logical styles can be interpreted differently by various browsers; if you tag selected text with the “em” tag (for emphasis), the text may display as italic in one browser, bold in another, and underlined in another.
Physical styles indicate the specific appearance of a selection, such as “bold” or “italic.” If you don’t want a browser’s setting to display a style differently, use physical styles. Physical styles will always be displayed consistently in all browsers. Examples of each tag and its function are listed below:
Physical Style Tags
|
Logical Style Tags
|
Besides quotation marks (as discussed on page 249), you might want to insert other special characters on a web page, such as © or ™.
Below are a few of the most common special characters you might want. Open the source code for your document and type the sequence for the character directly into the text in the HTML code, as shown in the example on page 249.
In print, it is against the law to underline text. Absolutely forbidden. The underline is a proofreader’s mark that means the underlined words should be italic (underlining italic text is truly redundant).
On web pages, however, the underline is a very important visual clue that certain text is a link. If you take away that visual clue, a page visitor has to manually hover the cursor over every piece of colored text to see if it’s a link or just a different color. Some designers advocate turning off the underline for design’s sake (to look more like sophisticated print design), but the underline is important for the clear communication of identifying a link.
If you decide to remove the underline, please make sure all links are instantly clear to visitors. If you use color to show links, make sure there is no other color on the page to confuse them. As Steve Krug says, “Don’t make me think.”
Style sheets in any program allow you to name and define whole sets of formatting that can be applied easily and instantly to selections of text—or to entire web pages. A style sheet typically includes a particular font, weight (bold, light, extra bold, etc.), size, leading, color, spacing, indents, etc. This information can be stored in an external file that web pages of your site refer to, or it can be included in the HTML code of an individual web page.
After you’ve created a style sheet and named it, you can apply it to selected text in your web-authoring program. Once the style sheet has been applied to text, you can change the look of the entire web site just by changing the settings in the style sheet.
“Cascading” refers to how style sheets are implemented—specifically, in what order of hierarchy various styles are applied to a web page or to a collection of web pages. There are five different levels of styles, and each level can be overridden by the level above it. The priority of the style levels cascades from one level to the next.
These are the levels of cascading priority:
1. Default browser styles (the lowest priority) can be overridden by: 2. Imported styles, which can be overridden by: 3. Linked styles, which can be overridden by: 4. Embedded styles, which can be overridden by: 5. Inline styles (the highest priority). |
Default browser styles were discussed in detail earlier in this chapter. Every individual can set preferred default fonts and font sizes for his or her own browser.
Imported styles are styles that are contained in an external style sheet. With the click of a button in your web-authoring software you can import a style sheet, which enables your web page to refer to the external style sheet for text styles.
Linked styles are style sheets that have a different url from the current web page. You can link to style sheets that you may have set up at other web addresses.
Embedded styles are styles that are placed in a single html document and affect only that document.
Inline styles are placed within a single document and usually apply to a single paragraph, sentence, or word (the code appears inline with the text it affects).
css specifications include incredible controls over how text appears in a browser. Everything from basic controls—font, size, color—to more advanced settings—line spacing, word spacing, letter spacing, weight, text transform (small caps, uppercase, lowercase)—can be written into a style sheet.
One single style sheet can contain many different styles. For example, the style sheet below contains styles for primary heads (.heads1), subheads (.heads2), the main body copy (.bodycopy), and for captions (.captions).
The attributes for each style are listed in plain English (below, left). This code can be learned easily, or an HTML editor such as Dreamweaver can automatically generate the css code when you choose options from the css Style Definition window, shown below.
| home / programming / typography / 1 | [previous] [next] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: December 5, 2005
URL: http://webreference.com/programming/typography/1
