This Blog is now Fixelized

I recently learned about a new font called Fixel, which was developed at MacPaw in collaboration with Ukrainian type foundry AlphaBravo.

The font is offered under an open license, and since I liked the fresh clean look and good readability combined with some distinctive characteristics¹, I decided to fixelize this blog.

Here is a comparison side-by-side, with the right column (probably²) set in your system default font.

Fixelizing a Hugo blog is achieved simply by

• adding the actual font files to the static resources,
• defining the font faces in a custom.css,
• and setting a global default.

This is quick and easy, but certainly good enough for these pages. By modifying the tailwind css configuration and extending appropriate classes, the customization could be done in a more sophisticated way, for example using the Display type for headings, and applying the Text type only for body text.

@font-face {
    font-family: 'MacPawFixel';
    font-weight: normal;
    font-style: normal;
    src: url('/fonts/FixelText-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'MacPawFixel';
    font-weight: bold;
    src: url('/fonts/FixelText-Bold.woff2') format('woff2');
}


/* Change the default font */
html {
    font-family: 'MacPawFixel', -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
    'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
}