+

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

1st things 1st – 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: <p style=“font-family: Impact Arial”>

Font Variant – allows you to set font to small caps, or back to normal text Normal or small-caps Example: <p style=“font-variant: small caps”>

+Font Properties

Font Weight – defines the level of bold that is applied to text Lighter, normal, bold, bolder or 100-900 Example: <p style=“font-weight: bolder”>

Font Size – changes the size of the font Inches (in) or centimeters (cm) Example: <p style=“font-size: 12pt”>

Font Style – sets font to normal or italics Italic or Normal Example: <p style=“font-style: italics”>

**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 <span> </span>

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