More Text Effects with Blend Modes

While this effect probably has less utility than the other blend mode techniques I’ve explored so far, it’s interesting enough to take a closer look:

Light/Years

In 1999 Michael Bierut and Nicole Trice designed a theme for that year’s Architectural League’s Beaux Arts Ball. It’s a striking piece of graphic design, and one that can be recreated using blend modes. First, the markup:

<h1>

<span id="light">

<span>L</span>

<span id="i">I</span>

<span id="g">G</span>

<span id="h">H</span>

<span id="t">T</span>

</span>

<span id="years">YEARS</span>

</h1>

Typeface selection is particularly important in this case: for the effect to work, the letterforms need to take up the same amount of visual space without looking “blocky”. The original design used Tobias Frere-Jones' Interstate; I turned to the free, but visually similar Montserrat by Julieta Ulanovsky.

While the letters take up the same amount of space, the kerning between them will differ by default. I kept the word “YEARS” pretty much untouched, but surrounded each letter in “LIGHT” with a <span> element so that they could be positioned with CSS:

h1 {

font-size: 20vw;

margin: 0;

position: relative;

font-weight: 600;

}

h1 > span {

position: absolute;

left: 0;

width: 100%;

}

#light { left: -1vw; }

#light > span { position: relative; }

#i { left: 3vw; }

#g { left: 3vw; }

#t { left: -2vw; }

#h { left: 1vw; }

The text is measured in vw units so that it scales perfectly with the browser window; for the demo on this page, a media query takes care of the tendency of the viewport-scaled text blowing out of its container at large screen sizes.

To create the text reinforcement / blend effect, I used screen mode for the “YEARS” text:

#years {
	mix-blend-mode: screen; 
	letter-spacing: 3vw;
}

Experiment with the source for this demo on CodePen