Web Typography

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

Web Typography TrainingCourse 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.

Web Typography TrainingCourse Contents

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

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.

Basic CSS font manipulation

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

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

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

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

Typography in specialist contexts

  • Lists
  • Tables
  • Forms
  • Figures and captions
  • Hyperlinks
  • Buttons

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

Web Typography TrainingFurther Details

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:

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