Rainbow divider regular is a font developed for a future project. The words are animated so that they sing visually as well as verbally.

A 1 x 600px rainbow divider gif was bent, stretched and forked in every direction to form the letters. The only rule was that there weren’t to be any curves, and that the font would only be in capitals. Two rules… The gif must also retain its 1px width. Three rules… Otherwise the rainbow divider could be bent and stretched at will. The rules about width and curves are reasonably self-explanatory: they are so that the rainbow divider retains some sort of integrity and semblance to its origin as a glyph. The restrictions regarding capitals are a counter to their abolishment on printed materials by the Bauhaus in 1925. The rainbow divider being an iconic ornament of early web design, and with capital letters subsequently assuming new meaning online – namely, SHOUTING – now would appear timely to reintroduce, or make the case once again, for the “second alphabet”.

Here it is in lorem ipsum:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed rhoncus lacus. Duis urna urna, sagittis at rutrum eget, tempus sit amet arcu. Aliquam in magna eget eros scelerisque placerat. Vivamus eu dignissim mi. Aliquam tempus ornare dui eget sagittis. Phasellus ac purus vitae felis vulputate volutpat et et justo. Aenean aliquam eros et orci ultrices iaculis. Nullam eget velit risus, vitae ultrices lorem.

The original gif files were turned into a vector before being mapped and converted to a web font. In doing so the rainbow divider completes a journey from elaborate decoration separating blocks of text on a web page, to the text itself.

Font size examples: starting at 60px through 48px, 36px and 24px to 12px at the end. This is as small as it can get while retaining any hope of legibility. It works better at a larger size and is meant for display rather than body text.

Rainbow divider regular
Rainbow divider regular
Rainbow divider regular
Rainbow divider regular
Rainbow divider regular

In addition to installing the web font, you will need to add a little extra CSS to your style sheet to give it colour and make it animate. Copy the CSS below and wrap your text in a rainbow span class. Unfortunately it won’t work in IE because it doesn’t support either text-shadow or key-frame animations, yet. It is good to go everywhere else though. Enjoy!

Download Rainbow divider regular now.

@-webkit-keyframes rainbow {
    0%   { color: red; text-shadow: 0px 1px 0 orange, 0px 2px 0 yellow, 0px 3px 0 green, 0px 4px 0 blue, 0px 5px 0 indigo, 0px 6px 0 violet; }
    16%  { color: orange; text-shadow: 0px 1px 0 yellow, 0px 2px 0 green, 0px 3px 0 blue, 0px 4px 0 indigo, 0px 5px 0 violet, 0px 6px 0 red; }
    33%  { color: yellow; text-shadow: 0px 1px 0 green, 0px 2px 0 blue, 0px 3px 0 indigo, 0px 4px 0 violet, 0px 5px 0 red, 0px 6px 0 orange; }
    50%  { color: green; text-shadow: 0px 1px 0 blue, 0px 2px 0 indigo, 0px 3px 0 violet, 0px 4px 0 red, 0px 5px 0 orange, 0px 6px 0 yellow; }
    66%  { color: blue; text-shadow: 0px 1px 0 indigo, 0px 2px 0 violet, 0px 3px 0 red, 0px 4px 0 orange, 0px 5px 0 yellow, 0px 6px 0 green; }
    83%  { color: indigo; text-shadow: 0px 1px 0 violet, 0px 2px 0 red, 0px 3px 0 orange, 0px 4px 0 yellow, 0px 5px 0 green, 0px 6px 0 blue; }
    100% { color: violet; text-shadow: 0px 1px 0 red, 0px 2px 0 orange, 0px 3px 0 yellow, 0px 4px 0 green, 0px 5px 0 blue, 0px 6px 0 indigo; }
}
@-moz-keyframes rainbow {
    0%   { color: red; text-shadow: 0px 1px 0 orange, 0px 2px 0 yellow, 0px 3px 0 green, 0px 4px 0 blue, 0px 5px 0 indigo, 0px 6px 0 violet; }
    16%  { color: orange; text-shadow: 0px 1px 0 yellow, 0px 2px 0 green, 0px 3px 0 blue, 0px 4px 0 indigo, 0px 5px 0 violet, 0px 6px 0 red; }
    33%  { color: yellow; text-shadow: 0px 1px 0 green, 0px 2px 0 blue, 0px 3px 0 indigo, 0px 4px 0 violet, 0px 5px 0 red, 0px 6px 0 orange; }
    50%  { color: green; text-shadow: 0px 1px 0 blue, 0px 2px 0 indigo, 0px 3px 0 violet, 0px 4px 0 red, 0px 5px 0 orange, 0px 6px 0 yellow; }
    66%  { color: blue; text-shadow: 0px 1px 0 indigo, 0px 2px 0 violet, 0px 3px 0 red, 0px 4px 0 orange, 0px 5px 0 yellow, 0px 6px 0 green; }
    83%  { color: indigo; text-shadow: 0px 1px 0 violet, 0px 2px 0 red, 0px 3px 0 orange, 0px 4px 0 yellow, 0px 5px 0 green, 0px 6px 0 blue; }
    100% { color: violet; text-shadow: 0px 1px 0 red, 0px 2px 0 orange, 0px 3px 0 yellow, 0px 4px 0 green, 0px 5px 0 blue, 0px 6px 0 indigo; }
}
 
.rainbow {
    font-size: 36px;
    line-height: 45px;
    font-family: RainbowdividerRegular;
    letter-spacing: 5px;
    -webkit-animation: rainbow 1s infinite linear;
    -moz-animation: rainbow 1s infinite linear;