Web Typography Chapter 6

Transcription

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
Objectives
• Specify CSS font properties and block-level
space values
• Build a style sheet
Chapter 6
3
Chapter 6
Type Design Principles
•
•
•
•
Choose fewer fonts and sizes
Choose available fonts
Design for legibility
Avoid using text as graphics
Chapter 6
4
Chapter 6
• Figure 6-1
• Figure 6-2
Chapter 6
5
Chapter 6
• Table 6-1
Chapter 6
6
Chapter 6
• Figure 6-3
Chapter 6
7
Chapter 6
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.
Chapter 6
8
Chapter 6
• Figure 6-4
Chapter 6
9
Chapter 6
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
Chapter 6
10
Chapter 6
• 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
Chapter 6
11
Chapter 6
• Figure 6-5
Chapter 6
12
Chapter 6
• 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
Chapter 6
13
Chapter 6
• Figure 6-6
Chapter 6
14
Chapter 6
CSS Selection Techniques
•
•
•
•
Select single elements
Select multiple elements
Select by context
Select with the CLASS attribute
Chapter 6
15
Chapter 6
Selecting Single Elements
The following rule selects the H1 element:
<style type=”text/css”>
h1 {color: green;}
</style>
Chapter 6
16
Chapter 6
Selecting Multiple Elements
The following rule selects the H1 and H2
elements:
h1, h2 {color: green;}
</style>
Chapter 6
17
Chapter 6
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:
h1 i {color: blue;}
</style>
Chapter 6
18
Chapter 6
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.
Chapter 6
19
Chapter 6
• Figure 6-7
Chapter 6
20
Chapter 6
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
Chapter 6
21
Chapter 6
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:
div.intro {color:red;}
</style>
Chapter 6
22
Chapter 6
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>
Chapter 6
23
Chapter 6
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
Chapter 6
24
Chapter 6
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:
span.logo {color:red;}
</style>
Chapter 6
25
Chapter 6
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.
Chapter 6
26
Chapter 6
CSS Font Properties
•
•
•
•
•
•
•
Font families and alternates
Font size
Font weight
Line height
Letter spacing
Text indent
Color
Chapter 6
27
Chapter 6
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
Chapter 6
28
Chapter 6
• Table 6-2
Chapter 6
29
Chapter 6
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.
Chapter 6
30
Chapter 6
Specifying Font Size
The following rule sets the <blockquote>
element to 1.5em Arial:
blockquote {font-family: arial;
font-size: 1.5em;}
Chapter 6
31
Chapter 6
• Figure 6-8
Chapter 6
32
Chapter 6
Specifying Font Weight
The following rule shows the addition of the
font-weight property to the rule:
font-size: 1.5em; font-weight:
bold;}
Chapter 6
33
Chapter 6
• Figure 6-9
Chapter 6
34
Chapter 6
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:
bold; line-height: 30pt;}
Chapter 6
35
Chapter 6
• Figure 6-10
Chapter 6
36
Chapter 6
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
bold; line-height: 30pt;
letter-spacing: 2pt;}
Chapter 6
37
Chapter 6
• Figure 6-11
Chapter 6
38
Chapter 6
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
bold; line-height: 30pt;
letter-spacing: 2pt; textindent: 24pt;}
Chapter 6
39
Chapter 6
• Figure 6-12
Chapter 6
40
Chapter 6
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;}
Chapter 6
41
Chapter 6
• Figure 6-13
Chapter 6
42
Chapter 6
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
Chapter 6
43
Chapter 6
• Figure 6-14
Chapter 6
44
Chapter 6
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.
Chapter 6
45
Chapter 6
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.
Chapter 6
46
Chapter 6
• Figure 6-15
Chapter 6
47
Chapter 6
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
Chapter 6
48
Chapter 6
• Figure 6-16
Chapter 6
49
Chapter 6
Standard Paragraph Style
p
{
font-family: arial,
helvetica, sans-serif;
font-size: .85em;
line-height: 26px;
margin-left: 20px;
margin-right: 20px;}
Chapter 6
50
Chapter 6
• Figure 6-17
Chapter 6
51
Chapter 6
Chapter Number Style
div.chapnumber {
font-size: 2em;
line-height: 48px;
font-weight: bold
margin: 20px;
background-color: gray;
color: white}
Chapter 6
52
Chapter 6
• Figure 6-18
Chapter 6
53
Chapter 6
Chapter Title Style
div.chaptitle {
font-size: 1.5em;
line-height: 40px;
font-weight: bold;
letter-spacing: 4px
margin-left: 20px;}
Chapter 6
54
Chapter 6
• Figure 6-19
Chapter 6
55
Chapter 6
Credit Style
div.credit {
text-align: right;
font-size: .85em;
border-bottom: solid 1px;
line-height: 26px;
margin-left: 20px}
Chapter 6
56
Chapter 6
• Figure 6-20
Chapter 6
57
Chapter 6
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
Chapter 6
58
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 easyto-use language, you’ll have a hard time
going back to relying on the <font> element.
Chapter 6
59
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.
Chapter 6
60

Web Typography Chapter 6

Transcription

Similar documents

How to use CSS to format the elements of a web page

Carlos Amorales

Responsive Design Essentials

codetalk - St. Joseph Center

Max Lucado Sheila Walsh Lisa Harper And Musical Guest

EP / FP-700

How to transfer font onto a foam tombstone.

EOS V3MODIFIER Plus

Feb 2009 - William Blinn Communications

- SageFrame