Coforma Design Focus: Intentional Fonts and Typography

Our Coforma Design Focus blog series provides an inside look at the design phases that led to the new Coforma brand. When building our brand, we selected fonts and typefaces with users and community in mind. Here’s the how and the why.

What can type communicate? Beyond the words letters form, a whole lot of nonverbal meaning is transmitted by the design of letters. When building a new brand for Coforma, this was a serious question. We hunted for a font system that would embody the attributes from our brand prism and we filtered for inclusive, accessible fonts, ensuring our choice would be highly legible for all kinds of readers. Once we selected fonts, we considered which typefaces to use in concert, and set up some guidelines around how they would live together in a grid.

Guardrails for Font Selection

We began our quest for fonts after our business name and logo were fully developed and we were beginning to outline our messaging pillars. We defined some practical guidelines for what we wanted our typography to accomplish:

1. On-Brand

To reflect the Coforma brand prism, we wanted the font to feel welcoming, bold, and progressive. But how could that be communicated by the shape and spacing of letters? We translated this goal in a few different ways. A welcoming feel could be conveyed in a lighter font weight with soft angles and youthful curves. It could also be achieved with a font that was easy for all to read. A bold and progressive feel could be accomplished with a bold font style (very literal!), but it could also translate to mean a font that gives back to the broader design community. With this in mind, we were on the lookout for unexpected and original fonts with opportunities to pay it forward somehow.

2. Supports Work-to-Date

Like everyone, we like to work forwards, not backwards. But to keep our eyes off of shiny objects, we set a rule that whatever font system we landed on had to work well with the work we had done to date. We kept this in mind while doing a wide sweep of font pairings, and while diving deep into a few final options. We set up layouts that enabled us to consider these questions:

• How do these fonts play with our logo?
• What does it look like when we write out our name, URL, and social media handles?
• What about the messaging pillars — does the font combination tonally match the content we’re writing?

3. Legible and Accessible

We purposely looked for wayfinding fonts in our search. Wayfinding fonts are designed for road signs and include intentional diversity between characters in order to be easily read from long distances. This character diversity makes the fonts more accessible to audiences with dyslexia, and the low contrast helps accommodate all kinds of readers. Wayfinding fonts have the added perk of lending some quirk and creative flair, too.

According to plainlanguage.gov, a serif font is recommended for body text. That’s because serif typefaces tend to be more legible. They have decorative elements: contrast (meaning thick and thin stroke widths), terminals, and of course serifs. All of these make it easier for the human eyes-plus-brain to distinguish one letter from another at small sizes or from far away.

But that doesn’t bode well for all readers. We opted to exclude them from our search because serifs are more difficult to read for people who have dyslexia or visual disabilities, and we wanted a font that was as inclusive as possible. Also, if the contrast is too great (meaning the narrow horizontal strokes are really narrow) those parts of each character can completely disappear on low resolution screens or for folks with low vision performance.

4. Narrow

We like to explain things fully and clearly. Sometimes we even paint pictures and build narratives to advocate for the communities we support and simply can’t afford to trim out important details. This is why we decided we wanted a narrow typeface. We hoped to find a thin typeface optimized to enable us to fit more words per line, comfortably.

5. Promotes Collaboration with Partners

Collaboration puts the “co” in Coforma. We wanted to ensure that our brand was visible in our partnerships and co-creations across our tools and site, without requiring the purchase or installation of a typeface to achieve our desired look and consistency. That’s why we prioritized finding a Google font.

A Double-Diamond Approach

We take a “double-diamond” approach to our projects, meaning that we begin design sprints with intensive ideation, broadening the scope of what we’re considering, and closing by down-selecting the best designs or most relevant insights.

A rule of thumb we leveraged in our font selection: start wide, and never start from zero.

Widening the Search for a Font

There are many good resources out there in the world of font pairings and we enjoyed looking through the work of other designers (as a jumping-off point). We also used some wonderful resources to help us broaden, and then focus, our search. For example, we pulled ideas from this rich, curated list of Google font pairings on classic art.

Others going through this process might also consider randomizing some combinations with FontJoy and making brand-specific adjustments, downloading chic Google Font Combinations and layouts as a Sketch or XD file, or using Comic Sans like Critical Axis had the courage to do.

With our priorities and guardrails in mind, we created tons of font combinations (sticking to black and white). We discussed what worked well and not so well across them, filtered them down, re-paired them, and searched for moments where our brand was well represented.

Validating and Down-Selecting

With a few pairings to work with and test, we began validating which of these fonts would work for us and aimed to down select to one final pairing. Here’s a checklist of questions and tests we ran to ensure the fonts we selected could meet our needs:

Is it legible?

• Print a paragraph at 10pt next to the same paragraph in Arial. Squint.
• Check for line length: what font size + text width = ~12 words per line?
• What’s a comfortable font size on my phone?

How will the fonts be used in context?

• Quickly mock up some of our existing assets (an invoice, proposal, web page) with these fonts in grayscale. Is there anything that looks off?
• How do they look beside our logo? Beneath? Above?

Does it feel on-brand to our audience?

• Run a few hallway checks. Send text layouts to friends, family, and clients, and ask for their impression of the company.

Choosing Our Final Fonts

We ultimately landed on the pairing of Work Sans and Signika.

Signika for Body

The body font is the true workhorse of a font pairing. It’s generally the smallest font on the page and while it might not take up the most real estate and is rarely the “statement” font, it is applied to the higher count of words by a long shot. Signika met our criteria for legibility, accessibility, and narrowness, making it an appropriate choice for this small-size-big-impact job. For this reason, we also use it for some of our smaller headings and subheadings.

Signika was developed by Anna Giedryś as a wayfinding font for Google. “Signika variable font is a sans-serif with a gentle character, developed for wayfinding, signage, and other media where clarity of information is required. It has a low contrast and tall x-height to improve readability of texts in small sizes as well as in large distances from the reader.”
Source: fonts.google.com

This meant that it not only fit our size and weight criteria, but it also allowed us to deliver on our goal to find an inclusive font that let a wide range of readers access the text and reflected our intention to write clearly.

The one drawback was that the Signika font didn’t include italic styles. Instead of moving on to another font, we commissioned Anna to make an italics version, which we will release for public use in 2021 as a contribution back to the open source community.

Work Sans for Headings

We chose Work Sans as our main heading font because it is variable, bold, and dynamic. Its playful characters give it the creative feel we wanted. Knowing that it would be used for our H1 headings, and likely be displayed at the same scale as (or larger than) our logo, we tested it to ensure it plays nice in a variety of situations, and with the chosen body font.

Work Sans fit the bill because it was similar in weight but differentiable from Coforma’s custom logo font, providing mild contrast and more angular, distinctive, and playful characters like the a and g.

Constructing Our Typefaces

The headline, subheading, and body paragraph is part of the design system. Different pairings and patterns convey different tones, and we wanted to utilize our typeface design to support messaging goals, while maintaining visual comfort and ease of reading. Testing and careful consideration led us to a specific usage pattern, shown below.

Balancing a Scannable Font with SEO

We wanted a font that was both scannable and SEO-friendly. In other words, we have a lot to say and that can be good for SEO, and we needed a font that could accommodate volume without sacrificing visual comfort. Practical benefits of verbosity are that SEO currently likes a page with about 5,000 words on it and brand keywords used in proper context without being stuffed.

The opposing force to this verbosity is usability: the most readable web pages are concise, scannable, and objective. Flowery language and hyperbole increase cognitive load. Not only because of the increased number of words but also because the reader must (hopefully) parse out what they believe to be true. In addition, we know that 70% of users scan rather than reading text word by word. While we avoid flowery language and hyperbole, we are very interested in sharing the experiences of our users and clients in colorful, narrative formats. This statistic made it clear that communicating key information through headings and lists would be an important and effective method to include all reader types.

Our usage pattern utilizes a heading, subheading, and body text to offer optional layers of engagement for our readers: scan for the highlights, and dive into the full experience when there’s time and interest.

Major Third Type Scale

With our strategy for headings, subheadings, and body text in place, we moved on to setting up our font sizes. We wanted to think in relative terms: how might they adjust dynamically and consistently in different contexts? This is important because we use responsive type scales on our website — meaning our base font size grows and shrinks with the screen width, and headings follow suit. Setting up fixed sizes for “desktop” and “mobile” is far too restrictive and narrow for today’s device and usability landscape.

There are different strategies for calculating the heading sizes as the base font size changes. Some systems set musical ratios or golden ratios for type scale, where the font size grows at a set ratio. For instance, when the body font of a musical ratio bumps up 2 points, the subheading will bump 4, and the heading will bump 8.

“When averaged over many websites, the primary header of a [musically scaled] website is almost exactly twice the size of the body text. This means that any design based on a musical typographic scale has a beautiful property: the header and body copy are the same note, one interval apart.”
— Spencer Mortensen, https://spencermortensen.com/articles/typographic-scale

Caption: Type Scale guidelines from Wordpress’ 2019 brand book

We decided to set a relative type scale, meaning that our paragraph serves as a base size, and we build from there: each heading size is a multiple of the previous one, and leading can be calculated similarly. Type Scale’s visual calculator is a great tool for testing out different multipliers, and it uses modular scales (as popularized by the ancient Greeks).

With a little testing, we landed on “Major Third” (multiples of 1.25) for our website:

While the fractions of pixels might drive you crazy, Figma does let you use 2 decimal places in the font size. And occasionally, as a designer, I get a small thrill from assertively stopping mid-pixel 🌚🐺.

Bonus points: this method can be neatly standardized from a development perspective.

What’s next for our type scale? We’re thinking a lot about density. How might we change scales for different applications? And what are the rules guiding that? For instance, the spaciousness and dramatic heading sizes work well for the content on our website and on presentation decks, but they become less practical in the context of a proposal or price sheet.

Balancing in Context

You’ve seen samples already, but it bears explaining the final few steps for bringing this usage pattern together. The name of the game is legibility. To begin thinking of how our type would work in the context of our website, we first determined that our body font was most legible at 16–20px on various screen sizes.

We then looked to line length. To achieve an optimal line length of ±12 words per line, we determined that our standard text column should max out at 650px wide.

From there, we considered how much text would fit on our heading and subheadings. Once again, we tested this out with our taglines and messaging. How did the work we generated to date work at these sizes? How might it work for our project case studies?

In the end, we opted for a dramatic jump from the heading to subheading, making the subheading bright and blue to balance its attention, and a subtler jump from subheading to body, indicating their relationship. We identified a few rules: headings should be 2–3 words and subheadings should be 15–20 words. And we set our line height to create neat visual nuggets when all three font styles are grouped together.

Showcase Our Hero Clients and Messaging

Every day our partners strive to improve the way the services and products they provide meet the needs of the communities they serve. They inspire us to be thoughtful and inclusive about not only the ways that we support the development of those products, but also the ways in which we work and present ourselves, including through accessible fonts and thoughtful messaging.

Our font combination is another small way to meet our mission. It lets us draw the reader’s eye quickly to the key messages we aim to communicate, emphasizing our collaborative nature and commitment to working on socially impactful projects. It allows us to highlight the work our mission-oriented partners are doing with a big, bold headline and then dive deep into the details of how we helped them deliver their vision with a legible, accessible body font.

“We’re honored to work closely with some of the most hardworking public servants and change makers. It is of the utmost importance for us to set and maintain a standard of communication that is clear, approachable, easy, functional, and that supports collaboration. Our brand is both who we are and an investment in how we show up for those we’re fortunate enough to support,” says Coforma CXO and Partner, Ashleigh Axios.

In our next Coforma Design Focus post, we’ll talk about the design decisions we made to ensure Coforma’s online presence is accessible. Stay tuned!