01
Roboto
96 PX SOURCE SIZE
Loading font and drawing paths…
- Canvas
- —
- SVG size
- —
- Characters
- —
FONT LAB / 002
Compare font outlines side by side.
Type your own text and compare real SVG paths at one shared scale. Change weights, inspect character support and file size, then download the result you prefer.
Up to 40 characters. One line keeps width and detail easy to compare.
Live comparison
Same text. One shared preview scale.
3/4 fonts selected
Swipe sideways to compare every font.
02
Montserrat
96 PX SOURCE SIZE
Loading font and drawing paths…
- Canvas
- —
- SVG size
- —
- Characters
- —
03
Playfair Display
96 PX SOURCE SIZE
Loading font and drawing paths…
- Canvas
- —
- SVG size
- —
- Characters
- —
Each preview is built from its selected font file in your browser. If characters are missing, that preview and its download are disabled instead of showing placeholder glyphs. File sizes describe the downloadable SVGs, not the font files.
COMPARE BY PURPOSE
Start with a design decision
Choose a case to load its text, fonts, and weights into the tool above. The SVG outlines and measurements are then generated from those font files in your browser.
01 / DISPLAY
Text to compare
BRAND
One word, three headline styles
Compare a geometric sans, a serif, and a condensed display face using exactly the same word.
Montserrat · 700Playfair Display · 700Bebas Neue · 400
Look for: Width, letter spacing, and the shape of each counter.
02 / INTERFACE
Text to compare
Save & continue
A button label that fits
Try a familiar interface phrase in three sans-serif fonts before exporting it as an outline.
Roboto · 400Inter · 400Lato · 400
Look for: Lowercase clarity and the canvas width of the full label.
03 / NUMERALS
Text to compare
2026 / SVG
Numbers and symbols for a badge
Compare the same year and short label in three distinct styles, with characters supported by every selected font.
Inter · 700Playfair Display · 700Bebas Neue · 400
Look for: Digit shapes, the slash, and the space each design occupies.
THREE STEPS
How to compare font outlines
Keep the input identical across cards so differences come from the chosen font files and weights.
- 01
Enter the text you will use
Use a short wordmark, label, or phrase. Include accented or non-Latin characters if they matter to your design.
- 02
Choose two to four fonts
Change each font and weight independently. Every preview starts from the same 96 px source size and shares a preview coordinate system.
- 03
Inspect and export
Compare the outlines, canvas dimensions, SVG bytes, and missing characters. Download the version you want to take into your design tool.
READ THE RESULTS
What each comparison tells you
The preview aligns the candidates for visual comparison. The numbers describe each separately downloadable SVG.
Shared preview scale
The live cards use one viewBox, so you can compare relative width and shape. Downloads get their own fitted viewBox rather than the shared preview frame.
Canvas dimensions
Width and height describe the exported SVG canvas in pixels, including a small margin around the paths. The same text can occupy different widths.
SVG file size
This is the size of the generated outline file, not the source font file. More path detail can produce a larger SVG without making it a better choice.
Character support
A missing-character warning comes from the font’s character map (cmap). The affected preview and download stay disabled until you choose a font that contains every character.
Font comparison questions
1Do the downloaded SVGs have the same viewBox?
Do the downloaded SVGs have the same viewBox?
No. The on-page previews share a viewBox for comparison. Each download is fitted to its own letter outlines with a small margin.
2Why does weight 400 look different across fonts?
Why does weight 400 look different across fonts?
Weight names are defined within each font family. Two files both marked 400 can have different stroke shapes and apparent heaviness, so compare the actual outlines.
3Does a smaller SVG file mean a better font?
Does a smaller SVG file mean a better font?
No. SVG size reflects the generated path data for this text. Choose the shape and character coverage you need; use the file size as one practical consideration.
4Can I compare Japanese or other non-Latin text?
Can I compare Japanese or other non-Latin text?
Yes. Enter the exact characters you need and check the character-support row for every candidate. Font coverage varies by family and file.
5Will the exported SVG need the font installed?
Will the exported SVG need the font installed?
No. The download contains outline paths rather than editable text, so the recipient does not need the source font to display those shapes.