chapter 6 web typography. 2 principles of web design chapter 5 objectives understand principles for...
TRANSCRIPT
![Page 1: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/1.jpg)
Chapter 6
Web Typography
![Page 2: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/2.jpg)
2
Principles of Web Design Chapter 5
Objectives
• Understand principles for type design on a Web site
• Use the <FONT> element• Understand why you should use Cascading
Style Sheets (CSS) instead of the <FONT> element
• Create style rules using CSS style rules• Selectively apply CSS style rules
![Page 3: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/3.jpg)
3
Principles of Web Design Chapter 5
Objectives
• Specify CSS font properties and block-level space values
• Build and apply style classes
![Page 4: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/4.jpg)
4
Principles of Web Design Chapter 5
Type Design Principles
• Choose fewer fonts and sizes• Choose available fonts• Design for legibility• Avoid using text as graphics
![Page 5: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/5.jpg)
5
Principles of Web Design Chapter 6
![Page 6: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/6.jpg)
6
Principles of Web Design Chapter 6
![Page 7: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/7.jpg)
7
Principles of Web Design Chapter 6
![Page 8: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/8.jpg)
8
Principles of Web Design Chapter 6
![Page 9: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/9.jpg)
9
Principles of Web Design Chapter 6
![Page 10: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/10.jpg)
10
Principles of Web Design Chapter 6
![Page 11: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/11.jpg)
11
Principles of Web Design Chapter 5
Using the <FONT> Element
• Use <FONT> to set font size and color and to specify font substitution
• With HTML 4.0, the <FONT> tag has been deprecated in favor of CSS. To ensure forward compatibility, you should strongly consider moving to CSS, and limit or replace the <FONT> element in your code
![Page 12: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/12.jpg)
12
Principles of Web Design Chapter 6
![Page 13: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/13.jpg)
13
Principles of Web Design Chapter 5
Using Cascading Style Sheets
• Cascading style sheets offer much greater control over type characteristics than does the <FONT> element
• You can use standard type conventions, such as using point or pixel sizes, setting leading, and specifying indents and alignment
![Page 14: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/14.jpg)
14
Principles of Web Design Chapter 5
Using Cascading Style Sheets
• Style rules are composed of two parts: a selector and a declaration
• The selector determines the element to which the rule is applied
• The declaration details the exact property values
![Page 15: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/15.jpg)
15
Principles of Web Design Chapter 6
![Page 16: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/16.jpg)
16
Principles of Web Design Chapter 5
Using Cascading Style Sheets
• The declaration contains a property and a value
• The property is a quality or characteristic • The precise specification of the property is
contained in the value • CSS includes over 50 different properties,
each with a specific number of values
![Page 17: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/17.jpg)
17
Principles of Web Design Chapter 6
![Page 18: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/18.jpg)
18
Principles of Web Design Chapter 5
CSS Selection Techniques
• Selecting single elements• Selecting multiple elements• Selecting by context• Selecting with the CLASS attribute
![Page 19: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/19.jpg)
19
Principles of Web Design Chapter 5
Selecting Single Elements
The following rule selects the H1 element:
<STYLE TYPE=”text/css”>
H1 {COLOR: GREEN}
</STYLE>
![Page 20: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/20.jpg)
20
Principles of Web Design Chapter 5
Selecting Multiple Elements
The following rule selects the H1 and H2 elements:
<STYLE TYPE=”text/css”>
H1, H2 {COLOR: GREEN}
</STYLE>
![Page 21: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/21.jpg)
21
Principles of Web Design Chapter 5
Selecting by Context
A context-based selector lets you specify the exact context in which a style is applied. To specify that <I> elements appear blue only within <H1> elements, use the following rule:
<STYLE TYPE=”text/css”>
H1 I {COLOR: BLUE}
</STYLE>
![Page 22: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/22.jpg)
22
Principles of Web Design Chapter 5
Selecting with CLASS
• The CLASS attribute lets you write rules and then apply them to groups of elements that you have classified.
• To create a class, declare it within the <STYLE> element first. The period (.) flag character indicates that the selector is a class selector.
![Page 23: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/23.jpg)
23
Principles of Web Design Chapter 6
![Page 24: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/24.jpg)
24
Principles of Web Design Chapter 5
Working with <DIV>
• The <DIV> element lets you specify logical divisions within a document that have their own name and style properties.
• <DIV> is a block-level element. It contains a leading and trailing carriage return.
• You can use <DIV> with the CLASS attribute to create customized block-level elements.
![Page 25: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/25.jpg)
25
Principles of Web Design Chapter 5
Working with <DIV>
To create a division, declare it within the <STYLE> element first. The following example specifies a division named INTRO as the selector for the rule:
<STYLE TYPE=”text/css”>
DIV.INTRO {COLOR:RED}
</STYLE>
![Page 26: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/26.jpg)
26
Principles of Web Design Chapter 5
Working with <DIV>
Next, specify the <DIV> element in the document. Then use the CLASS attribute to specify the exact type of division. In the following example, the code defines the <DIV> element as the special class named “INTRO.”
<DIV CLASS=INTRO>Some text</DIV>
![Page 27: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/27.jpg)
27
Principles of Web Design Chapter 5
Working with <SPAN>
• The <SPAN> element lets you specify inline elements within a document that have their own name and style properties
• Inline elements go within the line of text, like the <B> element
![Page 28: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/28.jpg)
28
Principles of Web Design Chapter 5
Working with <SPAN>
To create a division, declare it within the <STYLE> element first. The following example specifies a span named LOGO the selector for the rule:
<STYLE TYPE=”text/css”>
SPAN.LOGO {COLOR:RED}
</STYLE>
![Page 29: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/29.jpg)
29
Principles of Web Design Chapter 5
Working with <SPAN>
Next, specify the <SPAN> element in the document. Then use the CLASS attribute to specify the exact type of span. In the following example, the code defines the <SPAN> element as the special class named “LOGO.”
Welcome to the <SPAN CLASS=LOGO>Wonder Software</SPAN> Web site.
![Page 30: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/30.jpg)
30
Principles of Web Design Chapter 5
CSS Font Properties
• Font families and alternates• Font size• Font weight• Line height• Letter spacing• Text indent• Color
![Page 31: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/31.jpg)
31
Principles of Web Design Chapter 5
CSS Measurement Values
• CSS offers a variety of measurement units, almost to the point of offering too many choices.
• For example, to specify font size, you can use any of the measurement units listed in the following table.
![Page 32: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/32.jpg)
32
Principles of Web Design Chapter 6
![Page 33: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/33.jpg)
33
Principles of Web Design Chapter 5
Specifying Font Size
The following rule sets the <BLOCKQUOTE> element to 18-point Arial:
BLOCKQUOTE {FONT-FAMILY: ARIAL; FONT-SIZE: 18pt}
![Page 34: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/34.jpg)
34
Principles of Web Design Chapter 6
![Page 35: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/35.jpg)
35
Principles of Web Design Chapter 5
Specifying Font Weight
The following rule shows the addition of the Font-weight property to the rule:
BLOCKQUOTE {FONT-FAMILY: ARIAL; FONT-SIZE: 18pt; FONT-WEIGHT: BOLD}
![Page 36: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/36.jpg)
36
Principles of Web Design Chapter 6
![Page 37: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/37.jpg)
37
Principles of Web Design Chapter 5
Specifying Line Height
CSS allows you to specify either a percentage or absolute value for the line height, which is more commonly called leading. The following rule sets the line height to 30 points:
BLOCKQUOTE {FONT-FAMILY: ARIAL; FONT-SIZE: 18pt; FONT-WEIGHT: BOLD; LINE-HEIGHT: 30pt}
![Page 38: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/38.jpg)
38
Principles of Web Design Chapter 6
![Page 39: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/39.jpg)
39
Principles of Web Design Chapter 5
Specifying Letter Spacing
To adjust kerning, the printer’s term for adjusting the white space between letters, use the Letter-spacing property. The following rule sets the letter-spacing to 2 points:
BLOCKQUOTE {FONT-FAMILY: ARIAL FONT-SIZE: 18pt; FONT-WEIGHT: BOLD; LINE-HEIGHT: 30pt; LETTER-SPACING: 2pt}
![Page 40: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/40.jpg)
40
Principles of Web Design Chapter 6
![Page 41: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/41.jpg)
41
Principles of Web Design Chapter 5
Specifying Text IndentUse the Text-indent property to set the amount of indentation for the first line of text in an element, such as a paragraph. The following rule sets an indent of 24 points:
BLOCKQUOTE {FONT-FAMILY: ARIAL FONT-SIZE: 18pt; FONT-WEIGHT: BOLD; LINE-HEIGHT: 30pt; LETTER-SPACING: 2pt; TEXT-INDENT: 24pt}
![Page 42: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/42.jpg)
42
Principles of Web Design Chapter 6
![Page 43: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/43.jpg)
43
Principles of Web Design Chapter 5
Specifying Background ColorsYou can set the background color—the color behind the text—for any element. Use the following syntax:
H2 {COLOR: WHITE; BACKGROUND-COLOR: BLUE}
![Page 44: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/44.jpg)
44
Principles of Web Design Chapter 6
![Page 45: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/45.jpg)
45
Principles of Web Design Chapter 5
Specifying Block-Level Spacing
Cascading Style Sheets allow you to specify property values for the space around block-level elements. There are three properties you can set:
• Padding: The area between the text and border• Border: The border separates the padding and
margin• Margin: The area outside the border
![Page 46: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/46.jpg)
46
Principles of Web Design Chapter 6
![Page 47: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/47.jpg)
47
Principles of Web Design Chapter 5
Styling with CSS
In this section you’ll see how to set up a style sheet for a document using a variety of font properties. Let’s say that your job is to develop an online library of public-domain texts. You would want to set up a style sheet that you could apply to all the documents in the collection.
![Page 48: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/48.jpg)
48
Principles of Web Design Chapter 5
Styling with CSS
In this example, the content is the first chapter from Mark Twain’s A Connecticut Yankee in King Arthur’s Court. Figure 6-17 shows the page marked up with standard HTML.
![Page 49: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/49.jpg)
49
Principles of Web Design Chapter 6
![Page 50: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/50.jpg)
50
Principles of Web Design Chapter 5
Setting up Document Divisions
• To set up a style sheet, start by determining the logical divisions for the document.
• Each division will have its own unique type characteristics that can be stated as style rules.
• Figure 6-18 shows the document divisions you could use for this type of document.
![Page 51: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/51.jpg)
51
Principles of Web Design Chapter 6
![Page 52: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/52.jpg)
52
Principles of Web Design Chapter 5
Standard Paragraph Style
P {
FONT-FAMILY: ARIAL, HELVETICA, SANS-SERIF;
FONT-SIZE: 10pt;
LINE-HEIGHT: 20pt;
MARGIN-LEFT: 20px;
MARGIN-RIGHT: 20px}
![Page 53: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/53.jpg)
53
Principles of Web Design Chapter 6
![Page 54: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/54.jpg)
54
Principles of Web Design Chapter 5
Chapter Number Style
.CHAPNUMBER {
FONT-SIZE: 24pt;
LINE-HEIGHT: 36pt;
FONT-WEIGHT: BOLD
MARGIN-LEFT: 20px;
BACKGROUND-COLOR: GRAY;
COLOR: WHITE}
![Page 55: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/55.jpg)
55
Principles of Web Design Chapter 6
![Page 56: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/56.jpg)
56
Principles of Web Design Chapter 5
Chapter Title Style
.CHAPTITLE {
FONT-SIZE: 18pt;
LINE-HEIGHT: 30pt;
FONT-WEIGHT: BOLD;
LETTER-SPACING: 2pt
MARGIN-LEFT: 20px}
![Page 57: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/57.jpg)
57
Principles of Web Design Chapter 6
![Page 58: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/58.jpg)
58
Principles of Web Design Chapter 5
Credit Style
DIV.CREDIT {
TEXT-ALIGN: RIGHT;
FONT-SIZE: 10pt;
BORDER-BOTTOM: SOLID 1px BLACK;
LINE-HEIGHT: 20pt;
MARGIN-LEFT: 20px}
![Page 59: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/59.jpg)
59
Principles of Web Design Chapter 6
![Page 60: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/60.jpg)
60
Principles of Web Design Chapter 6
Summary• Use text to communicate information
structure. Be sparing with your type choices, and use fonts consistently.
• Remember that HTML text downloads faster than graphics-based text. Use HTML text whenever possible.
• Use browser-safe fonts that will display as consistently as possible across operating systems.
![Page 61: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/61.jpg)
61
Principles of Web Design Chapter 6
Summary• Limit use of the <FONT> element because it
is deprecated in HTML 4.0.• Experiment with Cascading Style Sheets
(CSS) and consider implementing them. Once you experience the results of this easy-to-use language, you’ll have a hard time going back to relying on the <FONT> element.
![Page 62: Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand](https://reader034.vdocuments.us/reader034/viewer/2022042616/56649e3f5503460f94b2feff/html5/thumbnails/62.jpg)
62
Principles of Web Design Chapter 6
Summary• If you use CSS, standardize your styles by
building external style sheets and linking multiple documents to them.
• Test your work! Different browsers and computing platforms render text in different sizes.