Font Store
For Fontstore, a service that gives designers access to a large font library with a single subscription, we ran a complete digital product process from the store interface to the subscription system.
We designed the store as a discovery experience where designers try fonts with their own text and browse the library by category, collection or designer. Leaving generous white space and putting font previews at the centre, we carried the interface across desktop, mobile and app screens.
We developed the subscription system with monthly and yearly plans, team seats and renewals. We also delivered the licence structure that assigns the fonts to the account for the length of the subscription, and the panel that manages subscribers, payments and the library from one place.
- Client
- Fontstore
- Year
- 2021
- Region
- Global
- Work
- Font store interface and subscription system
- Service
- Websites and e-commerce
How Font Store works
-
Tries a font with their own text
The designer sees their text in every font at once and compares fonts side by side by changing the size, weight or colour. By putting the preview area at the centre of the page and supporting it with a category filter, we made trying fonts the focus of the first screen.
-
Explores a font family
Each font family’s weights, character set and designer sit on its own page. By linking similar fonts and collections on the same page, we let the designer keep exploring the library without interruption.
-
Picks a plan and subscribes
The designer chooses a monthly or yearly plan, and once the subscription starts, the whole library opens up on their account. By moving plan changes and cancellation to the account page, we left subscription management in the designer’s hands.
Admin panel
The team manages subscribers, plans, payments and the font library from a single panel behind the store.
Design language
Using a vivid blue for accents and buttons and black for font previews and text, we put the fonts at the focus of the interface. With generous white space and light grey card backgrounds, we built a clean, balanced visual language that puts typography first.
- #0070F8 Blue Accents and buttons
- #111111 Black Font previews and text
- #F4F6FA Light grey Card backgrounds
- #FFFFFF White Page background
What we did
-
Font store
A library browsed by category, collection and designer, with a dedicated page for each font family.
-
Live preview
A preview where designers compare their own text in every font, with size, weight and colour options.
-
Subscription system
Monthly and yearly plans, team seats, renewals and plan changes from the account page.
-
Licence management
A licence structure that assigns every font to the designer’s account for the length of the subscription.
-
Payments and billing
Card payments, subscription renewals and notifications sent to subscribers when a payment fails.
-
Interface design
A consistent interface that puts typography first on desktop, mobile and app screens.
