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 why you should use Cascading Style Sheets (CSS) instead of the 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 Element Use to set font size and color and to specify font substitution With HTML 4.0, the tag has been deprecated in favor of CSS. To ensure forward compatibility, you should strongly consider moving to CSS, and limit or replace the 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 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: H1 {COLOR: GREEN}

20 Principles of Web Design Chapter 5 Selecting Multiple Elements The following rule selects the H1 and H2 elements: H1, H2 {COLOR: GREEN}

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 elements appear blue only within elements, use the following rule: H1 I {COLOR: BLUE}

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 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 The element lets you specify logical divisions within a document that have their own name and style properties. is a block-level element. It contains a leading and trailing carriage return. You can use with the CLASS attribute to create customized block-level elements.

25 Principles of Web Design Chapter 5 Working with To create a division, declare it within the element first. The following example specifies a division named INTRO as the selector for the rule: DIV.INTRO {COLOR:RED}

26 Principles of Web Design Chapter 5 Working with Next, specify the element in the document. Then use the CLASS attribute to specify the exact type of division. In the following example, the code defines the element as the special class named “INTRO.” Some text

27 Principles of Web Design Chapter 5 Working with The 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 element

28 Principles of Web Design Chapter 5 Working with To create a division, declare it within the element first. The following example specifies a span named LOGO the selector for the rule: SPAN.LOGO {COLOR:RED}

29 Principles of Web Design Chapter 5 Working with Next, specify the element in the document. Then use the CLASS attribute to specify the exact type of span. In the following example, the code defines the element as the special class named “LOGO.” Welcome to the Wonder Software 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 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 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: 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 Colors You 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 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 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.