Learning Web Design Third Edition- P23 ppsx

Trang 1

Serif Decorative serif stroke

Straight strokes

Sans-serif

Times New Roman Lucida (Mac)

Veranda Trebuchet MS

Arial Arial Black

Courier

Courier New Andale Mono

Comic Sans Snell

Apple Chancery

Imapct

Monospace

Cursive

Fantasy

Monospace font (equal widths) Proportional font (different widths)

Figure 12-2 Examples of the five generic font families.

Font specifying strategies

The best practice for specifying fonts for web pages is to start with your first choice, provide some similar alternatives, then end with a generic font family that at least gets users in the right stylistic ballpark Here’s another example

of this strategy in action With this style rule, I specify that I’d prefer that users see all the text in Verdana, but I’d settle for Arial, or Helvetica, or, if all else fails, I’ll let the browser choose an available sans-serif font for me.

body { font-family: Verdana, Arial, Helvetica, sans-serif; }

Because a font will only show up if it’s on a user’s hard drive, it makes sense

to specify fonts that are the most commonly available Although there are countless fonts out there, the fact is that because licensed copies of fonts cost big bucks, most users stick with the fonts that are installed by their operating

You’ll find that the majority of

professional web sites use Verdana

because it was specially designed to

be legible at small sizes on computer

monitors This is a common value

line-up for font-family:

Verdana, Arial, sans-serif

D e S I G n t I P

You’ll find that the majority of

professional web sites use Verdana

because it was specially designed to

be legible at small sizes on computer

monitors This is a common value

line-up for font-family:

Verdana, Arial, sans-serif

D e S I G n t I P

Trang 2

system or other applications Font copyright also prevents designers from just

making cool fonts available for download.

For these reasons, web designers tend to specify fonts from the Microsoft

Core Web Fonts collection These come installed with Windows, Internet

Explorer, and Microsoft Office, so it is likely that they will find their way onto

all Windows and even most Apple and Linux computers Not only are they

widely available, they were designed to be legible on low-resolution computer

screens Table 12-1 lists the fonts in the collection.

Table 12-1. Core Web Fonts from Microsoft

Sans Serif Arial, Arial Black, Trebuchet MS, Verdana

Miscellaneous Comic Sans, Impact, Webdings

So, as you see, specifying fonts for the Web is more like merely suggesting

them You don’t have absolute control over which font your users will see It’s

one of those web design quirks you learn to live with

Now seems like a good time to get started formatting the Black Goose

Bistro menu We’ll add new style rules one at a time as we learn each new

property.

Note

There are techniques for using graphics and even small Flash movies for head-lines in order to achieve more stylized typography than can be handled with CSS alone These image replacement techniques are not appropriate for large amounts of text, however Read more about image replacement in Chapter 17, CSS Techniques

Note

There are techniques for using graphics and even small Flash movies for head-lines in order to achieve more stylized typography than can be handled with CSS alone These image replacement techniques are not appropriate for large amounts of text, however Read more about image replacement in Chapter 17, CSS Techniques

In this exercise, we’ll add font properties to the Black Goose Bistro menu document,

menu-summer.html, that you marked up back in Chapter 5 A fresh and validated

copy, complete with DOCTYPE declaration, is available at www.learningwebdesign.

com/materials Open the document in a text editor You can also open it in a browser

to see its “before” state It should look similar to the page shown in Figure 12-1 Hang

onto this document, because this exercise will continue as we pick up additional font

properties

We’re going to use an embedded style sheet for this exercise Start by adding

a style element with its required type attribute to the head of the document

(remember, the only place a style element can go is in the head), like this:

<head>

<title>Black Goose Bistro</title>

<style type="text/css">

</style>

</head>

1

In this exercise, we’ll add font properties to the Black Goose Bistro menu document,

menu-summer.html, that you marked up back in Chapter 5 A fresh and validated

copy, complete with DOCTYPE declaration, is available at www.learningwebdesign.

com/materials Open the document in a text editor You can also open it in a browser

to see its “before” state It should look similar to the page shown in Figure 12-1 Hang

onto this document, because this exercise will continue as we pick up additional font

properties

We’re going to use an embedded style sheet for this exercise Start by adding

a style element with its required type attribute to the head of the document

(remember, the only place a style element can go is in the head), like this:

<head>

<title>Black Goose Bistro</title>

<style type="text/css">

</style>

</head>

If your browser is configured to use Verdana or a sans-serif font as its default font, you won’t see much of a change after adding this rule Hang in there, more changes are to come.

Note

If your browser is configured to use Verdana or a sans-serif font as its default font, you won’t see much of a change after adding this rule Hang in there, more changes are to come.

Trang 3

Specifying font size

Use the aptly-named font-size property to specify the size of the text

font-size

xx-large | smaller | larger | inherit

Default: medium

Applies to: all elements

Inherits: yes

You can specify text in a several ways:

At a specific size using one of the CSS length units (see the sidebar, CSS Units of Measurement, for a complete list), as shown here:

h1 { font-size: 1.5em; }

When specifying a number of units, be sure the unit abbreviation imme-diately follows the number, with no extra character space in between:

INCORRECT h1 { font-size: 1.5 em; } /*space before the em*/

•

CSS Units of

Measurement

CSS2 provides a variety of units of

measurement They fall into two

broad categories: absolute and

relative

Absolute units

Absolute units have predefined

meanings or real-world equivalents

pt points (1/72 inch in CSS2.1)

pc picas (1 pica = 12 points)

mm millimeters

cm centimeters

in inches

Absolute units should be avoided

for web page style sheets because

they are not relevant on computer

screens However, if you are creating

a style sheet to be used when the

document is printed, they may be

just the ticket

Relative units

Relative units are based on the

size of something else, such as the

default text size, or the size of the

parent element

em a unit of measurement equal to

the current font size

ex approximately the height of a

lowercase “x” in the font

px pixel, considered relative

because it varies with display

resolution, particularly between

low resolution screens and high

resolution print output

% percentage values, although

not a unit of measurement, are

another way to specify relative size

It is recommended that you stick

with ems, percentage values, or

a combination of the two when

specifying text size

CSS Units of

Measurement

CSS2 provides a variety of units of

measurement They fall into two

broad categories: absolute and

relative

Absolute units

Absolute units have predefined

meanings or real-world equivalents

pt points (1/72 inch in CSS2.1)

pc picas (1 pica = 12 points)

mm millimeters

cm centimeters

in inches

Absolute units should be avoided

for web page style sheets because

they are not relevant on computer

screens However, if you are creating

a style sheet to be used when the

document is printed, they may be

just the ticket

Relative units

Relative units are based on the

size of something else, such as the

default text size, or the size of the

parent element

em a unit of measurement equal to

the current font size

ex approximately the height of a

lowercase “x” in the font

px pixel, considered relative

because it varies with display

resolution, particularly between

low resolution screens and high

resolution print output

% percentage values, although

not a unit of measurement, are

another way to specify relative size

It is recommended that you stick

with ems, percentage values, or

a combination of the two when

specifying text size

I would like all the text on the page to appear in Verdana or some other sans-serif font Instead of writing a rule for every element in the document, we will write one rule for the body element that will be inherited by all the elements it contains Add this rule to the embedded style sheet

body {font-family: Verdana, sans-serif;}

</style>

Save the document and reload the page in the browser It should look like Figure

12-3 We’ll work on the font size in the next installment

2

Figure 12-3. The menu in the Verdana or sans-serif font.

Trang 4

As a percentage value, sized up or down from the element’s default or

inherited font size:

h1 { font-size: 150%; }

Using one of the absolute keywords (xx-small, x-small, small, medium,

large, x-large, xx-large) On most current browsers, medium corresponds

to the default font size:

h1 { font-size: x-large; }

Using a relative keyword (larger or smaller) to nudge the text larger or

smaller than the surrounding text:

strong { font-size: larger; }

I’m going to cut to the chase and tell you that, despite all these options, the

only acceptable values for font-size in contemporary web design are em

measurements, percentage values, and keywords These are preferred because

they allow users to resize text using the text-zoom feature on their browser

This means you can size the text as you prefer it (generally smaller than the

most common default 16 pixel text), but still rest assured that users can make

it larger if they have special needs or preferences.

While it may be tempting to specify text in actual pixel measurements, Internet

Explorer (all versions) does not allow text-zoom on type sized in pixels That

means users are stuck with your 10 or 11 pixel type, even if they are unable to

read it That’s a big no-no in terms of accessibility In addition, all of the

abso-lute units such as pt, pc, in, mm, and cm are out because they are irrelevant on

computer monitors (although they may be useful for print style sheets)

Working with keywords

Many web designers like to specify type size using one of the predefined

absolute keywords: xx-small, x-small, small, medium, large, x-large,

xx-large The keywords do not correspond to particular measurements, but

rather are scaled consistently in relation to one another The default size

is medium in current browsers Figure 12-4 shows how each of the absolute

keywords renders in a browser when the default text is set at 16 pixels I’ve

included samples in Verdana and Times to show that, even with the same

base size, there is a big difference in legibility at sizes small and below.

Figure 12-4. Text sized with absolute keywords.

•

Trang 5

The benefit of keywords is that current browsers in Standards Mode will never let text sized in keywords render smaller than 9 pixels, so they protect against illegible type (although I would still opt for Verdana for better readability)

On the downside, the size keywords are imprecise and unpredictable For example, while most browsers scale each level up by 120%, some browsers use

a scaling factor of 150% Another notable problem is that Internet Explorer 5 and 5.5 for Windows use small as the default (not medium), meaning your text will display a lot smaller for users with those browsers Fortunately, with the introduction of IE 7, these old versions are slowly going away.

The relative keywords, larger and smaller, are used to shift the size of text relative to the size of the parent element text The exact amount of the size change is determined by each browser, and is out of your control Despite that limitation, it is an easy way to nudge type a bit larger or smaller if the exact proportions are not critical.

Figure 12-5 shows the result of this simple bit of markup (note that the inline styles were used just to keep the example compact).

<p>There are two relative keywords:

<span style="font-size: larger">larger</span> and

<span style="font-size: smaller">smaller</span> They are used to shift the size of text relative to the parent element.</p>

Figure 12-5 Relative size keywords make text slightly larger or smaller than the surrounding text.

Working with percentages and ems

By far the most popular way to specify font sizes for the Web is using em measurements or percentage values, or a combination of the two Both ems and percentages are relative measurements, which means they are based on another font size, namely, the font-size of the parent element

In this example, the font-size of the h1’s parent element (body) is 16 pixels, so the resulting size of the h1 would be 150% of that, or 24 pixels.

body { font-size: 16px; } h1 { font-size: 150%; } /* 150% of 16 = 24 */

If no font-size properties have been specified, relative measurements are based on the browser’s base font size, which is 16 pixels in most browsers Of course, users can resize their base font as small or as large as they like, so there

is no guaranteed starting size, only a reasonable guess.

An em is a relative unit of measurement that, in traditional typography, is based on the width of the capital letter M (thus, the name “em”) In the CSS specification, an em is calculated as the distance between baselines when the

Note

Don’t confuse the em unit of

measure-ment with the em (X)HTML element used

to indicate emphasized text They are

totally different things.

Note

Don’t confuse the em unit of

measure-ment with the em (X)HTML element used

to indicate emphasized text They are

totally different things.

Trang 6

font is set without any extra space between the lines (also known as leading)

For text with a font size of 16 pixels, an em measures 16 pixels; for 12 pixel

text, an em equals 12 pixels, and so on, as shown in Figure 12-6.

em box

24px type 1em=24px

12px type 1em=12px 1em=16px 16px type

Figure 12-6. An em is based on the size of the text.

Once the dimensions of an em for a text element is calculated by the browser,

it can be used for all sorts of measurements, such as indents, margins, the

width of the element on the page, and so on

For text sizing, an em value works like a scaling factor, similar to a

percent-age As in the previous example, if the base font size is 16 pixels, giving h1

elements a font-size of 1.5 ems makes them 24 pixels high

body { font-size: 16px; }

h1 { font-size: 1.5em; } /* 1.5 x 16 = 24 */

For the most part, ems and percentages can be used interchangeably when

specifying type size It’s mostly a matter of preference.

There are a few snags to working with ems One is that due to rounding

errors, there is a lot of inconsistency among browsers and platforms when

text size is set in fractions of an em There are also documented problems in

Internet Explorer when font-size is specified at sizes smaller than 1em It is

safest to use ems to scale text larger.

For both ems and percentages, there is the lingering issue of not knowing the

base font size We are left with best guesses, and the assumption that users

probably have their default font size set to a size that is comfortable to read,

and we probably shouldn’t muck around with it too much There is much

more to the font size story The Font Sizing Techniques sidebar lists some

good resources for further research.

Note

Although I’ve set the size of the body text in pixels in the previous two examples for

explanation purposes, you wouldn’t want to do that in the real world because the text

could not be zoomed in Internet Explorer

In the meantime, we can add some font-size properties to the sample menu

in the continuation of Exercise 12-1.

Font Sizing Techniques

Sizing type for web pages is problematic and the subject of much debate even among seasoned web designers

One popular method for sizing text

is to make the text slightly smaller globally (using the body element) with a percentage value, then size all the elements up as appropriate using em measurements The following articles provide slightly different takes on that method

How to Size Text Using Ems, by Richard Rutter (www.

clagnut.com/blog/348) is a detailed how-to that makes

em increments easy to use The comments to this blog entry are also informative and give good insight into the varying opinions

on how web text should be sized Owen Briggs’ article on Text Sizing is the result of exhaustive cross-browser testing Hundreds

of screenshots are available if you want the proof This article is

a little dated, but still brings up relevant issues Read it at www.

thenoodleincident.com/tutorials/ box_lesson/font/index.html

If keywords are vexing you, read Todd Fahrner’s classic article, CSS Design: Size Matters on A List Apart (www.alistapart.com/articles/ sizematters/) It is a little dated (for example, support in Netscape 4 figures prominently), but it provides some useful background information and workarounds



Font Sizing Techniques

Sizing type for web pages is problematic and the subject of much debate even among seasoned web designers

One popular method for sizing text

is to make the text slightly smaller globally (using the body element) with a percentage value, then size all the elements up as appropriate using em measurements The following articles provide slightly different takes on that method

How to Size Text Using Ems, by Richard Rutter (www.

clagnut.com/blog/348) is a detailed how-to that makes

em increments easy to use The comments to this blog entry are also informative and give good insight into the varying opinions

on how web text should be sized Owen Briggs’ article on Text Sizing is the result of exhaustive cross-browser testing Hundreds

of screenshots are available if you want the proof This article is

a little dated, but still brings up relevant issues Read it at www.

thenoodleincident.com/tutorials/ box_lesson/font/index.html

If keywords are vexing you, read Todd Fahrner’s classic article, CSS Design: Size Matters on A List Apart (www.alistapart.com/articles/ sizematters/) It is a little dated (for example, support in Netscape 4 figures prominently), but it provides some useful background information and workarounds



Trang 7

exercise 12-1 | Formatting a menu (continued)

Let’s refine the size of some of the text elements to give the online menu a more

sophisticated appearance Open menu_summer.html in a text editor and follow the

steps below You can save the document at any point and take a peek in the browser

to see the results of your work You should also feel free to try out other size values along the way

I would prefer that the body text for the document appear smaller than the common 16 pixel default I am going to set the size of the body to small, which renders at approximately 12 pixels on most current browsers If it ends up too small for some users, they can always zoom the text up, since it was specified with a keyword

body { font-size: small; }

Now let’s get that giant h1 under control I’m going to make it one and a half times larger than the body text size with an em measurement I could also use font-size: 150% to accomplish the same thing

h1 { font-size: 1.5em; }

Figure 12-7 shows the result of our font sizing efforts

smaller h1

Before

After (the font-size is set to small)

Figure 12-7. The online menu after a few minor font-size changes.

I want to point out that at this point, I don’t really know exactly how many pixels tall the h1s will be for every user They’re likely to be 18 pixels, but they may be smaller or much larger The important part is that I’ve set my desired proportion of h1 elements

to the surrounding text If the user resizes or zooms the text, that proportion stays the same

1

2

Trang 8

Font weight (boldness)

After font families and size, the remaining font properties are

straightfor-ward For example, if you want a text element to appear in bold, use the

font-weight property to adjust the boldness of type.

font-weight

Values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 |

900 | inherit

Default: normal

Inherits: yes

As you can see, the font-weight property has many predefined values,

includ-ing descriptive terms (normal, bold, bolder, and lighter) and nine numeric

values (100 to 900) for targeting various weights of a font if they are available

Because most fonts common on the Web have only two weights, normal (or

roman) and bold, the only font weight value you will use in most cases is

bold You may also use normal to make text that would otherwise appear in

bold (such as strong text or headlines) appear at a normal weight.

The numeric chart is an interesting idea, but because there aren’t many fonts

with that range of weights and because browser support is spotty, they are not

often used In general, numeric settings of 600 and higher result in bold text,

although even that can vary by browser, as shown in Figure 12-8

Rendered on Safari Rendered on Firefox (Mac)

Figure 12-8 The effect of font-weight values.

About inherit

You will see that CSS properties include inherit in their list of keyword values The inherit value allows you to explicitly force an element to inherit a style property value from its parent This may come

in handy to override other styles applied to that element and to guarantee that the element always matches its parent

About inherit

You will see that CSS properties include inherit in their list of keyword values The inherit value allows you to explicitly force an element to inherit a style property value from its parent This may come

in handy to override other styles applied to that element and to guarantee that the element always matches its parent

(continued)

Back to the menu I’ve decided that I’d like all of the menu item names to be in

bold text What I’m not going to do is wrap each one in <b> tags that would be so

1996! I’m also not going mark them up as strong elements that is not semantically

accurate Instead, the right thing to do is simply apply a style to the semantically

correct dt (definition term) elements to make them all bold at once Add this rule to

your style sheet, save the file, and try it out in the browser (Figure 12-9)

dt { font-weight: bold; }

(continued)

Back to the menu I’ve decided that I’d like all of the menu item names to be in

bold text What I’m not going to do is wrap each one in <b> tags that would be so

1996! I’m also not going mark them up as strong elements that is not semantically

accurate Instead, the right thing to do is simply apply a style to the semantically

correct dt (definition term) elements to make them all bold at once Add this rule to

your style sheet, save the file, and try it out in the browser (Figure 12-9)

dt { font-weight: bold; }

Trang 9

Figure 12-9 Using the font-weight property to dt elements in the menu.

Font style (italics)

The font-style property affects the posture of the text, that is, whether the letter shapes are vertical (normal) or slanted (italic and oblique)

font-style

Values: normal | italic | oblique | inherit

Inherits: yes

Italic and oblique are both slanted versions of the font The difference is that the italic version is usually a separate typeface design with curved letter forms, while oblique text takes the normal font design and just slants it The truth is that in most browsers, they may look exactly the same (see Figure 12-10) You’ll probably only use the font-style property to make text italic

or to make text that is italicized by default (such as emphasized text) display

as normal.

Figure 12-10 Italic and oblique text.

Trang 10

Figure 12-11. Applying the font-style property to the strong elements.

Font Variant (Small Caps)

Some typefaces come in a “small caps” variant This is a separate font design

that uses small uppercase-style letters in place of lowercase letter designs

The one-trick-pony font-variant property is intended to allow designers to

specify such a small-caps font for text elements.

font-variant

Values: normal | small-caps | inherit

Inherits: yes

In most cases, a true small caps font is not available, so browsers simulate

small caps by scaling down uppercase letters in the current font, as you’ll see

when we add some small caps text to the menu next To typography sticklers,

this is less than ideal and results in inconsistent stroke weights, but you may

find it an acceptable option for adding variety to small amounts of text.

h1 in small caps

Figure 12-12. Using font-variant for small caps.

Now that all the menu item names are bold, some of the text I’ve marked as strong isn’t standing out very well, so I think I’ll make them italic for further emphasis To do this, simply apply the font-style

property to the strong element

strong { font-style: italic; }

Once again, save and reload It should look like the detail shown in Figure 12-11

Now that all the menu item names are bold, some of the text I’ve marked as strong isn’t standing out very well, so I think I’ll make them italic for further emphasis To do this, simply apply the font-style

property to the strong element

strong { font-style: italic; }

Once again, save and reload It should look like the detail shown in Figure 12-11

Just for kicks, let’s set the first level heading (h1) in small caps so we can try out this font-variant property

Remember that you can add this property to the existing h1 rule The result is shown in Figure 12-12 If you find it kind of clunky, don’t worry, we’ll be undoing it later

h1 { font-size: 1.5em;

font-variant: small-caps;

}

Just for kicks, let’s set the first level heading (h1) in small caps so we can try out this font-variant property

Remember that you can add this property to the existing h1 rule The result is shown in Figure 12-12 If you find it kind of clunky, don’t worry, we’ll be undoing it later

h1 { font-size: 1.5em;

font-variant: small-caps;

}

Định dạng
Số trang	10
Dung lượng	454,87 KB