A mockup uses a font you like, but you need a free alternative for the actual site. A list of similar fonts gets you started. You still need to see what happens to your headline, your buttons, and the words you intend to ship.
We built FontForThat for designers and developers making that choice. You can look up a familiar font or start with what you're designing, then compare candidates with your own text. FontForThat
What you can do
- Find a free replacement. Look up a font such as Verdana and compare measured alternatives, including differences in letter shapes and width.
- Start with a project. Browse suggestions for tasks such as logos, where you may care more about the character of the lettering than resemblance to an existing font.
- Try your actual copy. Type a brand name, headline, or interface label into an editable specimen and see how each candidate handles it.
- Check the licence. Look up the recorded terms and source for the font before you choose it for a website, app, or logo.
What changes in a 167 px slot
The Verdana comparison in FontForThat reports an average letter-width difference of about +0.3% for DejaVu Sans. It also flags I, J, and j among the glyphs with the largest differences. Verdana comparison and glyph measurements
Here are two strings measured at 16 px with Pillow, using regular Verdana from Windows and regular DejaVu Sans 2.37. DejaVu Sans release
| Text | Verdana | DejaVu Sans |
|---|---|---|
I will join in a minute | 172 px | 163 px |
View your invoice | 141 px | 140 px |
At this measured size, the first string fits in a 167 px slot with DejaVu Sans. It exceeds the slot by 5 px with Verdana. The second string fits either way.
Reproduce the measurement
Install Pillow and point the script at the two regular font files on your machine. getlength gives the advance of the string, the distance the text occupies along the line.
from PIL import ImageFont samples = ["I will join in a minute", "View your invoice"] slot = 167 for path in ["verdana.ttf", "DejaVuSans.ttf"]: font = ImageFont.truetype(path, size=16) for text in samples: width = font.getlength(text) print(path, repr(text), f"{width:.2f}px", width <= slot) For a web app, take the labels closest to their width limits and check them in the browser with the real font files, weight, spacing, and container styles. Include your longest translations. Different font builds and shaping settings can change the numbers, and the browser controls the actual wrapping.


