e33.io

I’ve updated the site to use JetBrains Mono as the monospace font for code blocks and inline code. This free and open source font is designed by JetBrains.

JetBrains Mono’s typeface forms are simple and free from unnecessary details. Rendered in small sizes, the text looks crisper.

The easier the forms, the faster the eye perceives them and the less effort the brain needs to process them.

I used the @font-face rule to load the font files like this.

@font-face {
    font-family: 'JetBrains Mono';
    src: url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

Then I styled the code elements like this.

pre,
code {
	color: #e7e7e7;
	background: #131313;
	font-family: 'JetBrains Mono', monospace;
	font-variant-ligatures: none;
	font-size: 1rem;
}
pre {
	padding: 1rem;
}
:not(pre) > code {
	border-radius: 0.25rem;
	padding: 0.25rem;
}

The font-variant styles are opinionated styles that I think make it easier to read and follow all the code characters, and I use Prism for the syntax highlighting.