Web and UI type has stricter requirements than print: it needs to stay legible at small sizes, load fast, and usually needs multiple weights to build a real interface hierarchy (headlines, body text, labels, buttons). Here are four fonts built to handle that job well.
1. Maker Market Grift — for a full UI weight system
Maker Market Grift's standout feature for web use is its variable font file — one file, any weight, controlled dynamically via CSS. That means faster page loads than serving 9 separate weight files, without giving up design flexibility.
2. Maker Market Lenia Sans — for international products
Building a UI that needs to support users in dozens of languages? Maker Market Lenia Sans's 270+ language support and clean geometric structure hold up across a wide range of scripts and character sets.
Shop Maker Market Lenia Sans →
3. Maker Market Interval — for dashboards, data & code
Maker Market Interval's consistent character widths make it the natural choice for data tables, dashboards, pricing grids, and any interface displaying code or structured numbers where alignment matters.
4. Maker Market Guttor — for clean SaaS & product branding
For product logos and headline type that need to feel modern without shouting, Maker Market Guttor's subtle inktrap detailing keeps interfaces looking sharp at every size, from a 16px nav bar to a full-width hero headline.
How to add any of these as a web font
- Use the included WOFF or WOFF2 files (the standard formats for the web).
- Upload them to your site's assets/fonts folder.
- Add an
@font-facerule in your CSS pointing to the file. - Reference the font-family name in your site's stylesheet.
@font-face {
font-family: "Grift Variable";
src: url("grift-variable.woff2") format("woff2-variations");
font-weight: 100 900;
}Frequently Asked Questions
What's the advantage of a variable font for web performance?
A variable font loads once and covers every weight, instead of loading a separate file per weight — fewer HTTP requests and a smaller total payload in most real-world cases.
Are these fonts accessible/legible at small UI sizes?
Yes, all four were designed with clean geometry and strong legibility in mind, which is exactly what small UI text needs.
Can I self-host these as web fonts, or do I need a font service?
You can self-host directly — every font here includes WOFF/WOFF2 files ready for your own @font-face setup, no third-party font service required.
Browse the full collection at Maker Market Fonts.