Leveraging Type as a Brand Element
Overview
A nonprofit economic research organization asked Velir to craft an accessible, readable design for their new website that relied less on imagery to deliver information. We helped them create this design by recommending an attention-grabbing typeface to act as a distinct element of their brand. The typeface came about through landscape and competitive analyses, and a type study that presented a range of options to reflect the new website experience. Once the client selected their typeface, we helped them establish rules to maintain the correct color contrast and consistent legible font sizes across their site.
Challenge
The client asked Velir to redesign their website after we partnered with them on a successful Sitecore upgrade. Their primary goal for the website redesign was to create a great user experience. To meet that goal, they asked us to design a site where audiences could easily locate and leverage their decades of research. They also challenged Velir to improve their site’s accessibility and readability with a flexible design system. The client wanted a modern, editorial design that relied less on imagery to deliver information, so their audiences could have a better digital experience.
The project’s key challenges were:
- Rethinking type as a visual brand element
- Creating a modern design system that used type to reduce reliance on stock photos
- Establishing a complex type hierarchy that made content easier to digest and navigate
Approach
Like many nonprofit organizations, the client didn’t have a dedicated photographer to capture high-quality photos for their website. We proposed that they could reduce their reliance on stock photos by using a compelling typeface that grabs visual attention and acts as a recognizable element of their brand.
With that in mind, we focused on type as a vital aspect of their updated design system. We carried that thought throughout subsequent phases of work, from performing a series of landscape and competitive design analyses, to a comprehensive type study. Based on the visual characteristics and brand attributes the client wanted to express through typography, we presented them with a range of options that reflected the target qualities of the new experience that we were crafting.
Our approach included:
- Conducting a comprehensive type study and presenting our research to stakeholders
- Creating a connection between high-level strategies we previously developed and type selection
- Establishing a complex type hierarchy and ramp that enhances usability
Comparing typeface experiences
Our type study, our team took a thoughtful approach to typeface selection, assessing both brand and usability potential. We addressed concerns about type usage in different sizes, languages, and color palettes. To make comparison easier, we created a chart that highlighted the typefaces’ different attributes and what they expressed for the brand (like contemporary/sensible and formal/classic). We based our typeface efforts on earlier strategies we developed in the redesign process to show how the typeface fit within their current and future brand.
Integrating with design and development
Throughout our design and development process, we continued type conversations alongside the general design and development of the client's updated design system. By breaking the typefaces down in a chart, we clearly communicated what made the typefaces different and what parts of the brand they highlighted. Our final decision was to use the commercial typeface Tiempos by Klim Type Foundry — a typeface made for editorial typography. Although many clients lean toward free typefaces, the client felt it was more appropriate for their brand to use a premium typeface with a unique look and feel.
Solution
The result of our thoughtful collaboration with the client was a consistent, modern, and adaptable design system, that’s more user-friendly, and has a distinguished look that better reflects the brand's strong reputation. Even as one part of the total system, Tiempos seamlessly blends a modern editorial look with the client's classic educational roots, paying homage to their past, while signaling their future and continued role as a leader in their space.
Type education
With Tiempos, the client received a modern typeface with a variety of weight options. A wide set of supported languages also allowed them hassle-free adaptation of international names and potential translations. To help the client better understand how to use Tiempos, we collaborated with them to establish rules on color and size usage for the typeface. These rules were created to help them maintain the correct contrast and consistent legible sizes across the different sections of their site.
Results
- A scalable typeface perfectly matched to the client's brand attributes
- A type hierarchy and ramp up that takes advantage of a flexible design system across all devices
- An updated style guide that serves as a training resource for the usage of typographical choices
- Positive national buzz on social media from acclaimed economists and influencers