+ Text & Font Styles Unit 3 Lesson 4

+ 5 Different Font Categories Sans Serif – block style fonts Example - Rockwell Easy to read and good to use when there is a large amount of text to read Serif – more formal style of font Example – Times New Romans Script – has the appearance of handwriting Example – Lucida Handwriting Monospace – font style looks like a typewriter Example – American Typewriter

+ Sans-Serif vs Serif Serif - Example: Goudy Old Style Refers to small embellishments on the letters Gives a fancier appearance Sans-Serif – Example: Comic Sans Sans means “without” Font without the serif enhancements (no embellishments on letters)

+ Picking Your Font 1 st things 1 st – you may have the font installed on your computer BUT if your web page visitors do not have that font, they will see the basic default font (usually Times New Romans) Common fonts for all computers:

+ Font Properties Font properties let you define specific attributes that affect the appearance of the font: Font Family – defines the font of the text which the style is being applied to Excepts specific font name or generic name of font Example: Font Variant – allows you to set font to small caps, or back to normal text Normal or small-caps Example:

+ Font Properties Font Weight – defines the level of bold that is applied to text Lighter, normal, bold, bolder or Example: Font Size – changes the size of the font Inches (in) or centimeters (cm) Example: Font Style – sets font to normal or italics Italic or Normal Example: **Style sheets allow you to specify a backup font in case your font will not show on the visitors website**

+ More Font Properties text-decoration: add or removes a line above, below or through text None, underline, overline, line-through vertical-align: specifies the vertical alignment of text Baseline, sub super, top, text-top, middle, bottom, text-bottom text-align: specifies the horizontal alignment of text Left, right, center, justify text-indent: specifies the first line indentation of a block of text Measured in pixels (px) or percentage

+ More Font Properties text-transform: modifies the case of text None, uppercase, lowercase, capitalize (first letters only) letter-spacing: specifies spacing between letters Normal or pixels (px) line-height: sets the space between line of text Normal or pixels (px) word-spacing: sets the amount of space between words Normal or pixels (px) text-shadow: adds a shadow behind text Horizontal, vertical, color, blur-radius

+ The Span Tag This tag is used when you only want to change the style and text format for a specific word or sentence. Allows you to change small parts of text without disrupting the flow of your page.

+ Your Lab 4-1