chapter 6 web typography
Download
Skip this Video
Download Presentation
Chapter 6 Web Typography

Loading in 2 Seconds...

play fullscreen
1 / 60

Chapter 6 Web Typography Principles of Web Design 2nd Ed ... - PowerPoint PPT Presentation


  • 571 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Chapter 6 Web Typography Principles of Web Design 2nd Ed ...' - JasminFlorian


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
objectives

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

objectives3

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

type design principles

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

slide5

Chapter 6

Principles of Web Design

  • Figure 6-1
  • Figure 6-2

Principles of Web Design 2nd Ed. Chapter 6

slide6

Chapter 6

Principles of Web Design

  • Table 6-1

Principles of Web Design 2nd Ed. Chapter 6

slide7

Chapter 6

Principles of Web Design

  • Figure 6-3

Principles of Web Design 2nd Ed. Chapter 6

using the font element

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

slide9

Chapter 6

Principles of Web Design

  • Figure 6-4

Principles of Web Design 2nd Ed. Chapter 6

using cascading style sheets

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

Principles of Web Design 2nd Ed. Chapter 6

using cascading style sheets11

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

slide12

Chapter 6

Principles of Web Design

  • Figure 6-5

Principles of Web Design 2nd Ed. Chapter 6

using cascading style sheets13

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

slide14

Chapter 6

Principles of Web Design

  • Figure 6-6

Principles of Web Design 2nd Ed. Chapter 6

css selection techniques

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

selecting single elements

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

selecting multiple elements

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

selecting by context

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

selecting with the class attribute

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

slide20

Chapter 6

Principles of Web Design

  • Figure 6-7

Principles of Web Design 2nd Ed. Chapter 6

working with the div element

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

working with the div element22

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

working with the div element23

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

working with the span element

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

working with the span element25

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

working with the span element26

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

css font properties

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

css measurement values

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

slide29

Chapter 6

Principles of Web Design

  • Table 6-2

Principles of Web Design 2nd Ed. Chapter 6

building scalable pages

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

specifying font size

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

slide32

Chapter 6

Principles of Web Design

  • Figure 6-8

Principles of Web Design 2nd Ed. Chapter 6

specifying font weight

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

slide34

Chapter 6

Principles of Web Design

  • Figure 6-9

Principles of Web Design 2nd Ed. Chapter 6

specifying line height

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

slide36

Chapter 6

Principles of Web Design

  • Figure 6-10

Principles of Web Design 2nd Ed. Chapter 6

specifying letter spacing

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

slide38

Chapter 6

Principles of Web Design

  • Figure 6-11

Principles of Web Design 2nd Ed. Chapter 6

specifying text indent

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; text-indent: 24pt;}

Principles of Web Design 2nd Ed. Chapter 6

slide40

Chapter 6

Principles of Web Design

  • Figure 6-12

Principles of Web Design 2nd Ed. Chapter 6

specifying background colors

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; background-color: black;}

Principles of Web Design 2nd Ed. Chapter 6

slide42

Chapter 6

Principles of Web Design

  • Figure 6-13

Principles of Web Design 2nd Ed. Chapter 6

specifying block level spacing

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

slide44

Chapter 6

Principles of Web Design

  • Figure 6-14

Principles of Web Design 2nd Ed. Chapter 6

building a style sheet

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

building a style sheet46

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

slide47

Chapter 6

Principles of Web Design

  • Figure 6-15

Principles of Web Design 2nd Ed. Chapter 6

setting up document divisions

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

slide49

Chapter 6

Principles of Web Design

  • Figure 6-16

Principles of Web Design 2nd Ed. Chapter 6

standard paragraph style

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

slide51

Chapter 6

Principles of Web Design

  • Figure 6-17

Principles of Web Design 2nd Ed. Chapter 6

chapter number style

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

slide53

Chapter 6

Principles of Web Design

  • Figure 6-18

Principles of Web Design 2nd Ed. Chapter 6

chapter title style

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

slide55

Chapter 6

Principles of Web Design

  • Figure 6-19

Principles of Web Design 2nd Ed. Chapter 6

credit style

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

slide57

Chapter 6

Principles of Web Design

  • Figure 6-20

Principles of Web Design 2nd Ed. Chapter 6

summary

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

summary59

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

summary60

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

ad