Upload
julie-bruce
View
217
Download
1
Tags:
Embed Size (px)
Citation preview
Principles of Web Design6th Edition
Chapter 5 – Web Typography
2
Objectives
• Understand type design principles• Understand Cascading Style Sheets (CSS)
measurement units• Use the CSS font properties• Use the CSS text properties• Build a font and text properties style sheet• Customize bulleted and numbered lists
3
Understanding Type Design Principles
4
Understanding Type Design Principles
• Choose fewer fonts and sizes• Choose available fonts• Design for legibility• Avoid using text as graphics• Text choices become more important for
smartphones
5
6
Choose Fewer Fonts and Sizes
• Your pages will look cleaner when you choose fewer fonts and sizes of type
• Decide on a font for each different level of topic importance, such as page headings, section headings, and body text
• Communicate the hierarchy of information with changes in the size, weight, or color of the typeface
7
8
Use Common Web Fonts
• The user’s browser and operating system determine how a font is displayed
• To control more effectively how text appears on your pages, think in terms of font families, such as serif and sans-serif typefaces
9
10
11
Using Proprietary Fonts
• The CSS3 font-face property lets you link to a font, download it, and use it in style rules
• The common browsers support the font-face property, though they each implement it differently
• The font-face property opens a new range of fonts to make web pages more attractive and legible
• Web designers or the clients they work with must be prepared to pay licensing fees
12
13
Design for Legibility
• Browser version, operating system, and video capabilities can produce variations in the weight, spacing, and rendering of the font families to individual users
14
15
Avoid Creating Text as Graphics
• New font options means less text as graphics• Most web sites use text graphics in one form or
another whether for a main logo, banner, or advertisement
• Because you add download overhead with every additional graphic, save text graphics for important purposes
• Whenever possible, use HTML-styled text on your pages, including creating HTML and CSS-based navigation
16
Understanding CSS Measurement Units
17
Understanding CSS Measurement Units
• CSS offers a variety of measurement units• The measurement values you choose depends
on the destination medium• For print media, use absolute units of
measurement• For the web, use relative units of
measurement
18
19
Absolute Units
• Specify a fixed valueP {margin: 1.25in;}
• Cannot be scaled to client display• Should only be used when exact
measurements of destination medium are known
20
Relative Units
• Enables scalable web pages that adapt to different display types and sizes
• Recommended method for web page design• 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
21
The em Unit• The em is a printing measurement, traditionally equal to
the horizontal length of the capital letter M in any given font size
• In CSS, the em unit is equal to the font size of an element• It can be used for both horizontal and vertical
measurement• The em is a printing measurement, traditionally equal to
the horizontal length of the capital letter M in any given font size
• In CSS, the em unit is equal to the font size of an element• It can be used for both horizontal and vertical
measurement
22
Percentages
• Percentages for fonts work exactly the same as ems
• For example, if the default paragraph font size is 12-point text, a 100% font size equals 12 point; a font size set to 125% based on a 12-point default would be 15 points.
23
The ex Unit
• The ex unit is equal to the height of the lowercase letter x in any given font
• The height of the lowercase letter x varies widely from one typeface to another
24
25
The rem Unit
• Works exactly like the em unit, but relative to the root element of the document
26
Viewport Percentage Units
• These units are relative to the size of the device viewport window
• Similar to percentage units, except they are based on the root container rather than immediate parent container
27
Using the CSS Font Properties
28
Using the CSS Font Properties
• font-family• font-face• font-size• font-style• font-variant• font-weight• font (shorthand property)
29
Specifying Font Family
• Allows specification of generic font family names (e.g., sans-serif) or a specific name (e.g., Arial)p {font-family: sans-serif;}
p {font-family: arial;}
30
Generic Font Families
• Serif• Sans serif• Monospace• Cursive• Fantasy
31
32
Specific Font Families
• The font-family property lets you declare a specific font family such as Arial or Verdana
• The user must have the font installed on his or her computer; otherwise, the browser uses the default font
33
Font Fallbacks
• You can specify a list of alternate fonts• The browser will attempt to load each
successive font in the list• If no fonts match, the browser falls back to the
default fontp {font-family: arial, helvetica, sans-serif;}
34
Specifying Font Face
• The @font-face rule lets you specify a font to be downloaded
• In the style sheet:
@font-face {font-family: Generica;src: url(http://www.generic.com/fonts/generica.ttf)}
• In the document:
h1 {font-family: generica, serif;}
35
Specifying Font Size
• The font-size property gives you control over the specific sizing of your type
• You can choose from various length units such as ems or percentages
• The following rule sets the block quote element to 1.5 em Arial:blockquote {font-family: arial, sans-serif; font-size: 1.5em;}
36
37
Specifying Font Style
• This font-style property lets you specify italic text
• Remember that italic text is hard to read on a computer display
• Use italics for special emphasis only• The following rule sets italicized text for the
note class attribute.note {font-style: italic;}
38
Specifying Font Variant
• The font-variant property lets you define small capitals
39
40
Specifying Font Weight
• The font-weight property lets you set the weight of the typeface
• You can use numerical keyword values• The following style rule sets the warning class
to bold.warning {font-weight: bold;}
41
Using the Font Shortcut Property
• The font shortcut property lets you abbreviate the more verbose individual property listings• The following rules produce the same resultsp {font-weight: bold; font-size: 18pt; line-height: 24pt; font-family: arial;}
p {font: bold 18pt/24pt arial;}
42
Using the CSS Text Properties
43
Using the CSS Text Properties
• text-indent• text-align• line-height• vertical-align• letter-spacing• word-spacing• white-space• text-decoration• text-transform• text-shadow
44
Specifying Text Indents
• Use the text-indent property to set the amount of indentation for the first line of text and element such as a paragraph
• You can specify a length or percentage value• The following rules set an indent of 2em for
the <p> element and -2em for the <blockquote> element:p {text-indent: 2em;}blockquote {text-indent: −2em;}
45
46
Specifying Text Alignment
• Use the text-align property to set a horizontal alignment for the lines of text and element
• You can specify for alignment values– Left– Center– Right– Justify
• The following style rule sets the P element to justified alignmentp {text-align: justify;}
47
48
Specifying Line Height
• You can specify either a length or percentage value for the line height
• Line height is also known as leading the white space between lines of text
• The following rule sets the line height to 150%p {line-height: 150%;}
49
50
Specifying Vertical Alignment
• The vertical-align property lets you adjust the vertical line of text within the line box
• Vertical line works only on in-line elements• You can use this property to superscript or
subscript characters• The baseline sub and super values are the most
evenly supported• You can also use vertical alignment to align text
with graphics
51
52
53
Specifying Letter Spacing
• The letter-spacing property lets you adjust the white space between letters, often called kerning
• Length you specify is added to the default letter spacing
• The following rule sets the letter spacing to four pixels:h1 {letter-spacing: 4px;}
54
55
Specifying Word Spacing
• The word-spacing property lets you adjust the white space between words in the text
• The length you specify is added to the default spacing
• The following rule sets the word spacing to 2 emh1 {word-spacing: 2em;}
56
57
Specifying Text Decoration
• The text-decoration property lets you apply line effects to your text
• Underlining should not be used except for hypertext links
• Some sites choose to remove the underlining from the hypertext links with this property
58
59
Specifying White Space
• The white-space property lets you control how paragraph text wraps and preserve white space
60
61
Specifying Capitalization
• The text-transform property lets you change the capitalization of text
• Useful for headings• Lets you change text formatting without
actually editing the texth1 {text-transform: uppercase;}
62
Specifying Text Shadow
• The text shadow property lets you define a shadow that is displayed behind text
• You can specify the horizontal and vertical offset as well as the blur value
• The first two length values indicate the horizontal and vertical offset
• The third length value specifies the blur amounth1 {text-shadow: 2px 2px 2px #666;}
63
64
Customizing Bulleted and Numbered Lists
65
Customizing Bulleted and Numbered Lists
• The list-style properties let you control the visual characteristics of bulleted and numbered lists
66
67
Specifying the list-style-type Property
• The list-style-type property lets you specify one of three types of markers for a list
• You can choose a symbol, a numbering system, or an alphabetical system
68
69
Specifying the list-style-image Property
• The list-style-image property lets you easily attach an image to a list and have it repeated as the list symbol
• The following code shows the style rule that attaches an image to a bulleted list:ul {list-style-image: url(pawprint.gif);}
70
71
Specifying the list-style-position Property
• The list-style-position property lets you determine the placement of the list marker
72
73
Summary
• Use type to communicate information structure• HTML text downloads faster than graphics-based
text• Use fonts that appear consistently across operating
systems• Standardize your styles• Use external style sheets• Test your work• Design for legibility
74
Summary
• Choose the correct measurement unit based on the destination medium
• Use font properties to control the look of your letter forms
• Use text spacing properties to create more visually interesting and legible text