Chromatic Web Fonts, Redux

In 2012 I wrote about how to use chromatic type with pseudo-elements. My objective back then was to minimize the hassle of a content author using a WYSIWYG while also not overwhelming a screen reader user with triplicate content. Pseudo-elements achieved that, though support for pseduo-elements in screen readers is different today (screen readers support it).

Parameters

I opted to run at this again with an eye both making this easy for content authors who don’t know HTML nor CSS as well as to make it something other than a complete audio assault for screen reader users.

The Accessibility

My technique makes copies of the text and stacks them. While screen readers ignored this for a while, opening my demo now results in way too much speech.

My first approach was to simply hide the extra content using speak: none from the CSS Speech Module. The only problem is that no browser supports it, and so no screen reader can support it. You can get a little insight over at the NVDA bug tracker.

I also played with duplicating the element and trying to use multiple roles to control how they were read and displayed, but between not wanting to clutter the DOM any more than necessary and lack of support for multiple roles, I opted to stay with pseudo-elements.

The Content Author

As someone who spent 15 years (give or take) building templated web sites powered by content management systems for authors will little no technical experience, I recognize how difficult it can be to expect an author to do anything other than paste content from Microsoft Word. This is not a judgment, this just reflects a known workflow.

However, I had repeatedly achieved success getting authors to select a heading level from a menu or add a class from a pre-defined list of classes. As a result, my approach assumes the author will be able and willing to do the same here.

As a developer, you’ll just need to choose a class and expose it to the content author in your interface.

Code

I have broken my example up into JavaScript and CSS.

JavaScript

I’ve created a function, A11yChromatic(chromaticClass), where you pass in the class you want to affect. This way you don’t need to muck about in the function code if you don’t use the same class naming convention I do (with all those hyphens and underscores and emoji).

I’ve commented it pretty heavily, but the gist is that the script finds the element with the class name that you pass and duplicates it into a sibling <span>. It then duplicates the initial element’s content into a data-copy attribute on itself and adds an aria-hidden="true".

The aria-hidden will hide it from screen readers, preventing them from reading it and the duplicated content aloud. Since we duplicated the element into a <span>, we still have it available to screen readers.


function A11yChromatic(chromaticClass) {
  try {
    // Get everything that has the chromatics class.
    var chromatics = document.getElementsByClassName(chromaticClass);
    // Loop through everything that has the chromatic class.
    for (var i = 0, len = chromatics.length; i < len; i++) {
      // Set the current array item to a variable.
      var currChromatic = chromatics[i];
      // Duplicate the element of the current array item (before we add stuff to it below).
      var dupeChromatic = currChromatic.cloneNode(true);
      // Get the text content of the current array element.
      currChromaticText = currChromatic.textContent;
      // Now create the data-copy attribute we use for the CSS.
      currChromatic.setAttribute('data-copy', currChromaticText);
      // Add aria-hidden to the original node.
      currChromatic.setAttribute('aria-hidden', 'true');
      // Remove the class from the duplicated node.
      dupeChromatic.className = '';
      // Create a .
      var chromaticGen = document.createElement("span");
      // Put the  immediately after the current array item, as a sibling not a child, then add the duplicated node as its child.
      currChromatic.parentNode.insertBefore(chromaticGen, currChromatic.nextSibling).appendChild(dupeChromatic);
    }
  } catch (e) {
    console.log(e);
  }
}

A11yChromatic('chromatic');

CSS

I use CSS to handle the coloring as well as the display of the duplicated content (via ::before and ::after). I also use it to position the text for the chromatic effect.

Remember the <span> I created? I use a few techniques to visually hide the element that I duplicated into the <span> that consider right-to-left content and older browsers (on which you can get more detail at the Paciello Group blog).


.chromatic {
  position: relative;
  color: rgba(255, 255, 255, .85);
  font-family: 'hwt_american_shopwornregular';
}

.chromatic::before,
.chromatic::after {
  content: attr(data-copy);
  position: absolute;
}

.chromatic::before {
  z-index: 3;
  color: rgba(255, 51, 51, .9);
  font-family: 'hwt_american_starsregular';
  margin-left: -0.02em;
}

.chromatic::after {
  z-index: 5;
  left: 0;
  top: 0;
  color: rgba(0, 0, 0, .5);
  font-family: 'hwt_american_outlineregular';
  margin-top: 0.02em;
}

.chromatic + span {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

Result

The typeface is bound to my site, so I cannot show you a CodePen or similar demo. As such, I have stuffed it into an iframe below, though you may visit it directly if you prefer.

I show three different styles using a few of the typefaces from the chromatic set. For the first heading I intentionally make it appear as if the ink is mis-registered and faded to try to give it that old-timey feel. The other two heading styles just show different color combinations and styles.

Resources

Just in case you want to give it a go.

About American Chromatic

The typeface I used for this demo is HWT American Chromatic, a collaboration between the Hamilton Wood Type & Printing Museum in Two Rivers, Wisconsin and P22 Type Foundry in Buffalo, New York. Some detail about the typeface from the readme file:

The HWT American Chromatic set is a multilayered font set that will allow for thousands of possible color and pattern combinations. The original 19th Century Chromatic that this font set is based upon included 2 fonts. The HWT digital version includes 8. The alignment isconfigured to allow any combination of the 8 fonts to all align when identical text is set and arranged, one on top of the other.

American Chromatic was originally created by Wm. H. Page & Co. circa 1857-59. It was created as a two part chromatic where portions of each color would overlap to create a third color via the blending of semi-transparent inks. Chromatic wood type was an innovative approach to the limits of the technology of the time. To print them as shown in their specimen books required a highly skilled printer.

I wasn’t paid to write this, though I did get to keep the font from last time.

Another Option

You can use the Bixa Color typeface and you won’t need any special script. However, only Firefox can display the multi-color features at this time.

Update: June 1, 2016

There is an article at Type.Guru that lists 20 different chromatic typefaces. Maybe you can try this technique yourself with even more options: The Best Layer/Chromatic Fonts

Update: June 23, 2015

I discovered a new set of chromatic typefaces thanks to a tweet from Zeldman. You can read about it at the Bungee page.

In particular, if you look at the suggested technique for using it on the web, it leans on ::before and ::after. I opened an issue at GitHub to offer what I have learned, and you are welcome to chime in there as well.

I also took my demo from above and used these typefaces to show the technique. I made a CodePen, and also embedded it below. Note that I added some extra spacing to align the letters since Bungee Shadow does not match up with the other letters precisely. As such, alignment falls apart at different sizes, so consider this nothing more than a demo.

See the Pen Chromatic Test by Adrian Roselli (@aardrian) on CodePen.

No comments? Be the first!

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>