Web Design Principles
5th
Edition
Chapter Five
Creating Web Typography
Objectives
When you complete this chapter, you will be able to:
• Understand type design principles
• Understand Cascading...
Understanding Type Design
Principles
3
Understanding Type Design
Principles
• Choose fewer fonts and sizes
• Choose available fonts
• Design for legibility
• Avo...
Choose Fewer Fonts and Sizes
• Your pages will look cleaner when you choose fewer
fonts and sizes of type
• Decide on a fo...
6Web Design Principles 5th
Ed.
Use Common Web Fonts
• The user’s browser and operating system
determine how a font is displayed
• To control more effecti...
8Web Design Principles 5th
Ed.
9Web Design Principles 5th
Ed.
Specifying Proprietary Web Fonts
• The CSS3 font-face property lets you link to a font,
download it, and use it in style r...
Design for Legibility
• Browser version, operating system, and video
capabilities can produce variations in the weight,
sp...
12Web Design Principles 5th
Ed.
Avoid Creating Text as Graphics
• New font options means less text as graphics
• Most Web sites use text graphics in one f...
Understanding CSS
Measurement Units
Understanding CSS
Measurement Units
• CSS offers a variety of measurement units
• The measurement values you choose depend...
16Web Design Principles 5th
Ed.
Absolute Units
• Specify a fixed value
P {margin: 1.25in;}
• Cannot be scaled to client display
• Should only be used when...
Relative Units
• Enables scalable Web pages that adapt to different
display types and sizes
• Recommended method for Web p...
The em Unit
• The em is a printing measurement, traditionally equal to
the horizontal length of the capital letter M in an...
Percentages
• Percentages for fonts work exactly the same as
ems
• For example, if the default paragraph font size is
12-p...
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...
22Web Design Principles 5th
Ed.
The px Unit
• Pixels are the basic picture element of a computer
display
• The size of the pixel is determined by the disp...
Using the CSS Font Properties
Using the CSS Font Properties
• font-family
• font-face
• font-size
• font-style
• font-variant
• font-weight
• font-stret...
Specifying Font Family
• Allows specification of generic font family
names (e.g., sans-serif) or a specific name
(e.g., Ar...
Generic Font Families
• Serif
• Sans serif
• Monospace
• Cursive
• Fantasy
27Web Design Principles 5th
Ed.
28Web Design Principles 5th
Ed.
Specific Font Families
• The font-family property lets you declare a specific
font family such as Arial or Verdana
• The u...
Font Fallbacks
• You can specify a list of alternate fonts
• The browser will attempt to load each successive
font in the ...
Specifying Font Face
• The @font-face property lets you specify a font to
be downloaded
• In the style sheet:
@font-face {...
Specifying Font Size
• The font-size property gives you control over the
specific sizing of your type
• You can choose fro...
33Web Design Principles 5th
Ed.
Specifying Font Style
• This font-style property lets you specify italic text
• Remember that italic text is hard to read ...
Specifying Font Variant
• The font-variant property lets you define small
capitals
35Web Design Principles 5th
Ed.
Specifying Font Weight
• The font-weight property lets you set the weight of
the typeface
• You can use numerical keyword ...
Specifying Font Stretch
• The font-stretch property lets you expand or
compress the font face
• This is a CSS3 property th...
Using the Font Shortcut Property
• The font shortcut property lets you abbreviate the more
verbose individual property lis...
Using the CSS Text Spacing
Properties
Using the CSS Text Spacing
Properties
• text-indent
• text-align
• line-height
• vertical-align
• letter-spacing
• word-sp...
Specifying Text Indents
• Use the text-indent property to set the amount of
indentation for the first line of text and ele...
42Web Design Principles 5th
Ed.
Specifying Text Alignment
• Use the text-align property to set a horizontal
alignment for the lines of text and element
• ...
44Web Design Principles 5th
Ed.
Specifying Line Height
• You can specify either a length or percentage value
for the line height
• Line height is also kno...
46Web Design Principles 5th
Ed.
Specifying Vertical Alignment
• The vertical-align property lets you adjust the
vertical line of text within the line box
...
48Web Design Principles 5th
Ed.
49Web Design Principles 5th
Ed.
Specifying Letter Spacing
• The letter-spacing property lets you adjust the
white space between letters, often called kern...
51Web Design Principles 5th
Ed.
Specifying Word Spacing
• The word-spacing property lets you adjust the
white space between words in the text
• The length...
Specifying Text Decoration
• The text-decoration property lets you apply line
effects to your text
• Underlining should no...
Specifying Capitalization
• The text-transform property lets you change the
capitalization of text
• Useful for headings
•...
Specifying Text Shadow
• The text shadow property lets you define a shadow
that is displayed behind text
• You can specify...
56Web Design Principles 5th
Ed.
Customizing Bulleted and
Numbered Lists
Customizing Bulleted and
Numbered Lists
• The list-style properties let you control the visual
characteristics of bulleted...
59Web Design Principles 5th
Ed.
Specifying the list-style-type
Property
• The list-style-type property lets you specify one of
three types of markers for ...
61Web Design Principles 5th
Ed.
Specifying the list-style-image
Property
• The list-style-image property lets you easily attach
an image to a list and hav...
63Web Design Principles 5th
Ed.
Specifying the list-style-position
Property
• The list-style-position property lets you determine
the placement of the lis...
65Web Design Principles 5th
Ed.
Summary
• Use type to communicate information structure
• HTML text downloads faster than graphics-based
text
• Use fonts ...
Summary
• Choose the correct measurement unit based on the
destination medium
• Use font properties to control the look of...
Upcoming SlideShare
Loading in …5
×

Ppt ch05

394 views
325 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
394
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
37
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ppt ch05

  1. 1. Web Design Principles 5th Edition Chapter Five Creating Web Typography
  2. 2. Objectives When you complete this chapter, you will be able to: • Understand type design principles • Understand Cascading Style Sheets (CSS) measurement units • Use the CSS font properties • Use the CSS text-spacing properties • Build a font and text properties style sheet • Customize bulleted and numbered lists 2Web Design Principles 5th Ed.
  3. 3. Understanding Type Design Principles 3
  4. 4. Understanding Type Design Principles • Choose fewer fonts and sizes • Choose available fonts • Design for legibility • Avoid using text as graphics Web Design Principles 5th Ed. 4
  5. 5. 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 5Web Design Principles 5th Ed.
  6. 6. 6Web Design Principles 5th Ed.
  7. 7. 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 7Web Design Principles 5th Ed.
  8. 8. 8Web Design Principles 5th Ed.
  9. 9. 9Web Design Principles 5th Ed.
  10. 10. Specifying Proprietary Web 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 10Web Design Principles 5th Ed.
  11. 11. 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 11Web Design Principles 5th Ed.
  12. 12. 12Web Design Principles 5th Ed.
  13. 13. 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 13Web Design Principles 5th Ed.
  14. 14. Understanding CSS Measurement Units
  15. 15. 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 15Web Design Principles 5th Ed.
  16. 16. 16Web Design Principles 5th Ed.
  17. 17. Absolute Units • Specify a fixed value P {margin: 1.25in;} • Cannot be scaled to client display • Should only be used when exact measurements of destination medium are known 17Web Design Principles 5th Ed.
  18. 18. 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 18Web Design Principles 5th Ed.
  19. 19. 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 19Web Design Principles 5th Ed.
  20. 20. 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. 20Web Design Principles 5th Ed.
  21. 21. 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 21Web Design Principles 5th Ed.
  22. 22. 22Web Design Principles 5th Ed.
  23. 23. The px Unit • Pixels are the basic picture element of a computer display • The size of the pixel is determined by the display resolution • Pixel measurements work well for computer displays, but they are not so well suited to other media, such as printing • Pixels are not a good choice for font sizing 23Web Design Principles 5th Ed.
  24. 24. Using the CSS Font Properties
  25. 25. Using the CSS Font Properties • font-family • font-face • font-size • font-style • font-variant • font-weight • font-stretch • font-size-adjust • font (shorthand property) 25Web Design Principles 5th Ed.
  26. 26. 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;} 26Web Design Principles 5th Ed.
  27. 27. Generic Font Families • Serif • Sans serif • Monospace • Cursive • Fantasy 27Web Design Principles 5th Ed.
  28. 28. 28Web Design Principles 5th Ed.
  29. 29. 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 29Web Design Principles 5th Ed.
  30. 30. 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 font p {font-family: arial, helvetica, sans- serif;} 30Web Design Principles 5th Ed.
  31. 31. Specifying Font Face • The @font-face property 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;} 31Web Design Principles 5th Ed.
  32. 32. 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;} 32Web Design Principles 5th Ed.
  33. 33. 33Web Design Principles 5th Ed.
  34. 34. 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;} 34Web Design Principles 5th Ed.
  35. 35. Specifying Font Variant • The font-variant property lets you define small capitals 35Web Design Principles 5th Ed.
  36. 36. 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;} 36Web Design Principles 5th Ed.
  37. 37. Specifying Font Stretch • The font-stretch property lets you expand or compress the font face • This is a CSS3 property that is not yet commonly supported h1 {font-family: sans-serif; font- stretch: expanded} 37Web Design Principles 5th Ed.
  38. 38. Using the Font Shortcut Property • The font shortcut property lets you abbreviate the more verbose individual property listings • The following rules produce the same results p {font-weight: bold; font-size: 18pt; line-height: 24pt; font-family: arial;} p {font: bold 18pt/24pt arial;} 38Web Design Principles 5th Ed.
  39. 39. Using the CSS Text Spacing Properties
  40. 40. Using the CSS Text Spacing Properties • text-indent • text-align • line-height • vertical-align • letter-spacing • word-spacing • text-decoration • text-transform • text-shadow 40Web Design Principles 5th Ed.
  41. 41. 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;} 41Web Design Principles 5th Ed.
  42. 42. 42Web Design Principles 5th Ed.
  43. 43. 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 alignment p {text-align: justify;} 43Web Design Principles 5th Ed.
  44. 44. 44Web Design Principles 5th Ed.
  45. 45. 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%;} 45Web Design Principles 5th Ed.
  46. 46. 46Web Design Principles 5th Ed.
  47. 47. 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 47Web Design Principles 5th Ed.
  48. 48. 48Web Design Principles 5th Ed.
  49. 49. 49Web Design Principles 5th Ed.
  50. 50. 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;} 50Web Design Principles 5th Ed.
  51. 51. 51Web Design Principles 5th Ed.
  52. 52. 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 em h1 {word-spacing: 2em;} 52Web Design Principles 5th Ed.
  53. 53. 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 53Web Design Principles 5th Ed.
  54. 54. 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 text h1 {text-transform: uppercase;} 54Web Design Principles 5th Ed.
  55. 55. 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 amount h1 {text-shadow: 2px 2px 2px #666;} 55Web Design Principles 5th Ed.
  56. 56. 56Web Design Principles 5th Ed.
  57. 57. Customizing Bulleted and Numbered Lists
  58. 58. Customizing Bulleted and Numbered Lists • The list-style properties let you control the visual characteristics of bulleted and numbered lists 58Web Design Principles 5th Ed.
  59. 59. 59Web Design Principles 5th Ed.
  60. 60. 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 60Web Design Principles 5th Ed.
  61. 61. 61Web Design Principles 5th Ed.
  62. 62. 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);} 62Web Design Principles 5th Ed.
  63. 63. 63Web Design Principles 5th Ed.
  64. 64. Specifying the list-style-position Property • The list-style-position property lets you determine the placement of the list marker 64Web Design Principles 5th Ed.
  65. 65. 65Web Design Principles 5th Ed.
  66. 66. 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 66Web Design Principles 5th Ed.
  67. 67. 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 67Web Design Principles 5th Ed.

×