Hey all! You may have noticed things looking a little different on the site. I have finally decided to adopt a custom font family for my blog. Unless your browser overrides the fonts that websites use, you are likely looking at the first attempt at the Iosevka Iaso font family. This is a custom version of the Iosevka font that I designed for my online brand image. It includes three fonts that serve different purposes:

• Iosevka Aile Iaso - screen prose, sans serif
• Iosevka Curly Iaso - code and terminals
• Iosevka Etoile Iaso - screen titles, printed text, has serifs

I'm happy with the results so far and I am going to continue to do research and design work to make this better. In the future I plan to extend the set with a variant optimized for dialogue.

<Cadey> I also made the base font on the webpage a bit bigger. Let me know if this is too big!

Why?

<Mara> I don't get why you'd need your own font though. Why aren't system fonts good enough?

In general, my website used to look inconsistent across different platforms. I had optimized things for macs with the Menlo typeface as the default view of my website. This has worked for a long time, and most of my readers use macs anyways. However, I've been wanting to do a design refresh on this blog for a while and haven't really found a good stepping stone into it.

Plus, it looks really weird to use a non-fixed-width font on this website. It looks really out of place and jarring. The fact that so much of my brand design is centered around monospace fonts really makes it hard to change anything without making everything look annoyingly different. The fact that the CSS I use assumes the use of a monospace font certainly doesn't help either.

Monospace fonts are also very bad for prose. My blog has lots of prose. This is a problem. I've had dyslexic friends of mine lament that my blog's monospace font makes it harder to identify the shapes of words, and some have gone as far as using their browser to override everything to their chosen easy to read font. This probably needs to be fixed.

At the same time, if I make something like this, I want to be able to create an opinionated set of fonts that I can easily plug into other projects besides this blog. This would allow me to have things look consistent across browsers, projects, and even print media. I've never really had a "brand design" per se, and I want to experiment with this to see if I can get something that I like.

I think I have created a large part of that with the Iosevka Iaso font family. The Iosevka Aile Iaso font is quasi-proportional, meaning that it looks something halfway between a proportional font like I'd like to have and the monospace font that I used to have. This should hopefully make the transition less jarring.

Implementation details

The core of the implementation of this font is thanks to the Iosevka font being customizable. If you've never done it before, take a moment to play around with the customizer. It's nuts. You have so much control over what the font does and how every letter is rendered. Want ligatures? You can pick the set you want. Want the T to look different? You can do that.

These build settings are even exposed to Nix, so you can make something like my iosevka flake and then have that get cached around so other projects can pull it in as a flake input. This allows me to pull in the new font changes and feel confident that things are consistent. This ends up making the dependency graph look something like this:

Everything pulls from the iosevka flake, so making a change there will percolate out to everything else.

One of the difficulties I ran into at first was the fact that Iosevka supports so many characters. Each one of the .ttf files in the Iaso family is over a megabyte. At some level, this is really great for all of my other production work. I can use this on slides and in my editor while remaining fairly confident that I'll be able to see everything I need to.

This is not so great for websites though. Even with .woff2 compression of the fonts, it still added up to something like 500 KB per font family. With up to three fonts per page, this means that I would be wasting about 1.5 megabytes of egress data per user with characters that my blog will never have.

Thanks to some meddling courtesy of iliana, I found a command that lets me squish the fonts down to the bare minimum: pyftsubset. I use it to remove most of the characters in the web-optimized fonts with this command:

pyftsubset \
    $ttf \
    --output-file="$name".woff2 \
    --flavor=woff2 \
    --layout-features=* \
    --no-hinting \
    --desubroutinize \
    --unicodes="U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,\
      U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,\
      U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,\
      U+FFFD"

This giant block of text takes a input .ttf file generated by Nix and then removes most of the characters in it except the ones needed for programming, English, Extended Latin, French, German, Italian, and I believe Swedish. This should cover all of the letters I need. This command squashes down the .woff2 files from 500 KB to about 12 KB and change, making my fonts about as large as the conversation snippet stickers.

<Aoi> Wow! That's small!

I think that this will allow me to get the benefits of a consistent design across my websites while I work on a more comprehensive rethinking of my blog's and Xess' design to allow for an easy to maintain, integrate, and reason about font experience.

Usage

If you want to use this font family for some reason, add this to your HTML <head> section:

<link rel="stylesheet" href="https://cdn.xeiaso.net/static/css/iosevka/family.css" />

Or this to your CSS:

@import url(https://cdn.xeiaso.net/static/css/iosevka/family.css);

From here you should attach the fonts to their "default roles" such as by doing this:

body {
  font-family: "Iosevka Aile Iaso", sans-serif;
  font-size: 16px;
}

code, pre {
  font-family: "Iosevka Curly Iaso", monospace;
  font-size: 14px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Iosevka Etoile Iaso", serif;
}

I'd suggest setting the base font size to be 16px, as that seems to be the best balance of text density and readability. Code can be a smidge smaller, but be sure to balance things so that it's not uncomfortable to read. Comfort is key.

TODO

These fonts aren't perfect yet, here's my short list of things to change when I figure out how:

• The fonts are very vertical and not horizontal. This is fine for many people, but this can be a readability issue for others.
• I would like to add my sigil to the font as a custom icon. I need to figure out how to do this.
• I need to do a more detailed study of how people with dyslexia can read this font. I have a very mild level of dyslexia, but I can read this just fine. More information is required.

Overall I'm quite happy with the results so far. It's nice to have a custom font that I can call my own. I'm going to iterate on this like the rest of my projects and hopefully I'll have something more exciting to show off in the near future.

<Cadey> Holy crap, font terminology is pretentious sounding as all hell. You have to worry about ligation, investigate specimens, and all that jazz. It's a lot to take in.