Full Page for Printing

Text Formats: Bold and Italic

Typography -- the size and appearance of body type is an important readability, emphasis, style, and tone consideration to graphics designers. Research indicates, for example, that INFORMATION WHICH IS TYPED OR PRINTED IN ALL CAPITALS is actually more difficult to read in large chunks than the same information typed or printed in upper and lower case, and, of course, "Internet-iquette" actually defines ALL CAPS as SHOUTING!

Anyone thinking about designing a Web page typically turns to graphics design elements in print media for hints and examples of good page design. One of the best resources on this topic is Lynda Weinman's book, <designing web graphics>, from New Riders in Indianapolis.

It is difficult to not notice Web pages designed with multiple type sizes and colors, splashy type fonts pointing to carefully positioned artwork and photographic images. However, Weinman's comparisons of a sampling of the most common browsers in use -- from the many versions of the ubiquitous Netscape and Mosaic to the proprietary applications offered by the commercial online services -- offer valuable insights into the difficulties Web designers face when deciding between simple text pages and complicated, but more attractive, pages with images and tables.

Unlike a magazine page, the appearance of a Web page is actually controlled by the receiving browser user. To illustrate the impact on page design of this critical element, explore your browser for a tool-bar or command-line Options window: Search around under General Preferences for a Fonts preference. See if you can change the size at which the Base Font displays from 12-point (the typical default) to 10-point (smaller) or 14-point (larger). Notice what happens to the size, not only of the text, but also of the headings. Find a size -- or even another font style -- that is comfortable to you -- you are the browser user receiving the page!

However, the designer can specify the relationships between different body sizes and the headings, as well as specify bold and italic styles for emphasis or organization. This capability is demonstrated by the following text:

HTML Coding	Output
<H1>Headline</H1> <H2>Sub-Head</H2> Body text with <I>italics</I> and <B>boldface</B> text elements. <H2>The Next Sub-Head</H2> The next bit of body text, and so.	Headline Sub-Head Body text with italics and boldface text elements. The Next Sub-Head The next bit of body text, and so.

HTML Coding

Output

<H1>Headline</H1>
<H2>Sub-Head</H2>
Body text with italics and boldface text elements.
<H2>The Next Sub-Head</H2>
The next bit of body text, and so.

Headline

Sub-Head

Body text with italics and boldface text elements.

The Next Sub-Head

The next bit of body text, and so.

There are two standards for both the italic and the boldface containers:

word or phrase or

word or phrase = boldface

word or phrase or

word or phrase = italic type style.

The tag container pairs for boldface and italic are "structural" tags and and , are "rendering" tags. Both conventions are HTML 3.2 standard.

Both the boldface and italic can be nested to create Bold Italic. Just be sure not to cross the open-close pairs:

Bold Italic

Back to...TOP Back to...Designing Web Pages

Left-Center-Right

So far, all of the HTML elements have worked off the left margin: headings, paragraphs and line breaks. Yet you have seen Web pages with centered text and columns of type. How is it done?

Normal or Flush Left Heading

Centered Heading

Flush Right Heading

The centered and flush right headings above are accomplished by adding an alignment attribute or rendering "hint" to the opening heading tag as follows:

HTML Coding	Output
<H4 ALIGN="center">Centered Heading</H4> ...followed by a line of text across the page...	Centered Heading ...followed by a line of text across the page...
<H4 ALIGN="right">Flush Right Heading</H4> ...followed by a line of text across the page...	Flush Right Heading ...followed by a line of text across the page...

In addition, by adding the same left-center-right rendering hints as attributes to the tag, designers can accomplish appearance control over text display. The following code...

HTML Coding	Output
<P ALIGN="center">This is a centered paragraph. <BR> All lines within the container will be centered <BR> on the midpoint of the display.</P>	This is a centered paragraph. All lines within the container will be centered on the midpoint of the display.
<P ALIGN="right">This is a right margin paragraph. <BR >All lines within the container will be flush right <BR >to the right margin of the display.</P>	This is a right margin paragraph. All lines within the container will be flush right to the right margin of the display.

Notice, and this is important, that when the align attribute is added to the paragraph tag, must be considered a container. That is, must be paired with the slash tag in order to "turn off" the attribute in a predictable manner.

There is a "centering" tag which works in a few browsers and in fact is so widely used that the <CENTER>...</CENTER> container pair has been included in the HTML 3.2 standards. It works on headings, text, and images.

HTML Coding	Output
<CENTER> <H3>Heading 3</H3> This is text to be centered on the page. <IMG SRC="images/oldkodak.gif" ALT="[Old_Camera]"> </CENTER>	Heading 3 This is text to be centered on the page.

Additional alignment formats may be constructed using elements of Lists and/or Tables.

Back to...TOP Back to...Designing Web Pages

and <BIG>

HTML 3.2 standards contain a set of structure containers which provide a smaller than normal and bigger than normal text size to give the Web page designer more control over the "weight" of the text elements.

This is normal text (set by the Options in the browser). The container pair reduces text size, and the <BIG>container pair</BIG> increases text size in relationship to normal. Bracket the text to be structured with the appropriate tag set.

...

Like the <CENTER>...</CENTER> container pair, ... has achieved wide-spread acceptance among Web page developers. It appears to be the graphics designers' answer to control over the size of the text fonts in any given paragraph or series of paragraphs. While it works admirably in a few browsers, it appears that the worst-case scenario with is that is simply ignored by some older browsers and recognized by the major browsers.

The following lines illustrate the ... container pair in use:

This is This is 
This is This is 
This is This is 
This is

If those lines appeared very tiny , normal , up to quite large on your display, then you can see the advantage of having such a tool. However, not all browsers display them in the same way.

In addition, there is a second non-standard convention which starts with the normal text (at whatever point it is set in the Options) and adds or subtracts from that <BASEFONT> as follows:

This is normal type. This is one font size smaller. This is two sizes larger.

The above line might display as follows:

This is normal type. This is one font size smaller. This is two sizes larger.

Notice that all three conventions allow for continuous print -- in other words, the graphics designer could change the type size within a line without forcing a line break to the margin. Also notice that all three are container tags -- they must be closed with slash tag structures.

Back to...TOP Back to...Designing Web Pages

...

The HTML 3.2 proposal adds the COLOR= attribute to the designers' tools. This enables text color changes outside the <BODY> tag. The syntax is:

This text is greenThis text is green.

This text is brownThis text is brown.

If it's not, perhaps this browser doesn't accept the attribute? If it is, consider combining with <TD BGCOLOR="#rrggbb"> and <BODY BGCOLOR="#rrggbb"> colors for design effects:

rrggbb Hex Numbers for 16 Colors
To achieve the desired color, replace "#rrggbb" in each attribute argument with "#" and the six (6) characters on the color.
This cell is colored "light grey" and aligned right. The font is dark red.
<TD BGCOLOR="#C0C0C0" ALIGN="right">
"#, cee-zero, cee-zero, cee-zero."
...
"#, eight-zero, zero-zero, zero-zero."

rrggbb Hex Numbers for 16 Colors
To achieve the desired color, replace "#rrggbb" in each attribute argument with "#" and the six (6) characters on the color. This cell is colored "light grey" and aligned right. The font is dark red. <TD BGCOLOR="#C0C0C0" ALIGN="right"> "#, cee-zero, cee-zero, cee-zero." <FONT COLOR="#800000">...</FONT> "#, eight-zero, zero-zero, zero-zero."

Douglas R. Jacobson, has a comprehensive set of color charts. See the RGB-HEX chart for a quick set of color codes. If you find this, or Jacobson's home page helpful, please e-mail him at drj2142@flash.net

Back to...TOP Back to...Designing Web Pages

Last modified: 28 February 2000
Comments and/or Questions? Carl Zager: czager@.mccsc.edu

Text Formats: Bold and Italic

Headline

Sub-Head

The Next Sub-Head

Left-Center-Right

Normal or Flush Left Heading

Centered Heading

Flush Right Heading

Centered Heading

Flush Right Heading

Heading 3

<SMALL> and <BIG>

<FONT SIZE=" ">...</FONT>

<FONT COLOR="__"> ... </FONT>