Colour and icon fonts

Two capabilities the rest of the pack assumes away: type that carries more than one colour, and glyphs that carry non-letter meaning. Both are font technology, both have sharp accessibility edges, and both are chosen far more often than they should be.

1. When to invoke

• Type must render in more than one colour, with gradients, or as a 3D/layered effect.
• Choosing between an icon font and inline SVG.
• Emoji rendering, sizing, or weighting.
• A colour font renders as flat black in some browsers.
• Icons or emoji are announced wrongly by a screen reader.

Do not invoke for ordinary text colour (that's CSS color) or for choosing a text face (typeface-selection).

2. Required context