Internet Brands - Typography System

Description

Our team at Internet Brands audited and cleaned up features on the ‘Settings’ pages of our Content Management System.

OVERVIEW

Background

Internet Brands builds websites for medical offices with our own website builder. Our design team was often tasked with designing features and functionality for our website builder.

I created a design system for type and color in Figma to use as building blocks for our designs. Below is the process and outcome of forming the Typography system.

Problem

When working on existing design files, I noticed that the text wasn’t linked to text styles in Figma. The text was styled and then copy/pasted across designs. This presented issues when there were multiple frames of the design - if we wanted to make an adjustment to the text style, we would have to select all of the affected text in order to make small changes.
There was also an issue of accuracy. The current designs looked great but the text styles in the Figma file and the text styles that were being used in our website didn’t match up. I attributed this to the history of one-off designs that were being handed over to the developers - in one design, they might have had a text style be size 13px and semibold and in another design, they might have been handed off the specs of size 14px and bold.
Furthering my audit of the pages within our website, I found that the text styles on the pages of the website needed fewer options and more distinct variations. On one page, we had 4 different text styles with 1px increments (13,14,15,16) along with a text style that was using REM unit (.9rem/12.8px).

Website Screenshot, Text Sizes 12-16

Solution

I built a type system to bring consistency to the text styles on our site. Below is the process of how the system was created.

Research

I researched examples of how other design systems organize their typography.

The Uber type system had a good model for size intervals. They also utilized folders for the styles in Figma.

Uber Type System

I also took a look at the Airtable Type system. One of my takeaways was the inclusion of All Caps heading sizes.

Airtable Type System

Building a System

Organizing Styles

Initially, I thought about fitting all the different styles into six headings but after doing an audit of our site, there were a lot more than six heading styles being used. Some were bold, some were light, some were all caps. I decided to split them by size and created folders for them containing the different weights.

I was able to batch create these styles through a plugin called 'Styler'. After creating sizes for the default 'Regular' weight, I duplicated the frame to create 'Light', 'Semibold' and 'Bold' versions. I changed the weights and batch renamed the text to reflect the weights.

Screenshot of Regular, Light, Semibold, Bold weights

The plugin did the rest, creating subfolders with the different weights.

Text styles in Figma using Subfolders

Final Product

We only kept the frame with the ‘Regular’ weight for the end product and we placed the other frames on a separate page for when we would need to make adjustments.

Typography frame and text styles in the sidebar

Below is an example of how we used text styles for consistent design in our modals.

Modals that we built using linked Text Styles

Using the type system helped us put together designs more quickly and it provided designers with a common reference. The system made the text in our designs clearer and more unified.

Color System

Internet Brands - Blog

andrewjypark@gmail.com

Github

Resume