Session 3.2.

Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances Aligning text horizontally Aligning text vertically

Styling Web Page Text: Font Family What is a font family? Default font family on your browser Syntax: font-family: fonts; Where fonts is a font typeface or a list of font typeface Example: font-family: Arial Black, Georgia, Tahoma;

Styling Web Page Text: Font Size Syntax: font-size: size; Font size unit of measurement: Absolute units: mm, cm, in, pt, pc, px font-size: 12 pt; Relative units: em, % font-size: 2em; font-size: 200%;

Practice – Font Family and Size 1. In hs_styles.css, set the default font typeface to Trebuchet MS, Helvetica, and sans-serif 2. For the caption within the figure box, set the font size to 14 pixels 3. For the h1 headings nested within the section element, set the font size to 2.5em 4. For address elements nested within the footer element, use fonts from the list Palatino Linotype, Book Antiqua, Palatino, and serif

Working with Web Fonts Each browser supports different fonts. Solution: Web safe fonts Disadvantages

Working with Web fonts Web fonts Specifications for downloadable fonts are used in the CSS Still a challenge? FormatBrowser TrueType/OpenType (.ttf)Chrome, Firefox, Opera, Safari Embedded OpenType (.eot)Internet Explorer Scalable Vector Graphics (.svg)Chrome, Opera, Safari Web Open Font Format (.woff)Firefox, other browsers in development

Working with Web fonts Installing a cross-browser Web { font-family: ‘name'; src: url('eot'); src: local('☺'), url(‘file.woff’) format (‘woff’), url(‘file.ttf') format('truetype'), url(‘file.svg') format('svg'); }

Practice – Web Fonts 1. For the h1 headings nested within the section element, use the font list containing the CloisterBlack and fantasy fonts.

Setting Font Faces and Sizes To set kerning (the space between letters), use the following style property: letter-spacing: size; To set tracking (the space between words), use the following style property: word-spacing: size; To set leading (the space between lines of text), use the following style property: line-height: size;

Setting Font Faces and Sizes To set the indentation of the first line of a block of text, use the following style property: text-indent: size;

Setting Font and Text Appearances To specify the font style, use font-style: type; where t y pe is normal, italic, or oblique. To specify the font weight, use font-weight: type; where type is normal, bold, bolder, light, lighter, or a font weight value.

Setting Fonts and Text Appearances To specify a text decoration, use text-decoration: type; where type is none, underline, overline, or line-through. To transform text, use text-transform: type; where type is capitalize, uppercase, lowercase, or none. To display a font variant of text, use font-variant: type; where type is normal or small-caps

Practice – Font Faces and Sizes 1. For unordered lists within the nav element, set the the line height to 3.5em and indent the text 5 pixels. 2. For the caption within the figure box, display the text in italic.

Combining All Text Formatting in a Single Style You can combine most of the text and font styles into a single property using the shortcut font property font: font-style font-variant font- weight font-size/line-height font- family; Example: font: italic small-caps bold 2em/24px Helvetica, sans-serif;

Font Trends: Are You Trendy?

Aligning Text Horizontally Syntax: text-align: alignment; With alignment being left, center, right, or justify Example: text-align: center;

Aligning Text Vertically Syntax: vertical-align: alignment; With alignment being baseline, bottom, middle, sub, super, text-bottom, text-top, top Example: vertical-align: top;

Practice – Aligning 1. Center the contents of figure boxes. 2. Center the caption text within the figure box.