clock menu more-arrow no yes mobile

Filed under:

Designing and Building Drop Caps for Chorus and This Old House

How we used Illustrator and Glyphs to create a custom font

Photo illustration showing designs for a custom font Photo illustration by Ashlie Juarbe

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.

ticket request for designing drop caps
Screenshot of ticket request for designing drop caps

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.

A yellow instruction booklet with a mix of typography on the front and back cover next to a manual with power-tool safety illustrations and instructions
A blueprint of lines, brackets, circles, and boxes and an architectural drawing of a house with labels, arrows, lines, and circles

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.

A sketch of ornamental components with a linear line, angled line, curved line, bracket, and circle and a preview of drop caps made in illustrator, letters A, B, C, F, G, H, K, L, and M

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.

Preview of apostrophe punctuation and letter pairing with Lorem Ipsum text

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

Adobe Illustrator Guides and Grid panel that is set up to include a gridline every 100 points and 4 subdivisions

3. Place each drop cap onto their own section

Adobe Illustrator artboard with all drop cap letters, numbers, and punctuation marks organized on a grid

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

Close up of Adobe Illustrator artboard with drop cap letters and Transform panel that is set up to hold each drop cap in a 100 pixel by 100 pixel box

5. Group each drop cap with their respective bounding box

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

GIF of all drop caps being selected and vertically and horizontally centered together

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

Adobe Illustrator Layers Panel with Release to Layers (Sequence) option selected

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.

GIF of A drop cap vector previewing with a single black layer

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.

GIF of A drop cap previewing with both a yellow layer and a black layer

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.

Glyphs Font Info Master panel with black Master Color parameter added to the Black layer and Glyphs Font Info Master panel with yellow Master Color parameter added to the Yellow layer
Glyphs Font Info Instances panel with Color Layers to SVG parameter added to the Black layer and Glyphs Font Info Instances panel with Color Layers to SVG parameter added to the Yellow layer

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.

full drop cap system with characters, numerals, and punctuation marks

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 Old House article displaying an all yellow A drop cap

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.

The Latest