| home / programming / typography / 1 |    [previous][next] |
|
|
|
You may think that it’s impossible to use real quotation marks and apostrophes on the web and that you should just get used to seeing and using typewriter quote marks. That’s not quite true. You can set real quotes and apostrophes—it just takes a little extra effort. Typewriter quotation marks, or straight quotes, look like inch-mark notations. Professional typesetting quotation marks, or curly quotes, are custom designed for each font. It’s really easy to use professional- style quote marks: simply edit the html code of your web page to replace the existing quote mark code (or apostrophe code) with the correct code from the chart below.
The Dreamweaver “Split” view (above) shows an HTML “Code” view (top section) and a “Design” view (bottom section) of a web page. Notice the opening double quote has been changed to a professional-style curly quote and the closing double quote is an amateurish typewriter quote.
HTML editors such as Dreamweaver and FrontPage have automated features to insert these special characters quickly and easily. If your software doesn’t have an automated feature, use search-and-replace to change the quote marks in a long HTML document.
Even if you don’t spend the time to do this to all of your body copy, definitely use real quotes and apostrophes in your HTML headlines (and in graphics that include quote marks).
Every browser has a default font and size setting in its Preferences window. The default is usually 12 point Times, but you can change it to anything you prefer. Before we talk about changing the default, let’s talk about how that default can affect the text on web pages.
When you create the text for a web page in your web-authoring software, you can set text sizes and styles using basic html tags that display text relative to the size and style settings in individual browsers. The final appearance of the text will be relative to the default font style and size settings in a viewer’s own browser.
1. Click in a paragraph of text in your html editor, then choose “Default Font” for the font selection (shown below, in Dreamweaver). The default font style applies to the entire paragraph. Other viewers will see this text in their own browser’s default font and size.
2. In your HTML editor, you can apply “Heading” tags to selected text to create bold style headings or subheads. Select a paragraph, then choose one of the “Format” options “Heading 1” (the largest) through “Heading 6” (the smallest). The heading size will appear in a visitor’s browser relative to their default size. If the browser default is larger than 12, Headings 1, 2, and 3 will be relatively larger than 12, and Headings 5 and 6 will be relatively smaller (Heading 4 is the same size as the default).
3. You can select specific characters and apply relative sizes to them. Select a range of text (a few letters or a few words), then in your html editor choose a font size of “large,” “extra-large,” “small,” “extrasmall,” etc. The options in your particular software may be called something like “larger” and “smaller.” The selected text will display several point sizes smaller or larger than the visitor’s default size. The size will apply only to the selected characters or words.
The advantage of formatting the text on a web page with relative sizes is that web site visitors get to see the page text based on their own personal typographic preferences (the default font settings in their own browsers).
However, most web designers prefer to have more control over the typographic appearance of a site. You can add HTML style tags to text that override the browser’s default font settings. These tags can specify fonts, font styles, and point or pixel sizes. HTML editors provide buttons or fields to specify font sizes, bold or italic styles, and font selection.
The example above shows Dreamweaver’s Properties palette with tools for text formatting. Below, Dreamweaver’s Font pop-up menu lets you specify groups of fonts for selected text. Since the fonts listed in these groups are common to all computers, it ensures that any browser will be able to display at least one of the fonts listed in the group.
When you choose a font name or group (instead of choosing “Default Font”), the font selection overrides the default font in the browser. The HTML editor, bless its digital heart, automatically writes the appropriate HTML code.
There are several fonts installed on both Mac and Windows systems that you can use on your web pages and be fairly certain both platforms will display them as you expect: Arial, Arial Black, Comic Sans, Courier, Georgia, Impact, Symbol, Times New Roman, Verdana, and Webdings. Most of these fonts are included in group sets that can be specified when using web-authoring software (see the example at the bottom of the previous page).
You’ll notice that these fonts are rather conservative and classic—not decorative or contemporary. That’s because these fonts are used as basic computer fonts for their readability and legibility.
When you create a web page in most web-authoring programs, you can choose to use any typeface on your computer. However, this is a serious delusion. If the person viewing your web page doesn’t have that same typeface installed on his computer, your unique and beautiful font is replaced with his browser’s default font.
The resolution of a computer monitor (800 x 600, 1024 x 768, etc.) refers to the number of pixels displayed on the screen, width by depth. Monitors usually have options to choose a resolution you prefer. Higher resolutions (such as 1900 x 1620), show more image on the screen, but everything looks smaller, including the typography. Lower resolutions (such as 640 x 480) show less image on the screen, but everything (including typography) appears bigger. This is one of the uncontrollable variables of web design that affects how your web page is seen by others.
Not only do browsers show differences in how they translate HTML pages, the computer’s operating system (the platform) also affects how pages look on your screen. In the example below, the same web page is shown on a computer running the Windows operating system and on a Macintosh running Mac OS X.
The pc user on the left has set her browser to show type slightly larger than the original size. This is one of the idiosyncracies of web design—you can’t totally control what your audience will see.
Notice also that the Windows user (above) is presented with type that’s jaggy instead of smooth. Technically, we say the type is aliased (below).
The Macintosh user sees the same web page text with smooth edges. The smooth type is referred to as anti-aliased (below-right).
In spite of browser and platform differences and how they affect web typography, the best way to achieve a consistent appearance is to use Cascading Style Sheets (css) to format your text. css lets you apply specific formatting to selected text, an entire page, or an entire site. css styles have more typographic controls than HTML styles, and they usually override any local formatting preferences set by a web page visitor. Learn more about css on pages 256–260.
| 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
