Transcript Principles of Web Design Chapter 6

Chapter 6
Web Typography
Chapter 6
Principles of Web Design
Objectives
• Understand principles for type design on a
Web site
• Control typography with the <font>
element
• Control typography with Cascading Style
Sheets (CSS)
• Understand the basics of CSS and its
selection techniques
Principles of Web Design 2nd Ed.
Chapter 6
2
Chapter 6
Principles of Web Design
Objectives
• Specify CSS font properties and block-level
space values
• Build a style sheet
Principles of Web Design 2nd Ed.
Chapter 6
3
Chapter 6
Principles of Web Design
Type Design Principles
•
•
•
•
Choose fewer fonts and sizes
Choose available fonts
Design for legibility
Avoid using text as graphics
Principles of Web Design 2nd Ed.
Chapter 6
4
Chapter 6
Principles of Web Design
• Figure 6-1
• Figure 6-2
Principles of Web Design 2nd Ed.
Chapter 6
5
Chapter 6
Principles of Web Design
• Table 6-1
Principles of Web Design 2nd Ed.
Chapter 6
6
Chapter 6
Principles of Web Design
• Figure 6-3
Principles of Web Design 2nd Ed.
Chapter 6
7
Chapter 6
Principles of Web Design
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 consider
moving to CSS, and limit or replace the
<font> element in your code.
Principles of Web Design 2nd Ed.
Chapter 6
8
Chapter 6
Principles of Web Design
• Figure 6-4
Principles of Web Design 2nd Ed.
Chapter 6
9
Chapter 6
Principles of Web Design
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
Principles of Web Design 2nd Ed.
Chapter 6
10
Chapter 6
Principles of Web Design
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
Principles of Web Design 2nd Ed.
Chapter 6
11
Chapter 6
Principles of Web Design
• Figure 6-5
Principles of Web Design 2nd Ed.
Chapter 6
12
Chapter 6
Principles of Web Design
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
Principles of Web Design 2nd Ed.
Chapter 6
13
Chapter 6
Principles of Web Design
• Figure 6-6
Principles of Web Design 2nd Ed.
Chapter 6
14
Chapter 6
Principles of Web Design
CSS Selection Techniques
•
•
•
•
Select single elements
Select multiple elements
Select by context
Select with the CLASS attribute
Principles of Web Design 2nd Ed.
Chapter 6
15
Chapter 6
Principles of Web Design
Selecting Single Elements
The following rule selects the H1 element:
<style type=”text/css”>
h1 {color: green;}
</style>
Principles of Web Design 2nd Ed.
Chapter 6
16
Chapter 6
Principles of Web Design
Selecting Multiple Elements
The following rule selects the H1 and H2
elements:
<style type=”text/css”>
h1, h2 {color: green;}
</style>
Principles of Web Design 2nd Ed.
Chapter 6
17
Chapter 6
Principles of Web Design
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>
Principles of Web Design 2nd Ed.
Chapter 6
18
Chapter 6
Principles of Web Design
Selecting with the CLASS Attribute
• 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.
Principles of Web Design 2nd Ed.
Chapter 6
19
Chapter 6
Principles of Web Design
• Figure 6-7
Principles of Web Design 2nd Ed.
Chapter 6
20
Chapter 6
Principles of Web Design
Working with the <div> Element
• 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
Principles of Web Design 2nd Ed.
Chapter 6
21
Chapter 6
Principles of Web Design
Working with the <div> Element
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>
Principles of Web Design 2nd Ed.
Chapter 6
22
Chapter 6
Principles of Web Design
Working with the <div> Element
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>
Principles of Web Design 2nd Ed.
Chapter 6
23
Chapter 6
Principles of Web Design
Working with the <span> Element
• 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
Principles of Web Design 2nd Ed.
Chapter 6
24
Chapter 6
Principles of Web Design
Working with the <span> Element
To create a span, declare it within the <style>
element first. The following example specifies a
<span> element named “logo” as the selector
for the rule:
<style type=”text/css”>
span.logo {color:red;}
</style>
Principles of Web Design 2nd Ed.
Chapter 6
25
Chapter 6
Principles of Web Design
Working with the <span> Element
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.
Principles of Web Design 2nd Ed.
Chapter 6
26
Chapter 6
Principles of Web Design
CSS Font Properties
•
•
•
•
•
•
•
Font families and alternates
Font size
Font weight
Line height
Letter spacing
Text indent
Color
Principles of Web Design 2nd Ed.
Chapter 6
27
Chapter 6
Principles of Web Design
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
Principles of Web Design 2nd Ed.
Chapter 6
28
Chapter 6
Principles of Web Design
• Table 6-2
Principles of Web Design 2nd Ed.
Chapter 6
29
Chapter 6
Principles of Web Design
Building Scalable Pages
The relative measurement values such as em
and px are designed to let you build scalable
Web pages that adapt to different display types
and sizes. The W3C recommends that you
always use relative values.
Principles of Web Design 2nd Ed.
Chapter 6
30
Chapter 6
Principles of Web Design
Specifying Font Size
The following rule sets the <blockquote>
element to 1.5em Arial:
blockquote {font-family: arial;
font-size: 1.5em;}
Principles of Web Design 2nd Ed.
Chapter 6
31
Chapter 6
Principles of Web Design
• Figure 6-8
Principles of Web Design 2nd Ed.
Chapter 6
32
Chapter 6
Principles of Web Design
Specifying Font Weight
The following rule shows the addition of the
font-weight property to the rule:
blockquote {font-family: arial;
font-size: 1.5em; font-weight:
bold;}
Principles of Web Design 2nd Ed.
Chapter 6
33
Chapter 6
Principles of Web Design
• Figure 6-9
Principles of Web Design 2nd Ed.
Chapter 6
34
Chapter 6
Principles of Web Design
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: 1.5em; font-weight:
bold; line-height: 30pt;}
Principles of Web Design 2nd Ed.
Chapter 6
35
Chapter 6
Principles of Web Design
• Figure 6-10
Principles of Web Design 2nd Ed.
Chapter 6
36
Chapter 6
Principles of Web Design
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: 1.5em; font-weight:
bold; line-height: 30pt;
letter-spacing: 2pt;}
Principles of Web Design 2nd Ed.
Chapter 6
37
Chapter 6
Principles of Web Design
• Figure 6-11
Principles of Web Design 2nd Ed.
Chapter 6
38
Chapter 6
Principles of Web Design
Specifying Text Indent
Use 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: 1.5em; font-weight:
bold; line-height: 30pt;
letter-spacing: 2pt; textindent: 24pt;}
Principles of Web Design 2nd Ed.
Chapter 6
39
Chapter 6
Principles of Web Design
• Figure 6-12
Principles of Web Design 2nd Ed.
Chapter 6
40
Chapter 6
Principles of Web Design
Specifying Background Colors
You can set the background color—the color
behind the text—for any element. Use the
following syntax:
h2 {color: white; backgroundcolor: black;}
Principles of Web Design 2nd Ed.
Chapter 6
41
Chapter 6
Principles of Web Design
• Figure 6-13
Principles of Web Design 2nd Ed.
Chapter 6
42
Chapter 6
Principles of Web Design
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
Principles of Web Design 2nd Ed.
Chapter 6
43
Chapter 6
Principles of Web Design
• Figure 6-14
Principles of Web Design 2nd Ed.
Chapter 6
44
Chapter 6
Principles of Web Design
Building a Style Sheet
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.
Principles of Web Design 2nd Ed.
Chapter 6
45
Chapter 6
Principles of Web Design
Building a Style Sheet
In this example, the content is the first chapter
from Mark Twain’s A Connecticut Yankee in
King Arthur’s Court. Figure 6-15 shows the
page marked up with standard HTML.
Principles of Web Design 2nd Ed.
Chapter 6
46
Chapter 6
Principles of Web Design
• Figure 6-15
Principles of Web Design 2nd Ed.
Chapter 6
47
Chapter 6
Principles of Web Design
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-16 shows the document divisions
you could use for this type of document
Principles of Web Design 2nd Ed.
Chapter 6
48
Chapter 6
Principles of Web Design
• Figure 6-16
Principles of Web Design 2nd Ed.
Chapter 6
49
Chapter 6
Principles of Web Design
Standard Paragraph Style
p
{
font-family: arial,
helvetica, sans-serif;
font-size: .85em;
line-height: 26px;
margin-left: 20px;
margin-right: 20px;}
Principles of Web Design 2nd Ed.
Chapter 6
50
Chapter 6
Principles of Web Design
• Figure 6-17
Principles of Web Design 2nd Ed.
Chapter 6
51
Chapter 6
Principles of Web Design
Chapter Number Style
div.chapnumber {
font-size: 2em;
line-height: 48px;
font-weight: bold
margin: 20px;
background-color: gray;
color: white}
Principles of Web Design 2nd Ed.
Chapter 6
52
Chapter 6
Principles of Web Design
• Figure 6-18
Principles of Web Design 2nd Ed.
Chapter 6
53
Chapter 6
Principles of Web Design
Chapter Title Style
div.chaptitle {
font-size: 1.5em;
line-height: 40px;
font-weight: bold;
letter-spacing: 4px
margin-left: 20px;}
Principles of Web Design 2nd Ed.
Chapter 6
54
Chapter 6
Principles of Web Design
• Figure 6-19
Principles of Web Design 2nd Ed.
Chapter 6
55
Chapter 6
Principles of Web Design
Credit Style
div.credit {
text-align: right;
font-size: .85em;
border-bottom: solid 1px;
line-height: 26px;
margin-left: 20px}
Principles of Web Design 2nd Ed.
Chapter 6
56
Chapter 6
Principles of Web Design
• Figure 6-20
Principles of Web Design 2nd Ed.
Chapter 6
57
Chapter 6
Principles of Web Design
Summary
• Use type 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
Principles of Web Design 2nd Ed.
Chapter 6
58
Chapter 6
Principles of Web Design
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 easyto-use language, you’ll have a hard time
going back to relying on the <font> element.
Principles of Web Design 2nd Ed.
Chapter 6
59
Chapter 6
Principles of Web Design
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.
Principles of Web Design 2nd Ed.
Chapter 6
60