Microsoft Expression Web-Illustrated Unit M: Advanced Typography Using CSS

1. Microsoft Expression Web-IllustratedUnit 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 Microsoft Expression Web - Illustrated

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

4. Understanding the Importanceof Typography • Typology choices affect • Visual design • Eye fatigue • Legibility • Accessibility and download times Microsoft Expression Web - Illustrated

5. Understanding the Importanceof Typography Typography can decrease and improve legibility Microsoft Expression Web - Illustrated

6. Controlling Line Length Line length is the width of a block of text Affects the aesthetics of a page Very short or very long lines decrease comprehension Microsoft Expression Web - Illustrated

7. Controlling Line Length Menu page with page_content div selected Microsoft Expression Web - Illustrated

8. Controlling Line Length Microsoft Expression Web - Illustrated

9. Using the Line-Height Property • Controls the amount of space between lines of text in a paragraph • Also known as leading • Best to specify as a percentage • The white space will change proportionally • Most browsers use a setting between 120 and 130% Microsoft Expression Web - Illustrated

10. Using the Line-Height Property Microsoft Expression Web - Illustrated

11. Using the Line-Height Property An example of a Menu page with increased line spacing Microsoft Expression Web - Illustrated

12. Using the Text-Transform Property Allows you to specify how text is displayed Override the case in which the text was originally entered Microsoft Expression Web - Illustrated

13. Using the Letter-Spacing Property Controls the amount of white space between letters in a word Negative values decreases space Setting positive vales increases the space Microsoft Expression Web - Illustrated

14. Using the Letter-Spacing Property Makes text easier to read / visual interest Fonts make a big difference on the need for spacing Microsoft Expression Web - Illustrated

15. Using the Letter-Spacing Property Negative value for letter-spacing Microsoft Expression Web - Illustrated

16. Creating and Applying aDrop Cap Style The first letter of a paragraph Styled to be larger in size and drop down into the text of the paragraph Commonly used in print Adds drama / professional polish Microsoft Expression Web - Illustrated

17. Creating and Applying aDrop Cap Style Microsoft Expression Web - Illustrated

18. Creating and Applying aDrop Cap Style • Three key elements • Increase font size as compared to paragraph • Make letter drop to the left side • Increase line height to give the letter room to drop Microsoft Expression Web - Illustrated

19. Creating and Applying aDrop Cap Style An example of a letter with a .dropcap style applied Microsoft Expression Web - Illustrated

20. Creating and Applying aPull Quote Style A quote or excerpt summary that is formatted with a larger font size Placed on the page to draw attention Commonly used in print and on the Web Microsoft Expression Web - Illustrated

21. Creating and Applying aPull Quote Style • To create a pull quote with CSS you must: • Float the quote to the side • Make font size larger • Adjust the padding • You can also add more text effects Microsoft Expression Web - Illustrated

22. Creating and Applying aPull Quote Style Microsoft Expression Web - Illustrated

23. Creating and Applying aPull Quote Style Example of a menu page with styled pull quote Microsoft Expression Web - Illustrated

24. Creating AdvancedTypography Effects Text with h3 tags applied Microsoft Expression Web - Illustrated

25. Creating AdvancedTypography Effects Combine simple CSS properties in different ways Creates interesting effects Applied to regular headings to dress up your pages Microsoft Expression Web - Illustrated

26. Creating AdvancedTypography Effects Microsoft Expression Web - Illustrated

27. Creating AdvancedTypography Effects Example of page with different styles Microsoft Expression Web - Illustrated