Back
UI/UX Design

Typography App for
Testing & Comparing

Browse, compare, and test typeface pairings — all from your phone. Built as a university project for FADU, this app makes font discovery fast, intuitive, and beautiful.

Role UX/UI Designer
Timeline 6 weeks
Tools Figma, Prototyping, User Testing
Platform iOS Mobile App
01

The Problem

Choosing the right font pairing is one of the most time-consuming tasks in design. Designers constantly jump between Google Fonts, type specimen sites, and their design tools just to compare two typefaces. There was no dedicated mobile tool to explore, test, and compare typography pairings on the go.

02

Onboarding

Three illustrated screens welcome users and explain the core value: search, test & compare, and share.

Onboarding — Search 1 · Search
Onboarding — Test & Compare 2 · Test & Compare
Onboarding — Download & Share 3 · Download & Share
03

Home & Discovery

The home screen greets users with personalized font recommendations, a prominent search bar, and quick access to favorites and recent typefaces. Font cards display the family name, classification, and variable count at a glance — making browsing fast and intuitive.

Home screen — full view
04

Search & Browse

A powerful search engine lets users find any font from the Google Fonts catalog. Results update live with instant preview cards showing the typeface rendered in sample text, making it easy to scan and pick the right font without leaving the app.

Search — empty state Empty Search
Search — live results Live Results
Search — favorite a font Favorite a Font
05

Font Detail

Each font has a dedicated detail page showing all weight variants — from Thin to Bold — with a live character browser. Users can see the designer info, font history, and add the typeface directly to their project.

Font detail — header
06

The Core Feature: Comparison

The heart of the app — a side-by-side comparison view that lets users pit two typefaces against each other. Adjust size, weight, alignment, and overlay colors to see exactly how fonts interact. Switch between "Probar" (test) and "Comparar" (compare) modes.

Comparison — side by side Side by Side
Comparison — overlay mode Overlay Mode
Home screen — device mockup
Testing — device mockup
07

Testing & Customization

Each font can be tested individually with custom text, adjustable point sizes, weight variants, and real-time color customization. A built-in color picker lets designers test fonts against their specific brand palettes.

Font testing — live preview Live Preview
Color picker Color Picker
Full test interface Full Test View
08

Favorites & Projects

Organize your typography work with a favorites system and project folders. Save fonts you love, group them into projects, and access your recently viewed typefaces — all from a clean, minimal management interface.

Projects list Projects
Save to project Save to Project
09

Share & Collaborate

When the pairing is perfect, share it via email directly from the app. Add a message, hit send, and your typography project is on its way.

Email sharing form Send via Email
Success confirmation Sent Successfully