Ampersand 2012

By | June 17, 2012

My notes from some of the speakers at last Friday’s Ampersand conference in Brighton.

Yves Peters Detail in Web Typography

Choosing a Font

  • Narrow your search by requirements
  • Consider aesthetic preferences last
  • Consider:
    1. Formal aspects
    2. Historical context
    3. Cultural references

Functional Criteria

The OpenType format provides:

  • Unicode character encoding for support of multiple scripts
  • Cross platform support
  • Advanced placement features (e.g. kerning)
  • Advanced replacement features (e.g. ligatures)

Font dimensions:

  • X height
  • Cap height
  • Ascender
  • Descender
  • Small-cap height

Numeral types:

Typesetting Numbers

© J. Bear

Fake small caps:

  1. Decrease cap size
  2. Increase weight
  3. Increase tracking

Make correct use of spacing entities:

  • non-breaking space  
  • thin space  
  • en space  
  • em space  
  • punctuation space  
  • figure space  

Veronika Burian & Jose Scaglione Typographic Matchmaking

Font Selection

  1. Morphology/funciton
    • Title or text?
    • Continuous or fragmented reading?
  2. Technical Aspects
    • Reproduction method
    • Media
    • Screen optimisation
  3. Aesthetics
    • Appearance vs. content
    • Volume and visibility
    • Relationships between fonts
  4. Economics
    • Price
    • Amount of licenses
    • Efficiency

Typographic Matchmaking

  • Start by choosing one typephase or family
  • You don’t have to use branding fonts in other contexts, find other ways to incorporate branding
  • Compare fonts by setting to the same x-height (optical size)
  • Contrasting sans-serif with serif with similar properties to maintain balance
  • Organic (handwritten, calligraphic) vs. mechanic (restrained, formal)

“Focusing on contrast makes combining fonts easier”

  • Make use of hierarchy and dominant/submissive pairings
  • ‘Super families’ are font sets containing matched versions (sans-serif, serif, mono-space etc.)
  • It’s harder to combine two sans-serif fonts, which need strong contrast to be differentiated

Laurence Penney Hacking the Stack

  • CSS font fallback works at character level, allowing hierarchical sub-setting
  • For example, old style numbers taken from one font and all other characters from a different font
  • Subset files must only contain the characters to be replaced
  • font-family: 'subset 1', 'subset 2', 'default', 'fall-backs';
  • Make custom fonts for special characters/icons e.g. arrows
  • Doesn’t require extra mark-up, maintaining separation of content and presentation

Jake Archibald In Your @font-face

Browser Support

  • IE – .eot
  • Other browsers – .woff
  • Older browsers – .ttf
  • Older IOS – .svg

Optimising Font Files

  • Remove unwanted glyphs (font squirrel)
  • Gzip TrueType fonts
  • Speed up subset loading with ‘unicode-range’ rule

Loading

  • IE loads the content first and then updates the fonts
  • Webkit waits for the font files before displaying the dependent content
  • Firefox allows 3 seconds before loading a fallback font
  • IE8 shows nothing until all files have loaded (move @font-face styles to the top of the head to fix this)
  • WebFont Loader provides control over the loading behavior for all platforms
  • Serve at least .eot and .ttf
  • Avoid downloading unnecessary files
  • Show content first
  • Make files as small as possible

Elliot Jay Stocks Enhancing the Future

Typography plugins by Trent Walton:

  • Lettering.js – automates character level style control
  • FitText.js – scalable text for responsive headlines

Developing CSS Features

Enable/disable ligatures and kerning:

text-rendering: optimizeLegibility | optimizeSpeed | geometricPrecision 
| auto | inherit;

Select subsets/style sets:

/* use small-cap alternate glyphs */
.smallcaps { font-feature-settings: "smcp" on; }

/* convert both upper and lowercase to small caps */
.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }

/* enable historical forms */
.hist { font-feature-settings: "hist"; }

/* disable common ligatures, usually on by default */
.noligs { font-feature-settings: "liga" 0; }

/* enable tabular (monospaced) figures */
td.tabular { font-feature-settings: "tnum"; }

/* enable automatic fractions */
.fractions { font-feature-settings: "frac"; }

/* use the second available swash character */
.swash { font-feature-settings: "swsh" 2; }

/* enable stylistic set 7 */
.fancystyle {
  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
  font-feature-settings: "ss07";
}

Summary

  • Consider the typephase – does it contain the features?
  • Consider the file – is it OpenType?
  • Consider the browser – which features are supported?
  • Consider the user – will it break?
  • Test OpenType in the browser with Type Cast