Art Deco selectable text!

This is a quick proof-of-concept of split typography, based on Pierre Fix-Masseau's Art Deco style. The challenge was to have this kind of 'split letters' as part of a web page layout, while retaining the ability to select text.

How does it work?

Starting from OSP's DIN typeface, we edited the letterforms in Fontforge to create the half-letters. These are then overlaid on the original typeface using JQuery. This means that any heading can use this effect without any HTML shenanigans, other than adding the 'colorfont' attribute to the heading element.

How can I use it?

Big fat reminder: This is a proof of concept! Not something that can be expected to run smoothly -- particularly in production environments. First, get colorfont.js and include it inside your HTML. You'll need to specify the 2 fonts to be used (normal font & split font) in your CSS file. On the HTML file, the only change necessary is to have a "colorfont" attribute in the headings you want to display.