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.

Session 3.2.

ObjectivesSetting the font familySetting the font sizeWorking with Web fontsSetting font faces and sizesSetting font and text appearancesAligning text horizontallyAligning text vertically

Styling Web Page Text: Font FamilyWhat is a font family?Default font family on your browserSyntax: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 SizeSyntax: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 Size1. In hs_styles.css, set the default font typeface to

Trebuchet MS, Helvetica, and sans-serif2. For the caption within the figure box, set the font

size to 14 pixels3. For the h1 headings nested within the section

element, set the font size to 2.5em4. For address elements nested within the footer

element, use fonts from the list Palatino Linotype, Book Antiqua, Palatino, and serif

Working with Web FontsEach browser supports different fonts.Solution:

Web safe fonts Disadvantages

Working with Web fontsWeb fonts

Specifications for downloadable fonts are used in the CSS

http://webfonts.fonts.com/ Still a challenge?Format Browser

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 fontsInstalling a cross-browser Web font:@font-face {

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 Fonts1. For the h1 headings nested within the

section element, use the font list containing the CloisterBlack and fantasy fonts.

Setting Font Faces and SizesTo 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 SizesTo set the indentation of the first line of a

block of text, use the following style property:text-indent: size;

Setting Font and Text AppearancesTo specify the font style, usefont-style: type;

where type is normal, italic, or oblique.To specify the font weight, usefont-weight: type;

where type is normal, bold, bolder, light, lighter, or a font weight value.

Setting Fonts and Text AppearancesTo specify a text decoration, usetext-decoration: type;

where type is none, underline, overline, or line-through.

To transform text, usetext-transform: type;

where type is capitalize, uppercase, lowercase, or none.

To display a font variant of text, usefont-variant: type;

where type is normal or small-caps

Practice – Font Faces and Sizes1. 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 StyleYou 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 HorizontallySyntax:

text-align: alignment;With alignment being left, center, right, or

justifyExample:

text-align: center;

Aligning Text VerticallySyntax:

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.