1 / 56

Chapter 7 Web Typography

Chapter 7 Web Typography. Principles of Web Design, 4 th Edition. Objectives. Understand type design principles Understand Cascading Style Sheets (CSS) measurement units Use the CSS font properties Use the CSS text spacing properties Create a font and text properties style sheet.

scott-chen
Télécharger la présentation

Chapter 7 Web Typography

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 7Web Typography Principles of Web Design, 4th Edition

  2. Objectives • Understand type design principles • Understand Cascading Style Sheets (CSS) measurement units • Use the CSS font properties • Use the CSS text spacing properties • Create a font and text properties style sheet Principles of Web Design, 4th Edition

  3. Understanding Type Design Principles Principles of Web Design, 4th Edition

  4. Understanding Type Design Principles • Choose fewer fonts and sizes • Choose available fonts • Design for legibility • Avoid using text as graphics Principles of Web Design, 4th Edition

  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 Principles of Web Design, 4th Edition

  6. Principles of Web Design, 4th Edition

  7. Use Available 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 Principles of Web Design, 4th Edition

  8. Principles of Web Design, 4th Edition

  9. Principles of Web Design, 4th Edition

  10. Design for Legibility • Figure 7-3 shows the same paragraph in Times, Trebuchet, Arial, and Verdana at the default browser size in both Internet Explorer (on the left) and Mozilla Firefox • Notice that subtle variations in the weight, spacing, and rendering of the font families affect the way each is displayed to the user Principles of Web Design, 4th Edition

  11. Principles of Web Design, 4th Edition

  12. Avoid Using Text as Graphics • Save text graphics for important purposes, such as the main logo for your page or as reusable navigation graphics • Remember that including text as graphics means users cannot search for that text • Whenever possible, use HTML-styled text on your pages Principles of Web Design, 4th Edition

  13. Understanding CSS Measurement Units Principles of Web Design, 4th Edition

  14. Understanding CSS Measurement Units • 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, 4th Edition

  15. Principles of Web Design, 4th Edition

  16. 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 Principles of Web Design, 4th Edition

  17. 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 Principles of Web Design, 4th Edition

  18. 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 Principles of Web Design, 4th Edition

  19. The ex Unit • The ex unit is equal to the height of the lowercase letter x in any given font • As shown in Figure 7-4, the height of the lowercase letter x varies widely from one typeface to another Principles of Web Design, 4th Edition

  20. 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 Principles of Web Design, 4th Edition

  21. Percentages • Percentage values are always relative to another value • For example, the following rule sets the font size for the <body> element to 1.5 times the size of the browser default: body {font-size: 150%;} • Child elements inherit the percentage values of their parents • For example, the < b> text in the following example is 125% larger than the <p> that contains it: p {font-size: 12pt;} p b {font-size: 125%;} Principles of Web Design, 4th Edition

  22. Using the CSS Font Properties Principles of Web Design, 4th Edition

  23. Using the CSS Font Properties • font-family • font-size • font-style • font-variant • font-weight • font (shorthand property) Principles of Web Design, 4th Edition

  24. 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;} Principles of Web Design, 4th Edition

  25. Principles of Web Design, 4th Edition

  26. Specifying Font Size • The following rule sets the <p> element to 1.5em Arial: • p {font-family: arial; font-size: 1.5em;} Principles of Web Design, 4th Edition

  27. Principles of Web Design, 4th Edition

  28. Specifying Font Style • The font-style property lets you specify italic or oblique text • p {font-style: italic;} Principles of Web Design, 4th Edition

  29. Specifying Font Variant • The font-variant property lets you define small capitals, which are often used for chapter openings, acronyms, and other special purposes • h1 {font-variant: small-caps;} Principles of Web Design, 4th Edition

  30. Principles of Web Design, 4th Edition

  31. Specifying Font Weight • The font-weight property lets you set the weight of the typeface • p {font-weight: bold;} Principles of Web Design, 4th Edition

  32. 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;} Principles of Web Design, 4th Edition

  33. Using the CSS Text Spacing Properties Principles of Web Design, 4th Edition

  34. CSS Text Spacing Properties • text-indent • text-align • text-decoration • line-height • vertical-align • letter-spacing • word-spacing Principles of Web Design, 4th Edition

  35. Specifying Text Indents • 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: • p {font-family: text-indent: 24pt;} Principles of Web Design, 4th Edition

  36. Principles of Web Design, 4th Edition

  37. Specifying Text Alignment • Use the text-align property to set horizontal alignment for the lines of text in an element • p {text-align: justify} Principles of Web Design, 4th Edition

  38. Principles of Web Design, 4th Edition

  39. Specifying Text Decoration • Use the text-decoration property to add or remove underlining from text • The following code removes the underlining from hypertext links • a {text-decoration: none} Principles of Web Design, 4th Edition

  40. Principles of Web Design, 4th Edition

  41. 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 2 em: • p {line-height: 2 em;} Principles of Web Design, 4th Edition

  42. Principles of Web Design, 4th Edition

  43. Principles of Web Design, 4th Edition

  44. Specifying Vertical Alignment • The vertical-align property lets you adjust the vertical alignment of text within the line box • Vertical-align works on inline elements only Principles of Web Design, 4th Edition

  45. Principles of Web Design, 4th Edition

  46. Principles of Web Design, 4th Edition

  47. Specifying Vertical Alignment (continued) • You can also use vertical alignment to align text with graphics • The following rule, added to the <img> element with the style attribute, sets the vertical alignment to top: <img src=”image.gif” style=”vertical-align: text-top;”> Principles of Web Design, 4th Edition

  48. Principles of Web Design, 4th Edition

  49. 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 4 points • h1 {letter-spacing: 4pt;} Principles of Web Design, 4th Edition

  50. Principles of Web Design, 4th Edition

More Related