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;
}

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/pJyjKm