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.
2.
3.
4.
In hs_styles.css, set the default font typeface to Trebuchet MS,
Helvetica, and sans-serif
For the caption within the figure box, set the font size to 14
pixels
For the h1 headings nested within the section element, set the
font size to 2.5em
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
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 fonts
 Installing 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 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 type 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
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.
1.
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 fontfamily;
 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
Center the contents of figure boxes.
2. Center the caption text within the figure box.
1.