Web Typography

1-day CSS3 course in typography, web fonts & grids — TYP

Web Typography Training Course Overview

A web typography course for type snobs — designers, like ourselves, who:

Bemoan the depressing effect of word processors on typography
Shake with frustration over the primitive state of web typography
Pore over Robert Bringhurst's Elements of Typographic Style
Admire Richard Rutter's webtypography.net project

The course has one overarching objective — to enable you to create the nearest thing that web browsers currently permit to elegant, effective and readable type.

Since, browsers' typographic capabilities and CSS3 standardisation are now developing at breakneck speed, we are committed to keeping this course up to date with every reasonably sane innovation, as it emerges.

So the course will stray into areas that our training typically avoids — e.g. bleeding-edge, experimental, browser-specific extensions to CSS. But, when it does so, we will always flag up potentially fragile techniques, and suggest sensible fallbacks whenever possible.

Course contents — 1 Typography Basics

Fonts — legibility, meaning and ‘colour’
Fonts and layout — inseparable
The Measure — line lengths, box widths
Leading — line heights
Vertical rhythm — font-dependent baseline grids
Horizontal rhythm — font-dependent grid layouts
Widows & orphans — text flow and breaks
Emphasis — in all its forms
Scale: fonts, spaces, lines and blocks
Clean rags — line-breaks and hyphenation
Hanging quotes and punctuation

Course contents — 2 Choosing typefaces and font stacks

Knowing font families: old-style, transitional, modern, etc
Mixing and matching — correspondence and contrast
Web font stacks: popular, ‘definitive’ ‘safe’, custom
Web font formats: TT, OTF, EOT, WOFF, SVG, etc.
Font-embedding services
Typekit, Fontspring, Google fonts, Kernest, etc
Serving your own web fonts
Tools for:
Font size ratios, font selectors, stack builders, etc.
Line height/length and rhythm calculators, etc.

Course contents — 3 Basic CSS font manipulation

Recap basics:
Font family
Size
Style
Weight
The font shorthand property

Course contents — 4 New and advanced CSS font manipulation

New settings (values) for older properties
@font-face parameters, e.g. unicode-range
Font feature settings
Setting @font-feature-values parameters
Kerning
Language override
Adjusting font heights (x-height, ascender, descender)
Stretching and condensing fonts
font-synthesis
Font alternates
Cap variants
Ligatures
Numeric variants
The font-variant-position property
The font-variant shorthand property

Course contents — 5 Basic CSS text styling

Recap basics:
Text colour
Background color
Opacity
Horizontal text alignment
Vertical text alignment
Text decoration: underscore, strike, small-caps, etc
First line indents
Text transformations, e.g. lower-to-title case
Letter spacing — not true kerning
Word spacing and legibility

Course contents — 6 New and advanced CSS text styling

Line breaking
Whitespace
Word-breaking and hyphenation
The word-break & hyphensproperties
Word wrapping
Hanging punctuation
The overflow-wrap property
The text-align-last property
The text-justify property

Course contents — 7 Typography in specialist contexts

Lists
Tables
Forms
Figures and captions
Hyperlinks
Buttons

Course contents — 8 Type in new/advanced CSS layout features

Media queries and responsive design
Multicolumn flow
Flexible boxes
Grid layout and Grid template layout
New float options — top, bottom, snap, page
Paged media

Course Objectives

On completion of this course students will be able to:

Understand how font metrics control CSS layout
Choose and deploy web fonts safely and reliably
Create responsive web design that works
Ensure that all users access page data optimally
Deploy the latest CSS3 typography features
Optimise type for CSS3's latest layout features

Target Audience

Web designers
Graphic designers
Typography nerds

Training Pre-requisites

The following courses — or equivalent knowledge and experience:

Our advanced CSS course
Either one of these courses:
- Our basic web design course
- Our basic HTML course

Training Style

Small groups — max 8
Concepts and syntax explained with worked code examples
2 to 2.5 hours of hands-on exercises
Sample code and media assets for exercises
A cross-platform CSS-aware editing environment
Support for individual extension work after the course
Substantial free manual