Font Compare Tool: Two Fonts Side by Side
Compare letterforms, overlay outlines, measure x-height and character width in your browser, and diff commercial licences row by row. Test open fonts and compare with proprietary reference fonts.
Roboto
The quick brown fox jumps over the lazy dog
Open Sans
Open Sans is a commercial font: FontsLike shows facts about it and never loads its files.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Open Sans is a commercial font: FontsLike shows facts about it and never loads its files.
The quick brown fox jumps over the lazy dog
Browser Font Metrics
Live typography measurements extracted from browser Canvas 2D TextMetrics engine.
| Metric | Roboto (A) | Open Sans (B) | Comparison |
|---|---|---|---|
| x-Height / Cap-Height Ratio Ratio of lowercase 'x' height to capital 'H' height | — | — | — |
| Average Character Width Total sample text width divided by character count | — | — | — |
| Ascender Height Height extending above baseline (actualBoundingBoxAscent) | — | — | — |
| Descender Depth Depth extending below baseline (actualBoundingBoxDescent) | — | — | — |
| Capital Height ('H') Measured baseline-to-top of capital letter 'H' | — | — | — |
Licence Permissions & Diff
Permissions compared across commercial, web, app, logo, and redistribution rights. Differing permission rows are highlighted.
SIL Open Font License 1.1
OFL-1.1Use it for anything, including commercial work and logos; share it with its licence; never sell the font file on its own.
SIL Open Font License 1.1
OFL-1.1Use it for anything, including commercial work and logos; share it with its licence; never sell the font file on its own.
| Permission / Right | Roboto (A) | Open Sans (B) | Status |
|---|---|---|---|
| Commercial work ads, packaging, merch, video, print on demand | Allowed | Allowed | Identical |
| Logo or wordmark a brand, a channel, a game title | Allowed | Allowed | Identical |
| Website the font file served with @font-face | Allowed, with conditions | Allowed, with conditions | Identical |
| App or game the font file bundled inside software | Allowed, with conditions | Allowed, with conditions | Identical |
| Modify the font edit glyphs, subset, convert formats | Allowed, with conditions | Allowed, with conditions | Identical |
| Share the font file give the file to others, free | Allowed, with conditions | Allowed, with conditions | Identical |
| Sell the font file the font on its own, for money | Not allowed | Not allowed | Identical |
| No credit needed in your work attribution in the thing you made | Allowed | Allowed | Identical |
Select font
Three Ways to Compare Letterforms
Switch between viewing modes to inspect hierarchy, rhythm, and outline geometry.
1. Side by Side
Two parallel columns show both typefaces with identical text and sizing. Ideal for assessing optical weight, open counters, and overall reading texture.
2. Stacked Rows
Place words directly above one another on aligned horizontal tracks to spot differences in tracking, ascender heights, and cap-height consistency.
3. Overlay Outlines
Layer Font B outlines over Font A on an arcade checkerboard canvas to inspect subtle variations in curves, terminals, serifs, and letter widths.
Frequently Asked Questions
Common questions about in-browser font comparison, metrics, and licensing diffs.
How does outline overlay comparison work? ▼
Overlay mode draws the outlines of Font A and Font B directly over each other at identical font sizes and baselines. Font A is rendered in blue outlines and Font B in pink outlines. This reveals minute differences in letter proportions, stroke weights, counter spaces, and terminal curves.
Why are some fonts marked "Reference Font" and not rendered? ▼
Reference fonts (such as Arial, Calibri, Times New Roman, and Helvetica) are proprietary commercial or operating system fonts. FontsLike strictly respects font copyright and licensing: we never host, distribute, or render unlicensed font files. For reference fonts, we display their licensing terms and link directly to the closest open-source lookalikes.
How are font metrics measured in the browser? ▼
Metrics are calculated in real time inside your browser using the HTML5 Canvas 2D TextMetrics API. Once the web fonts are loaded, the browser measures exact bounding box dimensions for x-height, cap-height, character widths, ascenders, and descenders.
Can I share a specific font comparison link with others? ▼
Yes. The comparison state is synchronized to URL parameters (for example, /compare/?a=roboto&b=open-sans&t=Custom+Text). Sharing or bookmarking that URL restores the exact pair and preview text.