This Was Too Big to Fit in Our Newsletter: How We Got Rainbows on the Homepage

For our latest newsletter, I interviewed head of product, Jesse von Doom, who not only made this beautiful collection of colors in text happen, but he also created this well-commented demo on Glitch that walks you step by step through making a gradient header with different colored links.

I asked him a few questions about the process, but we couldn’t fit it all into the newsletter, so please enjoy our newest series on the blog: This Was Too Big to Fit in Our Newsletter.

Why are rainbows so important to Glitch?

Color is a great tool for communicating a lot of nuance in any design. If pictures are worth a thousand words color has to be worth a few hundred at least. At Glitch we work with a wide, bright palette. We’re really intentional about the meaning behind it. We want the first impression of Glitch to be welcoming, optimistic, and lightweight.

If you look at the Glitch homepage you’ll notice colors chosen for the header are the two main colors in the Glitch logo. On the page the logo itself is tiny, so the header is a call-back while the colors chosen for the links themselves are some of the brightest in our palette. So the idea was to be big and bold in how we invite people to build with Glitch, but to use color to reinforce that our community is inclusive, friendly, playful, and helpful.

(All of this is really valid, but also I just really love rainbows.)

How did you make having two headers shown as one accessible?

This part was super important — we’re technically using two headers to make the effect work. One with the main gradient text, and another mostly-invisible header for the links. It’d be a really bad experience for people using screen readers if the header were read twice, so we hide the header without links from screen readers using the aria-hidden attribute.

What was the most challenging part of making it all work?

Getting two slightly different bits of text to wrap identically at all responsive screen sizes is a lot of attention to detail. So it meant explicitly setting a lot more CSS properties than usual, and adding a few extra spans to make sure each header matches the other’s footprint exactly. And with a header it’s also worth paying attention to a few other typographic bits like wrapping commas with links, etc.

Shouts out to Jesse for making that magic happen. And because his demo is on Glitch, you can poke around the code and remix it for yourself! If you make a project with rainbows, text or otherwise, let us know by tweeting @glitch or send us an email at [email protected]. 🌈