How to Use Chromatic Fonts on the Web
Chromatic font families are collections of fonts which are designed to be used together in different colours and positioned on top of each other to create special effects with text.
At its most basic, a chromatic font family contains a fill and an outline font. Sometimes a complex version of a font can be used with a basic version. By varying the colour of these fonts and putting one over the other an original combination can be created.
We’ve seen this technique used in print, and with flattened images, but we wondered if it could be used with web fonts. By using just a few hundred bytes of JavaScript, we were able to progressively enhance text to be rendered with two fonts instead of one, thus enabling chromatic fonts to be used.
See this technique in action ยป
A function setOverlay() is responsible for making this technique work. The function sets the attribute ‘data-content’ to the contents of each targeted element. A CSS rule is added which specifies that the :after pseudo class for this element has content: attr(data-content), so that the text essentialy appears twice on the page. The :after element is then positioned over the parent element so that it becomes combined with the text underneath.
Once the function setOverlay() has run, the text can all be styled using CSS. This is the CSS to style the Cooper Black example above:
/* Fallback styles */
#demo .cooper-black {
font-family: 'Cooper Black WS Regular', 'Arial Black', Arial, serif;
}
/* Additional styles when under the overlay */
#demo .cooper-black.overlay {
color: #DF7F6C;
}
/* Overlay styles */
#demo .cooper-black:after {
font-family: 'Cooper Black WS Hilite', 'Cooper Black WS Regular', 'Arial Black', Arial, serif;
color: #000;
}For browsers that don’t support :after or where Javascript isn’t available, only the first selector ‘#demo .cooper-black’ will be applied. It’s worth paying attention to how the text looks without javascript as IE6, 7 and 8 won’t receive this technique. All browsers which support the :after pseudo class will also use the other styles.
If you are thinking about using this technique, bear in mind that HTML content within the styled elements won’t be included, and so this technique won’t work for HTML styling such as <strong>. This is a limitation of the :after pseudo class.
If you are interested in this technique, the source files and documentation are available on GitHub.
