Home

What if We Used Proportional Fonts for Code Blocks?

September 2025

Pop Quiz, Hotshot

What's easier to read?

A block of HTMl code in a monospace font. The specific code isn't really important. It's only used for the font comparison.

or

The same block of HTML. It's using a proportional font this time. Each line is visually a little shorter than in the monospace sample even though they have the exact same text.

It's the second one, right?

What Changed

The only difference is the font. The first one is a monospace font. The default for <pre> tags in HTML. The tags generally used to display source code. The second is a proportional font. The kind used for pretty much everything else.

Monospace fonts are great for writing code. Press the up arrow and the cursor goes to the character directly above. With a proportional font, it jumps from side to side1.

The up arrow thing isn't important for reading code.

Room to Spread Out

Proportional fonts also allow for longer lines.

Monospace:

The same block of code in the monospace font but confined into a smaller area. The first and thrid lines from the prior examples wrap to the lines below them.

Proportional:

The same block of code using the proportional font in the smaller area. None of the lines wrap.

Same text, but the lines with data-module and data-receive wrap onto the following line with the monospace font.

Letting the Newness Ware Off

My old jazz instructor had a saying:

You don't like what you don't know.

My corollary:

You don't like it cause it's new.

It's all to easy to not a like thing just because we haven't had much exposure to it.

I tried flipping to proportional fonts for code blocks before. I didn't like it. I'm pretty sure that's because it was new. After a few decades looking at monospace code, the proportional fonts felt wrong.

I'm playing with them again. Letting the newness ware off. The more I do that, the more I like them.

-a

end of line

Endnotes

The proportional font size is a tiny bit bigger than the monospace font. You could fit even more text in if they were the same size.

References

Also called "variable-width" fonts

Footnotes

1 ⤴

Take a look at the first two examples to get an idea of what I mean about the cursor jumping side to side.

The second and third lines start with:

<button data-send="update">
<div data-receive="update">

Those snippets both have 27 characters. In the monospace sample, the ">" character of each line is stacked vertically. It's offset in the proportional version. So, pressing the up arrow wouldn't necessarily take you to the character you want.