Typography System (A11Y consideration)
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.
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.
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.
Current Color Palette
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.
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.
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.
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.
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.
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.