Why I Use Satoshi on Everything I Build

Every personal project I have built in the last year uses the same typeface. This site uses it. The Catan game uses it. The tools I build for myself use it. That typeface is Satoshi, released free on Fontshare by Indian Type Foundry. I did not set out to become monogamous with a font. It just kept being the right answer.

What Satoshi is

Satoshi is a geometric sans-serif designed by Deni Anggara and released through Fontshare, a free font service run by Indian Type Foundry. It comes in five weights — Light, Regular, Medium, Bold, and Black — plus matching italics. There is also a variable font version that gives you the full weight range in a single file. The name is a reference to Satoshi Nakamoto, the pseudonymous creator of Bitcoin, which is a slightly unusual origin story for a typeface but does not affect how it looks on a page.

Why it works so well for UI

Most geometric sans-serifs have a coldness to them. Futura is famous and beautiful but it is not a text font. Helvetica is a workhorse but it has almost no personality at smaller sizes. What Satoshi does differently is introduce subtle optical corrections that make the letters feel warmer at body text sizes while staying clean and modern at display sizes. The lowercase letters have a slightly larger x-height than you would expect from a purely geometric construction, which means they stay readable at 12 or 13px where a lot of geometric fonts start to feel cramped.

The weight range also hits the right spots for UI hierarchy. The Medium weight (500) is distinct enough from Regular (400) that you can use it for labels and secondary headings without jumping to Bold, which gives you more granularity in a type system. The Black weight (900) is strong without being aggressive. The whole family feels like it was designed by someone who actually uses fonts in interfaces rather than just on posters.

Compared to the obvious alternatives

The comparison tab above lets you see this directly. Inter is the standard choice for developer-built UIs and it is excellent. It has better hinting, more language coverage, and a larger community of tooling built around it. For most projects Inter is the correct default. But there is something in Satoshi at display sizes, particularly in the Medium and Bold weights, where it has a bit more character. The terminals of the letters are slightly less mechanical. It reads as a design choice rather than a system default.

System UI fonts (San Francisco on Mac, Segoe UI on Windows) are fast because they require no download, but they are inconsistent across operating systems. If you care about your design looking a specific way everywhere, you need to specify a font. Satoshi loads as a single variable font file which keeps the weight penalty reasonable.

Where it falls short

Satoshi does not have great language coverage beyond Latin. If your project needs Cyrillic, Arabic, CJK, or extensive diacritic support you will need something else. It also does not have a monospace companion, so if you are mixing prose and code you will need a separate font for code blocks. I use a system monospace stack for code to keep load times down.

The other limitation is that because Fontshare hosts it, you are adding a third-party dependency. For maximum reliability I self-host the font files — the repository for this site includes the full Satoshi web font package in public/font/ so it loads from the same origin as everything else and is not affected by Fontshare availability.

The practical setup

Loading Satoshi in a Next.js project with self-hosted files looks like this. Declare the font faces in your CSS pointing at the local files, set it as the default font-family on the body, and add it to your Tailwind config so you can use it with utility classes.

/* globals.css */
@font-face {
  font-family: 'Satoshi';
  src: url('/font/WEB/fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Satoshi', system-ui, sans-serif;
}

The font-display: swap is important. It tells the browser to render text in the fallback system font immediately and swap to Satoshi once it loads, so users on slow connections see text right away rather than invisible characters. The variable font file covers all weights in one request, which is one of the main reasons to prefer it over loading individual weight files.