1. Microsoft Expression Web 3 – Illustrated Unit M: Advanced Typography Using CSS

2. Objectives Understand the importance of typography Control line length Use the line-height property Use the text-transform property Expression Web 3 - Illustrated 2

3. Objectives (continued) Use the letter-spacing property Create and apply a drop cap style Create and apply a pull quote style Create advanced typography effects Expression Web 3 - Illustrated 3

4. Understand the Importance of Typography Typography – the arrangement of text on the page or screen. Typography includes the use of font families, sizes, colors, and white space. Typography affects the following:  Visual design – should be coordinated and convey tone of site.  Eye fatigue – reading content on screen is more tiring to the human eye than reading same content on the printed page. Expression Web 3 - Illustrated 4

5. Understand the Importance of Typography (continued) Typography affects the following (continued):  Legibility – describes how well text can be recognized and read. Font size, family, contrast, and white space can affect legibility.  Accessibility and download times – Using CSS to style text elements rather than images can increase accessibility and download times. Expression Web 3 - Illustrated 5

6. Understand the Importance of Typography (continued) Expression Web 3 - Illustrated 6

7. Controlling Line Length Line length – the width of a block of text. Line length affects aesthetics and readability. Very short or very long lines of text decrease reading comprehension and increase eye strain. Expression Web 3 - Illustrated 7

8. Controlling Line Length (continued) Expression Web 3 - Illustrated 8

9. Controlling Line Length (continued) Expression Web 3 - Illustrated 9

10. Using the Line-Height Property Leading (rhymes with wedding) – using the line-height property to control the amount of space between lines of text within a paragraph. Leading is best defines as a percentage rather than an absolute value such as a pixel. Setting a line height less than 100% results in lines running together on the screen. Justified text is text that is spaced so both the right and left margins are equal. Expression Web 3 - Illustrated 10

11. Using the Line-Height Property (continued) Expression Web 3 - Illustrated 11

12. Using the Text-Transform Property The text-transform property allows you to specify that text be displayed in uppercase, lowercase, or capitalized. This setting overrides the case in which the text was originally entered in. Text in all uppercase can be difficult to read, so use this feature judiciously. Expression Web 3 - Illustrated 12

13. Using the Text-Transform Property (continued) Expression Web 3 - Illustrated 13

14. Using the Letter-Spacing Property The letter-spacing property controls the amount of white space between letters in a word. Setting a negative value decreases spacing between letters, setting a positive value increases spacing. Expression Web 3 - Illustrated 14

15. Using the Letter-Spacing Property (continued) Expression Web 3 - Illustrated 15

16. Creating and Applying a Drop Cap Style Drop cap – the first letter of a paragraph that has been styled to be larger in size and dropped down into the paragraph. Three keys to making drop caps:  Increase font size.  Make letter drop down on left side so paragraph text wraps around it.  Increase line height. Expression Web 3 - Illustrated 16

17. Creating and Applying a Drop Cap Style (continued) Expression Web 3 - Illustrated 17

18. Creating and Applying a Pull Quote Style Pull quote – a quote or excerpt that is formatted with a larger font size and placed on the page to draw visitors’ attention. The tag is used to give you a selector to use for the style rule. Expression Web 3 - Illustrated 18

19. Creating Advanced Typography Effects Advanced typography effects can be created by customizing the style properties. Expression Web 3 - Illustrated 19

20. Summary Typography is the arrangement of text on the page or screen. Typography affects visual design, eye fatigue, legibility, accessibility and download times. Line length is the width of a block of text and affects aesthetics and readability. The line-height property or leading controls the amount of space between lines of text within a paragraph. Expression Web 3 - Illustrated 20

21. Summary (continued) The text-transform property changes the case of text. The letter-spacing property controls the amount of white space between letters. Drop cap is when the first letter of a paragraph has been styled to be larger in size and dropped down into the paragraph. A pull quote is a quote or excerpt that is formatted with a larger font size and placed on the page to draw visitors’ attention. Expression Web 3 - Illustrated 21