Type tester
A single component reused at three scales: full width on family pages, compact on the homepage, and inline in the licence flow so you can confirm what you are buying.
- tester/canvas
- tester/control-row
- slider/track
- slider/thumb
Web UIFoundry Type
A type foundry storefront that shows the type properly
A shop selling typefaces where you could not set your own words in one before buying.
- Marketing UI
- Typography
- Ecommerce
- Client
- Foundry Type
- Discipline
- Web UI
- Engagement
- UI/UX design
- Platforms
- Responsive web
- Duration
- 7 weeks
- Delivered
- 2024
01The problem
What we walked into
Foundry Type sells eleven typeface families to designers and studios. The site showed each family as a set of fixed specimen images rendered years earlier, at one size, in one weight, in Latin only.
Which meant the one thing every buyer wanted to do, set their own words and see whether it worked, required downloading a trial, installing it, and opening a design tool. Most people did not get that far.
The licensing step was worse. Six licence types, priced by seat count and use, presented as a dropdown with no explanation of the difference. Support was answering the same three licensing questions every day.
02Goals
What the work had to achieve
Agreed in the first fortnight, written down, and used to settle every argument afterwards.
- G01
Type your own words, immediately
Every family page should let a visitor set their own text, at their own size, in any weight, without leaving the page or creating an account.
- G02
Make the licence choice obvious
Replace the dropdown with a comparison that answers the three questions support keeps receiving, in plain language.
- G03
Let the typefaces do the design work
The interface should be quiet enough that eleven very different families each look like themselves on the page.
- G04
Fast on a bad connection
Specimens are heavy. The page has to be usable before every weight has loaded.
03UI approach
The decisions that shaped the interface
Four moves that did most of the work. Everything else on the project followed from them.
- 01
A live tester on every family page
Editable specimen text, a size slider, weight and style switching, and alignment controls, all working with no account and no download. The text you type persists as you move between families in the same session.
- 02
A licence comparison, not a dropdown
Six licences laid out as a table with the actual questions as rows: how many people, where it can be used, whether it covers a client project, what happens when the team grows. Price updates live with seat count.
- 03
A deliberately quiet interface
Interface type is set at one size in one weight, in a neutral face that never competes with the specimens. Colour is restricted to a single accent used for controls only, so each family sets the mood of its own page.
- 04
Progressive specimen loading
The regular weight loads first and the page is fully usable on it. Other weights stream in behind, with the weight switcher showing which are ready rather than blocking on all of them.
04Components and design system
What got built underneath
The reusable parts, and the tokens they were built from. This is the layer that keeps the interface consistent after we leave.
Licence comparison table
A responsive comparison that becomes a stacked card set below 768px without losing the row labels that make the comparison readable.
- table/compare
- table/label-col
- price/live
Specimen frame
A neutral container with fixed optical padding so families with very different vertical metrics sit consistently across the catalogue.
- specimen/inset
- specimen/bleed
- rule/hairline
05Outcomes
What changed after release
Measured by the client, on their own reporting, over the period noted against each figure.
- Trial-to-purchase conversion
- 3.1xTrial-to-purchase conversionComparing the quarter after launch with the quarter before.
- Licensing support tickets
- −81%Licensing support ticketsThe three most common questions are now answered on the page.
- Median time on a family page
- 6m 40sMedian time on a family pageUp from 41 seconds against the static specimen pages.
- Downloads needed to try a face
- 0Downloads needed to try a facePreviously a trial install was the only way to set your own text.
Sales of the two least popular families tripled. Both are display faces that had been represented by a single specimen image of the word Hamburgefonstiv.
06Gallery
Screens and system, laid out
Layout diagrams of the interface as delivered, with a note on what each one is doing.
- 01 / 04
Family page with live tester
Editable specimen text, size slider and weight switching, with no account and no download.
Interface layout diagram from the Foundry Type project.
- 02 / 04
Licence comparison
Six licences compared by the questions support was actually being asked, with live pricing by seat count.
Interface layout diagram from the Foundry Type project.
- 03 / 04
Catalogue
Eleven families in one quiet frame, each keeping its own character.
Interface layout diagram from the Foundry Type project.
- 04 / 04
Tester controls
The control set, reused at three scales across the site.
Interface layout diagram from the Foundry Type project.
07Take it with you
The one-page version
Everything above, condensed to plain text. Copy it into a brief, or download it to circulate internally.
Case study summary
Plain text, ready to paste into a brief or a board pack. Saves as baseline-studio-foundry-type-store-summary.txt.
BASELINE STUDIO / CASE STUDY SUMMARY
================================================================
Client: Foundry Type
Project: A type foundry storefront that shows the type properly
Discipline: Web UI
Engagement: UI/UX design
Platforms: Responsive web
Duration: 7 weeks
Year: 2024
OVERVIEW
================================================================
Foundry Type sold eleven typeface families through a storefront built on static specimen images, so trying a face with your own words required downloading and installing a trial. Six licence types sat behind an unexplained dropdown.
We designed a live type tester into every family page with editable text, size, weight and alignment control and no account required, replaced the licence dropdown with a plain-language comparison table priced live by seat count, and kept the interface deliberately quiet so each family could set the tone of its own page.
Delivered across 7 weeks: 14 screens across three breakpoints, a type tester component specified at three scales, a responsive licence comparison, and a progressive specimen loading model that keeps the page usable on the regular weight alone.
Results: trial-to-purchase conversion up 3.1x, licensing support tickets down 81 percent, median time on a family page up from 41 seconds to 6 minutes 40, and no download required to try a face.
OUTCOMES
================================================================
3.1x Trial-to-purchase conversion
Comparing the quarter after launch with the quarter before.
−81% Licensing support tickets
The three most common questions are now answered on the page.
6m 40s Median time on a family page
Up from 41 seconds against the static specimen pages.
0 Downloads needed to try a face
Previously a trial install was the only way to set your own text.
CONTACT
================================================================
Baseline Studio
studio@baseline.design
+1 (415) 555 0142
Figures describe a specific product, team and period, and are
published to explain the work rather than to predict a result.05Start a project
Working on something similar?
Tell us where your product is getting stuck. We will tell you honestly whether this is the kind of problem we are good at, and what we think it would take.
- Prefer email
- studio@baseline.design
- Current availability
- Taking on two engagements for the coming quarter.
- Typical reply time
- Two working days, from a partner rather than a form.
