Case study

Typography System (A11Y consideration)

Typography System mockup

Project overview

Role

Designer

Duration

Jan 2022

client

Self-initiated
(UXCEL challenge)

Software

Figma
Accessibility tools

Context, Scenario & Task

Case study context

The Typography System is a project to complete a UXCEL challenge for designers. The aim of the challenge is to create a typography system for a marketing website in the gaming industry that reflects the brand image.

Scenario

You’re a UI designer and received a task to design a typography system for the Placid Plastic Duck Simulator marketing website. This niche video game follows a unique concept and doesn’t really have competitors. The players watch plastic ducks falling into an outdoor swimming pool while relaxing music is playing in the background.

Task

Create a typography system with 5 levels of hierarchy: display, heading, subheading, body text, and button text. Use no more than 2 different typefaces. The design needs to be modern, fresh, and reflect the brand image. Use Figma or another appropriate design software and export the result in .pdf.

Who are STEAM

STEAM is an online gaming platform, offering thousands of games for playing or as a creative environment. Visual design is in a dark theme, looks modern, fresh and playful.

Placid Plastic Duck Simulator is one of Steam’s latest hits, launched last summer. The game is supposed to bring the user relaxation. What’s surprising is that the game itself and its page look quite old-fashioned.

Placid Plastic Duck Simulator

© STEAM®, screenshot of Placid Plastic Duck Simulator page

Current Color Palette

Colors considerations

Typography redesign needs to fit into the color palette that is currently used on the web page, since that is not the subject of the redesign. 

#0F1721

#274358

2665D2

3CA0F0

66C0F4

598B1C

598B1C

#fbfdfc

Current Typography Usage

Types of Content

Several types of text content are used on the page – heading (H1, H2), body text, breadcrumbs, buttons, linked text, lists.

Based on this I will not need too many variations of typefaces to use. To distinguish the hierarchy or different types of information bold types, colours (as used on the current version) or caps will be used, which do not depend on typeface variations.

Accessibility Concerns

At first glance I noted that some of the text elements did not comply with accessibility recommendations for color contrast ratios, so I decided to run a quick check.

I chose 10 random text elements, and Adobe Color Contrast Analyzer gave the color contrast ratios for the chosen elements. 

Color contrast ratio check

Color contrast ratio check of 10 random text elements

Given that 6 of 10 text elements do not conform to best practices, I decided to include another requirement for the typography system: given the colours being used, I need to find the right combination of typefaces (fonts) and adjust their sizes in order to comply with basic accessibility requirements.

New Typography System Suggestion

Explanation of Choices

Considering the current typography used on the website (Motiva Sans and Helvetica), I didn’t want to design a new typography system that would be significantly different. I chose the PT Font family, which looks similar to Motiva Sans, using PT Sans and PT Mono, which supports the overall look of the page and matches the mood of the game. Both PT Sans and PT Mono have very similar x-heights to Motiva Sans.

x-heights PT sans, PT mono and motiva sans

x-heights for chosen fontfaces of PT Sans and PT Mono in comparison to Motiva Sans

Typography System visualisation

I created a Typography System with 5 levels: display, heading, subheading, body text, and button text, that meets the brand identity, and shows sufficient color contrast ratio. 

New Typography System web

Suggested Typography System

Typography System Accessibility Check

I suggest slightly adjusting the colours used in the interface to achieve improved readability through a better contrast ratio. Recommended colours match the colour palette.

Accessibility check for color contrast ratio

Accessibility check for color contrast ratio

Completion Criteria

UXCEL evaluation

In progress…