Iosevka: the open source monospace font for coding

You open two files side by side in your editor and one of them gets cut off mid-line. So you shrink the font, squint, and spend the whole afternoon with your face glued to the monitor. Iosevka was made to fix this. It's an open source monospace font, narrow on purpose, that fits more code in the same screen width without turning into ant-sized text.

It's not new. The project has been around since 2015 and is maintained by Belleve Invis on GitHub. But it still gets frequent releases, and it became a favorite among people who spend the day in the terminal. The official page is at typeof.net/Iosevka and it's worth a visit, even if just to play with the preview.

So what is Iosevka?

Iosevka is a font family for code, with sans-serif and serif versions (Iosevka Slab). It's licensed under the SIL Open Font License 1.1. In practice, that means you can use it in your editor, your terminal, your website, and even bundle it with a product, all for free.

The detail that changes everything is the width. Each Iosevka character takes half an em. Most popular monospace fonts sit around 0.6 em. It sounds small, but the math is simple: in the same width, you see about 20% more columns.

On a 1920-pixel monitor with the editor split into two panes, that's the difference between reading a full 100-character line or scrolling sideways. If you use Prettier with printWidth: 100, you'll feel it on day one.

The family comes in several variants:

• Iosevka: the default, with ligatures.
• Iosevka Term: tuned for terminals, with arrows and symbols that respect the cell grid.
• Iosevka Fixed: no ligatures, strictly monospace, for terminals that get confused by them.
• Iosevka Slab: the serif version, for people who like letters with feet.
• Iosevka Aile and Etoile: quasi-proportional, designed for running text and documentation.

There are nine weights, from Thin to Heavy, plus italic and oblique. You can use the same family for code, terminal and notes.

Why does a narrow font help you code?

Code is a weird kind of text. We read it more vertically than horizontally, jump from block to block, and compare similar lines. A wide font wastes space exactly where the screen is most crowded: side panel, integrated terminal, diff, minimap.

With Iosevka, my daily layout looks like this: file explorer, two editors side by side, and a terminal at the bottom. It all fits on a laptop screen without me dropping the font to 11.

There's a cost, of course. Narrow letters need a bit more line height to breathe. I bump up the lineHeight and the result is comfortable. If you use it with the default settings of a wide font, you'll find it cramped and give up in five minutes. Tune it before you judge.

A coding font is a work tool. You spend more hours looking at it than at any IDE.

The part nobody else has: you build your own font

This is why Iosevka has such loyal fans. Almost every glyph has variants. The zero can be slashed, dotted or plain. The lowercase l can have a tail or not. The g can be single or double-story. The asterisk can sit high or centered.

You choose these in three ways.

1. Ready-made stylistic sets. The font ships with sets that mimic the design of other famous monospace fonts. ss14 resembles JetBrains Mono, ss05 resembles Fira Mono, ss08 resembles PragmataPro (which is expensive, by the way). In VS Code, just enable the feature:

{
  "editor.fontFamily": "'Iosevka Term', monospace",
  "editor.fontSize": 15,
  "editor.lineHeight": 1.6,
  "editor.fontLigatures": "'ss14', 'calt'"
}

2. Specific character variants. If you only want to swap one glyph, use the OpenType cvXX features. It works in the editor and in your site's CSS too.

3. Custom build. This is hardcore nerd mode. You describe the font in a TOML file and generate the files yourself:

[buildPlans.IosevkaDiego]
family = "Iosevka Diego"
spacing = "term"
serifs = "sans"
noCvSs = true
exportGlyphNames = false

[buildPlans.IosevkaDiego.variants]
inherits = "ss14"

Then clone the repository and run the build:

git clone --depth 1 https://github.com/be5invis/Iosevka
cd Iosevka
npm install
npm run build -- ttf::IosevkaDiego

An honest warning: this build is heavy. It generates dozens of files and eats CPU for quite a while. If your laptop heats up easily, like mine does, use the web customizer on the official site to generate the TOML and run the build on GitHub Actions. Your machine will thank you.

How to install Iosevka without hassle

For most people, skip the build. Download the prebuilt version and move on.

• macOS: brew install --cask font-iosevka
• Linux and Windows: download the zip from the GitHub releases page and install the .ttf files.
• Terminal with icons: the Nerd Fonts project has Iosevka and IosevkaTerm with icons built in. Great if you use Starship, lazygit or a prompt full of symbols.

My suggestion: Iosevka Term in the terminal and regular Iosevka in the editor. If your terminal renders ligatures in a weird way, switch to Fixed and the problem goes away.

Is it worth using on your website?

Yes, but carefully. The full package is large, because Iosevka covers Latin, Greek, Cyrillic, box drawing and a ton of symbols. If you ship all of it to the browser, your page load will suffer just because of a code block.

The right way is to use only the weights you need, in woff2, and subset the characters. The releases already include webfont packages. A lean setup looks like this:

@font-face {
  font-family: 'Iosevka Web';
  src: url('/fonts/iosevka-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

pre, code {
  font-family: 'Iosevka Web', ui-monospace, monospace;
  font-feature-settings: 'ss14';
}

With one regular weight and a basic Latin subset, the file drops to a few dozen KB. For a tech blog, that's acceptable. More than two weights starts to not pay off.

Where Iosevka isn't the best choice

Nothing is perfect, and saying otherwise would be advertising.

On low-density screens with a small font size, narrow letters lose legibility. If you code on a 27-inch 1080p monitor with a size 12 font, JetBrains Mono or Fira Code might be more comfortable. Iosevka shines on high-density screens and for people who like seeing lots of code.

There's also the matter of choice. So many variants can become a bottomless pit. I've seen people spend an afternoon deciding between two asterisk designs. Arguing about fonts is the new tabs vs. spaces, just with more screenshots on Twitter.

And if you pair program with someone, be ready: they'll look at your screen and ask if your editor is squished. It comes with the territory.

Is it worth switching fonts?

My take: it's worth testing for a week, with the line height adjusted. Switching fonts comes with two or three days of weirdness. After that, either you never go back, or you go back knowing exactly why.

What I like most about Iosevka is the project's model. A free font, maintained for over ten years, that treats developers as people capable of deciding how they want their own zero. Few paid tools offer that level of control.

If you enjoy this kind of fine-tuning in your work environment, check out the projects I've been building. Almost all of them started from a small everyday annoyance, just like a line cut off in the middle of the editor.

Your editor cuts lines in half, so you shrink the font until your eyes hurt? There's a better way.

Iosevka is an open source monospace font that's narrow on purpose. Each character takes half an em. Most coding fonts take around 0.6.

In practice, you get about 20% more columns. File explorer, two editors side by side and a terminal on a laptop screen, without dropping the font to 11.

And you can build your own: slashed or dotted zero, single or double-story `g`, stylistic sets that mimic JetBrains Mono and PragmataPro.

The tip that makes the difference: raise the lineHeight before you judge. Narrow letters need room to breathe.

Try it for a week and tell me if you go back to your old font. I wrote the full guide on the blog.

#Programming #DevTools #OpenSource #VSCode #Productivity