Case study
Typography System (A11Y consideration)
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.
© 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
75B022
#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 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 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.
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
Completion Criteria
UXCEL evaluation
In progress…