Date post: | 11-Jan-2016 |
Category: |
Documents |
Upload: | griselda-henderson |
View: | 221 times |
Download: | 0 times |
Chapter 6
Web Typography
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
3
Principles of Web Design Chapter 5
Objectives
• Specify CSS font properties and block-level space values
• Build and apply style classes
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
5
Principles of Web Design Chapter 6
6
Principles of Web Design Chapter 6
7
Principles of Web Design Chapter 6
8
Principles of Web Design Chapter 6
9
Principles of Web Design Chapter 6
10
Principles of Web Design Chapter 6
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
12
Principles of Web Design Chapter 6
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
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
15
Principles of Web Design Chapter 6
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
17
Principles of Web Design Chapter 6
18
Principles of Web Design Chapter 5
CSS Selection Techniques
• Selecting single elements• Selecting multiple elements• Selecting by context• Selecting with the CLASS attribute
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>
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>
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>
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.
23
Principles of Web Design Chapter 6
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.
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>
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>
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
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>
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.
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
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.
32
Principles of Web Design Chapter 6
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}
34
Principles of Web Design Chapter 6
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}
36
Principles of Web Design Chapter 6
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}
38
Principles of Web Design Chapter 6
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}
40
Principles of Web Design Chapter 6
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}
42
Principles of Web Design Chapter 6
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}
44
Principles of Web Design Chapter 6
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
46
Principles of Web Design Chapter 6
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.
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.
49
Principles of Web Design Chapter 6
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.
51
Principles of Web Design Chapter 6
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}
53
Principles of Web Design Chapter 6
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}
55
Principles of Web Design Chapter 6
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}
57
Principles of Web Design Chapter 6
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}
59
Principles of Web Design Chapter 6
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.
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.
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.