Chapter 6 Web Typography

Chapter 6Web Typography

Chapter 5 Principles of Web Design 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

Chapter 5 Principles of Web Design Objectives • Specify CSS font properties and block-level space values • Build and apply style classes

Chapter 5 Principles of Web Design Type Design Principles • Choose fewer fonts and sizes • Choose available fonts • Design for legibility • Avoid using text as graphics

Chapter 6 Principles of Web Design

Chapter 5 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 strongly consider moving to CSS, and limit or replace the <FONT> element in your code

Chapter 5 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, settingleading, and specifying indents and alignment

Chapter 5 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

Chapter 5 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

Chapter 5 Principles of Web Design CSS Selection Techniques • Selecting single elements • Selecting multiple elements • Selecting by context • Selecting with the CLASS attribute

Chapter 5 Principles of Web Design Selecting Single Elements The following rule selects the H1 element: <STYLE TYPE=”text/css”> H1 {COLOR: GREEN} </STYLE>

Chapter 5 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>

Chapter 5 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>

Chapter 5 Principles of Web Design 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.

Chapter 5 Principles of Web Design 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.

Chapter 5 Principles of Web Design 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>

Chapter 5 Principles of Web Design 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>

Chapter 5 Principles of Web Design 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

Chapter 5 Principles of Web Design 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>

Chapter 5 Principles of Web Design 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.

Chapter 5 Principles of Web Design CSS Font Properties • Font families and alternates • Font size • Font weight • Line height • Letter spacing • Text indent • Color

Chapter 5 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.

Chapter 5 Principles of Web Design Specifying Font Size The following rule sets the <BLOCKQUOTE> element to 18-point Arial: BLOCKQUOTE {FONT-FAMILY: ARIAL; FONT-SIZE: 18pt}

Chapter 5 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: 18pt; FONT-WEIGHT: BOLD}

Chapter 5 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: 18pt; FONT-WEIGHT: BOLD; LINE-HEIGHT: 30pt}

Chapter 5 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: 18pt; FONT-WEIGHT: BOLD; LINE-HEIGHT: 30pt; LETTER-SPACING: 2pt}

Chapter 5 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: 18pt; FONT-WEIGHT: BOLD; LINE-HEIGHT: 30pt; LETTER-SPACING: 2pt; TEXT-INDENT: 24pt}

Chapter 5 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; BACKGROUND-COLOR: BLUE}

Chapter 5 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

Chapter 5 Principles of Web Design 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.

Chapter 5 Principles of Web Design 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.

Chapter 5 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-18 shows the document divisions you could use for this type of document.

Chapter 6 Web Typography