Designing and Building Drop Caps for Chorus and This Old House

Last year, the Vox Media Brand Design team collaborated with our Product team and the creative team at This Old House on a brand refresh and platform migration for This Old House’s new website. We built a system to support Chorus content hierarchy using graphics, color, and typography.

An important element for carrying the brand throughout the editorial experience was creating a custom drop cap, the initial letter at the beginning of a word or paragraph that displays larger than the following text. This was a new challenge for us, and with so few specific resources available, we spent a lot of time researching and digging for answers, as well as documenting our process, which we’ll share here.

This Old House Branding

Before diving into drop cap design, our teams tackled a brand audit and visual explorations. This Old House’s brand has a strong do-it-yourself, how-to sensibility. We created a typographic system that mimics what could be found in a manual or blueprint, where type feels utilitarian, substantial, and geometric.

We worked with our product design director, Heather Shoon, to design the custom drop caps. Considering the design system we’d already established, the typeface Sarabun Extra Bold became the foundation of the drop cap. We developed five ornamental components inspired by home renovation and construction: a linear arrow, an angled arrow, a curved arrow, a bracket, and a circle. We limited these elements to a select few to maintain consistency while giving each drop cap a custom look.

As we built our alphabet and special characters, we considered the way each letter, number, and punctuation mark’s spacing appeared at the beginning of an article. This exploration needed to account for odd pairings, such as quotation marks and apostrophes.

Building the drop caps in Illustrator

We initially created the drop caps in Illustrator and then imported them in Glyphs. While this only required a simple copy+paste, we found that taking the following preliminary steps helped to ensure their correct positioning:

1. Prepare a square, 1000-pixel artboard

2. Lay out a grid to hold the drop caps, which makes viewing all of them easier

3. Place each drop cap onto their own section

4. Draw a square, 100-pixel bounding box around each drop cap, which makes scaling and aligning them easier

5. Group each drop cap with their respective bounding box

6. Center-align all of the drop caps on the artboard

7. Scale the drop caps up to 1000 x 1000 pixels

8. Separate each drop cap onto its own layer (ie: Release to Layers [Sequence]), to make selecting them easier

Importing the drop caps to Glyphs

The Brand Design team had not developed a font in this way before. At this point, we discovered that there weren’t many end-to-end tutorials on moving layered, colored fonts from Illustrator to Glyphs. Whatever information we found was sparse and specific to unrelated use cases, so a lot of what we learned came out of trial and error. However, through a mix of videos, blogs, and forums, we pieced our findings together and came up with some solutions.

One of the early challenges we faced was correcting inconsistencies between the two programs. Our multi-layer, yellow and black vectors from Illustrator defaulted to single-layer, black vectors in Glyphs.

We were stuck on this problem for a while. Our situation was unique and it took time to find answers related to both Glyphs font creation and working with imported, colored layers. So we began a forum discussion and were quickly assisted by Glyph’s admins. This back-and-forth dialogue was helpful and resulted in our fixing the issue.

The solution was to create two masters: a yellow layer and a black layer, which gave us the ability to assign them to individual parts of a drop cap. Then we went through each subsequent drop cap and, via cut+paste, separated their “character” (eg: A) and “components” (eg: arrow and circle) onto a yellow layer and a black layer, respectively.

After each drop cap was treated, we moved to finishing the font file. We adjusted the Glyphs Font Info and added color parameters in both the Masters panel and the Instances panel, which ensured that the yellow and black would export together. While in the Instances panel, we introduced a “Color Layers to SVG” parameter as well. This was an important last step, because it meant we could export an OpenType-SVG color font that displayed in full color when in use.

Community and peer support

With all of the layout and color settings updated, we exported the font and delivered it to our Product team. This phase of the project, from Illustrator to Glyphs, was completed in roughly two months. Much of it was spent searching examples and case studies, but few covered the entire process and drop cap system. It was a tricky challenge, but thanks to advice from colleagues and online contributors, and piecing together our findings, we found a way to successfully ship the font on Chorus.

Unfortunately, after sending the file off, our engineers told us that using multi-color fonts in CSS would’ve required a longer timeline and more difficult work. The yellow and black drop caps couldn’t be used as intended for This Old House’s website. In retrospect, they should’ve been exported as SVG files at the beginning. Our team didn’t see this coming, but we took a step back, and the Product team suggested we keep all of the drop cap elements but change them to yellow. This allowed us to incorporate the font into Chorus, while keeping the essence of the design.

This project threw us its fair share of curveballs, but there were also many takeaways for us. We’d love to use what we learned the next time around, especially for designing a functioning, full-colored drop cap font. And while our teams feel better-equipped to handle this work in the future, we’re still looking for better ways to approach it, and we’ll be sure to share everything we pick up along the way.

Thanks for reading!

---

Credits:

Vox Media Brand Design team: Georgia Cowley, Steven Vuong
Vox Media Product team: Brandy Porter, Jared Fanning, Heather Shoon
This Old House creative team: Hannah Burkett, Jamie Dannecker

Thanks to Courtney Leonard and Laura Holder for your thoughtful feedback and edits.