Fonts



Text Formatting and Fonts

Introduction

This lesson is designed for you to gather information about text formatting, fonts and their use in a web environment. When you finish this lesson, you should be able to:

• Describe How Varying the Presentation of Text Can Enhance the Usability of a Web Page

• Describe How to Manipulate Font Size, Style, and Color

• Describe How a Font is Constructed

• Explain the Difference Between Serif & Sans Serif Fonts

• Explain the Difference Between Fixed Width and Proportional Fonts

• Describe How and When to Choose a Font Face

• Explain How Platform Considerations Affect the Use of Fonts

You can manipulate fonts used to display text on a web page, changing size, style, and color to give visual emphasis to key components, such as headings. You can also specify a particular font face for display.

The most commonly acceptable ways many designers manipulate fonts are through varying size, style, and color. Here are some basic issues you should know about this:

• Manipulating Font Size and Style

• Manipulating Font Color

• Background vs. Foreground Color

In many cases, the safest approach to fonts is to leave the font face alone, allowing the browser to choose a default font face to display, a default size to display it at, and a default color to use. By doing so, you allow the users to retain control of their viewing environment. The users can choose a font face and size they are comfortable with, or allow the browser defaults to remain in force.

You may have a valid reason for wanting to use a specific font face. Your client may demand it, for example. Or, in establishing the look and feel for a site, you may decide a certain font face is desirable. Keep in mind that when you specify a font face, you are partially taking control of the viewing environment away from the user.

If you decide to choose a font face for your web pages, there are some basic issues you should know.

• How a Font is Designed

• Serif & Sans Serif Fonts

• Fixed Width and Proportional Fonts

• Font Display Faces

• Anti-aliasing

• Macintosh vs. PC Font Considerations

Additional Resources

The Seven Stages of Type Appreciation [[]]

[[]]

WebMonkey:Design:Fonts [[]]

A History of the Roman Alphabet [[]]

typoGRAPHIC [[]]

Glossary of Typographic Terms [[]]

Manipulating Font Size and Style

The most basic form of font manipulation is to make certain type larger or bolder than the rest. This gives emphasis to that type because it looks more important than its neighbors. In scanning a page, the emphasized elements stand out from the others, they take priority and will be read first. Conversely, if you want to de-emphasize some information, you can make it smaller or lighter than the normal.

There are two ways to change your font size.

1. Specify the actual font size.

2. Specify the relative font size.

SPECIFY THE ACTUAL FONT SIZE where "n" is a number from 1 to 7. Font size="3" is the default font size. Numbers smaller than 3 result in a smaller font display. Numbers larger than 3 result in a larger font display.

SPECIFY THE RELATIVE FONT SIZE. or . Basically, you are specifying how many sizes larger or how many sizes smaller than the preset font size. You can use the Font tag to specify either a - (minus) or + (plus) size for the font you display. This is usually enough to achieve the effect you desire; larger sizes for headings and titles, smaller sizes for captions, etc.

Examples of relative font size: (fontsize.gif)

[pic]

There are two basic ways to manipulate font style - make the font bold and/or italic. You can also underline text, but underlining has a special meaning on a web page - it indicates a hypertext link - so it is really not a good idea to use underlining for any other purpose or it will confuse the reader.

When you make type bolder than the rest, it gives emphasis to that type because it looks more important than its neighbors.

Italics are often used in printed matter to give emphasis to a word or two within a block of regular text. Italic type is generally harder to read than regular text and the reader has to slow down to read it. Where italics work well on a printed page, they pixelate horribly on a computer screen. They clash with the natural square pixel grid and are best avoided on web pages, certainly at smaller sizes.

HTML Tags That Support This

Font size. This defines the relative size of the font, in a range from 1 to 7, with a default size of 3. A value of 1 results in the smallest font, and a value of 7 results in the largest font. If the BASEFONT tag has previously been used to set the base font, font size changes specified with the SIZE attribute in the FONT tag are relative to the base font. Otherwise they are relative to the default font for the browser.

Text goes here.

Text goes here.

[[show this on a page]]

Font Style Elements

Font style elements are text level elements. HTML provides a number of ways to produce basic text styling, such as bold, italic, and underline. These effects can be achieved by the use of a tag and a corresponding closing tag.

Some of the more commonly used tags are:

• . . . Bolds text.

• . . . Increases base font size by 1.

• . . . Italicizes text.

• . . . Underlines text.

• . . . Emphasizes text; normally italicizes text, but may vary with different browsers; for an audio browser it tells the browser to emphasize the text in an audible manner.

• . . . Decreases base font size by 1.

• . . . Normally displayed as bold text, but the voice in an audio browser will be affected by becoming louder, deeper, etc.

• . . . Subscript.

• . . . Superscript.

Headings

There are six different levels of headings, . . . , . . . , . . . , . . . , . . . , . . . . These elements are normally used to convey the level importance of text by varying sizing and weight of the text, with indicating the most importance by being the largest. The text included within the tags is displayed in an alternative style and on a line of its own. In addition, an extra line is generally inserted after the heading.

Normal (based on a default size 0)

Heading 1 (bold, based on a default size 3)

Heading 2 (bold, based on a default size 2)

Heading 3 (bold, based on a default size 1)

Heading 4 (bold, based on a default size 0)

Heading 5 (bold, based on a default size -1)

Heading 6 (based on a default size -2)

Headings should have an implied logical meaning and not be used just to make text larger. In practice, headings beyond are rarely used, primarily because documents do not usually have sections nested more than three levels deep.

Manipulating Font Color

Font colors can be changed for effect and impact. You specify the color that you want by either by the color name or a hexadecimal code for that color. Some examples of font color names are:

Black

White

PeachPuff

Red

Firebrick

OrangeRed

Blue

MidnightBlue

CornflowerBlue

Cyan

Green

DarkGreen

SpringGreen

Yellow

DarkGoldenrod

Gold

Burlywood

Purple

Orchid

Magenta

BlueViolet

Note: These color names may not be recognized by all browsers.

Specifying a font color by a six digit hexadecimal code preceded by the pound (#) sign is the safest way to ensure browser compatibility. The first two digits indicate the red value, the second two digits indicate the green value, and the last two digits indicate the blue value. The range for each color value is 00 to FF inclusive. For example:

See this example file to experiment with hexadecimal values and color. ().

In addition to changing the color of body text, you can also change the color of links, active links, and visited links. Be cautioned that many people are used to seeing the default blue, underlined text for a link, underlined red for an active link, and underlined purple for a visited link. If you change these defaults, you have the potential to confuse the user.

HTML Tags That Support This

Text goes here.

Text goes here.

Background vs. Foreground Color

The single most important thing to remember about background vs. foreground color is high contrast. If you have a dark background, make sure your text is a light color, and vice versa. If the choice is yours, you probably should use a light background with dark text. Why? In addition to meeting the suggestion given above, this combination will probably print well. A dark background might print funny on some printers, in addition to wasting a great deal of ink. While all of these things can be manipulated in the preferences settings of most browsers, you cannot assume the user knows this.

The one exception to this rule of thumb is presentations. If you know your page will be used for presentations (projected onto a screen), then a dark background with light text is generally preferred.

See this example file to experiment with hexadecimal values and color. (link to Colorpicker.htm), or this example ().

To change the background color, use the body tag. For example:

HTML Tags That Support This

How A Font Is Designed

[pic]

• X-height - The height of the lower case letters such as 'x', 'a', 'e'.

• Ascender - The stroke of a letter which rises above the Mean line as 'k', 'l', 'h'.

• Descender - The stroke of a letter which hangs below the Base line such as 'p', 'y', 'g'.

• Mean Line - The imaginary line which determines the height of lowercase letters; ascenders rise above the mean line.

• Base Line - The imaginary line on which all characters rest; descenders hang below the base line.

• Body Size - Size of the type being used; measured from the end of the ascender to the end of the descender.

• Serif - Small strokes and cross-lines at the ends of major lines. Font faces without these are called sans serif.

• Set Width - Width, in units, allowed for each letter which varies between letters and type faces. In a monospaced font face, the widths between all letters is the same.

• Cap Line - The height of capital letters. Depending on type design, capitals may be taller/shorter or same height as ascenders.

Why is this information important? Fonts specifically designed for the web and/or online viewing usually have a larger x-height than many print-based fonts. This makes the letters look bigger. For example, look at these two fonts:

[pic]

[pic]

Both have a large x-height, and were developed by Matthew Carter (one of the great type designers of the second half of the last century - he also designed Gaillard and Bell Centennial) for Microsoft™, specifically for computer display and web use. Other "Core Fonts" for the web include:

• Arial

• Comic Sans

• Courier New

• Impact

• Times New Roman

• Terbuchet MS

• Webdings

These are available to the public from Microsoft. [[]]

Serif and Sans Serif Fonts

Serif fonts have elaborations on the ends of letters; sans serif fonts do not.

[pic]

[pic]

Which one should you use? While there is no hard, scientific evidence to support the following statements, many designers agree with them.

• Use serif fonts for large headlines.

• Use serif fonts if you want a "friendly" feel to your text.

• Don't mix serif and sans serif fonts together in body text.

• Don't mix more than two fonts together.

• Be consistent in how you use fonts.

Ultimately, the choice as a designer is yours.

Fixed Width And Proportional Fonts

Fixed-width fonts (also called mono-spaced) have the same amount of space between each letter. Proportional fonts have a varying amount of space between each letter.

[[pproport.gif]]

[pic]

[pic]

Which should you use? Most people prefer to read using a proportional font. This is a design decision you must make. If, for example, you were emulating a typewriter, you might want to choose a fixed-width font, as that is characteristic of most typewriters. If you had to import a table of figures under a tight deadline and needed them to line up in columns, a fixed-width font can quickly accomplish this.

Note that most browsers allow users to specify a default proportional and a fixed-width font.

HTML Tags That Support This

PREformatted. The PRE tag usually displays preformatted text (spaces, returns, tabs, and other formatting characters are preserved) in a fixed-width font. The PRE element displays all white space and line

breaks exactly as they appear inside the and tags.

Text goes here.

Typewriter Text (Displays in a fixed-width or monospaced font.)

Text goes here.

Font Display Faces

The font that you choose should ultimately reflect the look and feel of the site you are designing or working on. There is more art than science in these choice. Consider the following three fonts:

[[timesnr.gif]]

[pic]

[[bookman.gif]]

[pic]

[[broadway.gif]]

[pic]

Each has a distinct "feel" to it. Times New Roman might be appropriate for an informational site, where Broadway might be more appropriate for a site dedicated to selling show tickets.

Keep in mind that your user may not have the font installed that you specify. A good rule of thumb to follow is to specify the font you want, followed by a font you know the user will have (that you find at least acceptable). Do not go beyond this; instead, allow the brower's default font to take over.

Each entry in the font list can be a specific font name, for example "Helvetica", or it can be a generic font name. The generic font names are serif, sans-serif, cursive, monospace, and fantasy.

HTML Tags That Support This

The tag allows for the specification of a number of font faces. If the first font listed is not available, the second listed font will be displayed, if that is not available, the third listed font will be used, and so on. If none of the listed fonts are available, the default will be used. For example:

This text will be displayed in Arial or Geneva

If Arial is not available on a system, Geneva will be used instead.

Anti-aliasing

When using text in a graphic, you can apply a technique named anti-aliasing to the text to make it appear better. Anti-aliasing makes the edges of the text look smoother by adding pixels of lighter colors around the edge. To the naked eye, the result is a smoother edge.

Use this technique on larger font sizes; below 12 points this effect can actually make it harder to read the text.

Note that this technique can be used on any graphic, not just text turned into a graphic.

Macintosh vs. Windows Font Considerations

If you are using FONT tag or the FONT POINT-SIZE tag to specify a particular font and point size, keep in mind that the point size between the Macintosh platform and the Windows platform is not 1:1. On a Macintosh, a font is displayed at much the same size as it would appear on paper (12 points on screen = 12 points on paper). On a Windows machine, you specify point sizes that are actually smaller than they print (12 points on screen = ~16 points in print). So, if you wanted a point size of 12 on the Windows platform, you must specify a point size of 10. Text will then appear as 12 point on the Windows machine, but only as 10 points on the Macintosh machine!

As a further example, consider the hypothetical "translation table" below for translation point sizes for the font "Arial" between the Macintosh platform and the Windows platform.

|Mac:"Arial" |Win:"Arial" |

|12 |10 |

|14 |12 |

|18 |14 |

|24 |18 |

|36 |24 |

This table would ensure that the point sizes appeared roughly the same on either platform. Arial 12 on the Macintosh would be displayed as Arial 10 on the Windows platform, Mac 14 as Win 12, and so on. It would be nice if you could specify such a translation table for browsers, but you cannot.

The bottom line? Equivalent specified fonts will probably appear smaller on the Macintosh than on the Windows platform. If you specify Helvetica and a font size of +1, what you see on the Macintosh platform will probably be smaller than on the Windows platform.

This is another reason to forego font face manipulation unless absolutely necessary.

Summary

This lesson is designed for you to gather information about fonts and their use in a web environment. When you are finished with the lesson, you should be able to do the following:

• Describe How a Font is Constructed

• Describe How to Manipulate Font Size, Style, and Color

• Explain the Difference Between Serif & Sans Serif Fonts

• Explain the Difference Between Fixed Width and Proportional Fonts

• Describe How and When to Choose a Font Face

• Explain How Platform Considerations Affect the Use of Fonts

A short summary of these topics are listed below. If you cannot do these things, you should review the lesson at least once. If you are still having difficulty, you should consider other sources of information that compliment this lesson, such as textbooks, tutors, and instructors.

Font Construction

The most important thing to know about fonts for the web is that fonts with larger x-heights usually appear crisper and clearer on most monitors. The x-height is best represented by lower case letters such as 'x', 'a', and 'e'.

Font Size and Style

There are two ways to change your font size.

1. Specify the actual font size.

2. Specify the relative font size.

Font Color

You specify the color that you want by either by the color name or a hexadecimal code for that color. For example:

Serif & Sans Serif Fonts

Serif fonts have elaborations on the ends of letters; sans serif fonts do not.

• Use serif fonts for large headlines.

• Use serif fonts if you want a "friendly" feel to your text.

• Don't mix serif and sans serif fonts together in body text.

• Don't mix more than two fonts together.

• Be consistent in how you use fonts.

Fixed Width and Proportional Fonts

Fixed-width fonts (also called mono-spaced) have the same amount of space between each letter. Proportional fonts have a varying amount of space between each letter.

How and When to Choose a Font Face

The font that you choose should ultimately reflect the look and feel of the site you are designing or working on. There is more art than science in these choice.

How Platform Considerations Affect the Use of Fonts

The Macintosh and PC/Windows machines display font sizes differently. On a Macintosh, a font is displayed at much the same size as it would appear on paper (12 points on screen = 12 points on paper). On a Windows machine, you specify point sizes that are actually smaller than they print (12 points on screen = ~16 points in print). Thus, equivalent specified fonts will probably appear smaller on the Macintosh than on the Windows platform.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download