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

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

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

Understanding the Importance of Typography Typology choices affect  Visual design  Eye fatigue  Legibility  Accessibility and download times Microsoft Expression Web - Illustrated

Understanding the Importance of Typography Typography can decrease and improve legibility Microsoft Expression Web - Illustrated

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

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

Controlling Line Length Microsoft Expression Web - Illustrated

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

Using the Line-Height Property Microsoft Expression Web - Illustrated

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

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

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

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

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

Creating and Applying a Drop 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

Creating and Applying a Drop Cap Style Microsoft Expression Web - Illustrated

Creating and Applying a Drop 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

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

Creating and Applying a Pull 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

Creating and Applying a Pull 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

Creating and Applying a Pull Quote Style Microsoft Expression Web - Illustrated

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

Creating Advanced Typography Effects Microsoft Expression Web - Illustrated Text with h3 tags applied

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

Creating Advanced Typography Effects Microsoft Expression Web - Illustrated

Creating Advanced Typography Effects Microsoft Expression Web - Illustrated Example of page with different styles