Your phone lies about type (on purpose)
System rasterizers hint differently than desktop design apps. A face you love inside Figma often feels heavier, tighter, or oddly tall once social crops and mobile subpixels enter the room.
This page exists so you rehearse strings in a browser instead of trusting static mockups alone. You paste the caption you argued about in Slack, bump weight, watch tracking, then decide whether the brand font survives a dark-mode screenshot.
Inside the lane: what actually runs here
Pick a row in the library. System families resolve immediately from the OS stack. Google families trigger a stylesheet fetch the first time you touch them, so the first paint might lag a beat on slow networks.
Single mode drives the large specimen plus the four lighter cards below (display, subhead, body, micro). Compare mode keeps your global metrics but routes the same paragraph through three parallel columns until you fill each slot.
PNG export rasterizes with the HTML canvas. Complex scripts, color fonts, or OpenType features your OS ignores will not magically appear. Treat exports as quick share artifacts, not print proofs.
Where teams use this before shipping
| Scenario | Input | Outcome |
|---|---|---|
| Social caption QA | Final Instagram line + emoji | Check legibility at 375px width before you paste into the Instagram post generator. |
| Link card rehearsal | Title case headline | Match typographic tone with blurbs from the meta description generator so SERP snippets feel coherent. |
| Campaign week planning | Three headline variants | Compare weights side by side, then slot winners into the content calendar generator. |
| Share image handoff | Short hero copy | Export a PNG stub for designers while OG tags get drafted in the Open Graph meta generator. |
Stop expecting miracles from the short list
The catalog here is intentionally small: common system faces plus a curated slice of Google Fonts. You will not browse the entire library, enable variable axes, or preview local WOFF files you dropped on disk.
Subsetting, licensing, and performance budgets still belong to your build pipeline. We recommend pairing subjective taste checks here with hard metrics from your staging environment once real CSS lands.
Random pair: when the dice help
Pairing is subjective, yet teams stall because infinite choice feels safer than committing. The random pair button does not replace art direction; it hands you a contrasting heading and body suggestion you would not have typed yourself, then you accept, reject, or tweak inside compare mode.
Most pairs skew toward a serif display plus a neutral sans body, or the inverse. If a suggestion feels off-brand, treat the output as a reminder to document why your stack differs, not as an order to redesign the site.
Terms worth five seconds each
- Tracking
- Letter spacing measured in pixels here. Positive values open headlines; negative values tighten logos but punish long paragraphs.
- Line height
- Unitless multiplier in CSS. Social captions often survive 1.35–1.55; long articles want more air unless you intentionally chase density.
- Synthetic bold
- What the browser fakes when you request a weight the font file never shipped. It looks smeared on small screens, which is why compare mode at phone width matters.
Judgment call
For brand-critical launches, proof on target devices with the same font files you intend to serve. This lab accelerates early decisions; production validation still wins when budgets exceed a single afternoon.
