1. Chapter 6 Web Typography

2. Principles of Web Design 2nd Ed. Chapter 6
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

3. Principles of Web Design 2nd Ed. Chapter 6
Objectives
Specify CSS font properties and block-level space values
Build a style sheet
Principles of Web Design 2nd Ed. Chapter 6

4. Type Design Principles
Principles of Web Design
Chapter 6
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

5. Principles of Web Design 2nd Ed. Chapter 6
Figure 6-1
Figure 6-2
Principles of Web Design 2nd Ed. Chapter 6

6. Principles of Web Design 2nd Ed. Chapter 6
Table 6-1
Principles of Web Design 2nd Ed. Chapter 6

7. Principles of Web Design 2nd Ed. Chapter 6
Figure 6-3
Principles of Web Design 2nd Ed. Chapter 6

8. Using the <font> Element
Principles of Web Design
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.
Principles of Web Design 2nd Ed. Chapter 6

9. Principles of Web Design 2nd Ed. Chapter 6
Figure 6-4
Principles of Web Design 2nd Ed. Chapter 6

10. Using Cascading Style Sheets
Principles of Web Design
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
Principles of Web Design 2nd Ed. Chapter 6

11. Using Cascading Style Sheets
Principles of Web Design
Chapter 6
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

12. Principles of Web Design 2nd Ed. Chapter 6
Figure 6-5
Principles of Web Design 2nd Ed. Chapter 6

13. Using Cascading Style Sheets
Principles of Web Design
Chapter 6
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

14. Principles of Web Design 2nd Ed. Chapter 6
Figure 6-6
Principles of Web Design 2nd Ed. Chapter 6

15. CSS Selection Techniques
Principles of Web Design
Chapter 6
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

16. Selecting Single Elements
Principles of Web Design
Chapter 6
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

17. Selecting Multiple Elements
Principles of Web Design
Chapter 6
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

18. Principles of Web Design 2nd Ed. 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:
<style type=”text/css”>
h1 i {color: blue;}
</style>
Principles of Web Design 2nd Ed. Chapter 6

19. Selecting with the CLASS Attribute
Principles of Web Design
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.
Principles of Web Design 2nd Ed. Chapter 6

20. Principles of Web Design 2nd Ed. Chapter 6
Figure 6-7
Principles of Web Design 2nd Ed. Chapter 6

21. Working with the <div> Element
Principles of Web Design
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
Principles of Web Design 2nd Ed. Chapter 6

22. Working with the <div> Element
Principles of Web Design
Chapter 6
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

23. Working with the <div> Element
Principles of Web Design
Chapter 6
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

24. Working with the <span> Element
Principles of Web Design
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
Principles of Web Design 2nd Ed. Chapter 6

25. Working with the <span> Element
Principles of Web Design
Chapter 6
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

26. Working with the <span> Element
Principles of Web Design
Chapter 6
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

27. Principles of Web Design 2nd Ed. Chapter 6
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

28. CSS Measurement Values
Principles of Web Design
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
Principles of Web Design 2nd Ed. Chapter 6

29. Principles of Web Design 2nd Ed. Chapter 6
Table 6-2
Principles of Web Design 2nd Ed. Chapter 6

30. Building Scalable Pages
Principles of Web Design
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.
Principles of Web Design 2nd Ed. Chapter 6

31. Principles of Web Design 2nd Ed. Chapter 6
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

32. Principles of Web Design 2nd Ed. Chapter 6
Figure 6-8
Principles of Web Design 2nd Ed. Chapter 6

33. Specifying Font Weight
Principles of Web Design
Chapter 6
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

34. Principles of Web Design 2nd Ed. Chapter 6
Figure 6-9
Principles of Web Design 2nd Ed. Chapter 6

35. Specifying Line Height
Principles of Web Design
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:
blockquote {font-family: arial; font-size: 1.5em; font-weight: bold; line-height: 30pt;}
Principles of Web Design 2nd Ed. Chapter 6

36. Principles of Web Design 2nd Ed. Chapter 6
Figure 6-10
Principles of Web Design 2nd Ed. Chapter 6

37. Specifying Letter Spacing
Principles of Web Design
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 font-size: 1.5em; font-weight: bold; line-height: 30pt; letter-spacing: 2pt;}
Principles of Web Design 2nd Ed. Chapter 6

38. Principles of Web Design 2nd Ed. Chapter 6
Figure 6-11
Principles of Web Design 2nd Ed. Chapter 6

39. Specifying Text Indent
Principles of Web Design
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 font-size: 1.5em; font-weight: bold; line-height: 30pt; letter-spacing: 2pt; text-indent: 24pt;}
Principles of Web Design 2nd Ed. Chapter 6

40. Principles of Web Design 2nd Ed. Chapter 6
Figure 6-12
Principles of Web Design 2nd Ed. Chapter 6

41. Specifying Background Colors
Principles of Web Design
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; background-color: black;}
Principles of Web Design 2nd Ed. Chapter 6

42. Principles of Web Design 2nd Ed. Chapter 6
Figure 6-13
Principles of Web Design 2nd Ed. Chapter 6

43. Specifying Block-Level Spacing
Principles of Web Design
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
Principles of Web Design 2nd Ed. Chapter 6

44. Principles of Web Design 2nd Ed. Chapter 6
Figure 6-14
Principles of Web Design 2nd Ed. Chapter 6

45. Principles of Web Design 2nd Ed. 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.
Principles of Web Design 2nd Ed. Chapter 6

46. Principles of Web Design 2nd Ed. 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.
Principles of Web Design 2nd Ed. Chapter 6

47. Principles of Web Design 2nd Ed. Chapter 6
Figure 6-15
Principles of Web Design 2nd Ed. Chapter 6

48. Setting up Document Divisions
Principles of Web Design
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
Principles of Web Design 2nd Ed. Chapter 6

49. Principles of Web Design 2nd Ed. Chapter 6
Figure 6-16
Principles of Web Design 2nd Ed. Chapter 6

50. Standard Paragraph Style
Principles of Web Design
Chapter 6
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

51. Principles of Web Design 2nd Ed. Chapter 6
Figure 6-17
Principles of Web Design 2nd Ed. Chapter 6

52. Principles of Web Design 2nd Ed. Chapter 6
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

53. Principles of Web Design 2nd Ed. Chapter 6
Figure 6-18
Principles of Web Design 2nd Ed. Chapter 6

54. Principles of Web Design 2nd Ed. Chapter 6
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

55. Principles of Web Design 2nd Ed. Chapter 6
Figure 6-19
Principles of Web Design 2nd Ed. Chapter 6

56. Principles of Web Design 2nd Ed. Chapter 6
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

57. Principles of Web Design 2nd Ed. Chapter 6
Figure 6-20
Principles of Web Design 2nd Ed. Chapter 6

58. Principles of Web Design 2nd Ed. 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
Principles of Web Design 2nd Ed. Chapter 6

59. Principles of Web Design 2nd Ed. 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.
Principles of Web Design 2nd Ed. Chapter 6

60. Principles of Web Design 2nd Ed. 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.
Principles of Web Design 2nd Ed. Chapter 6