iaso fonts

Signed-off-by: Xe Iaso <me@xeiaso.net>

5 files changed, 278 insertions, 6 deletions

diff --git a/blog/iaso-fonts.markdown b/blog/iaso-fonts.markdown
new file mode 100644
index 0000000..8ba82b8
--- /dev/null
+++ b/blog/iaso-fonts.markdown
@@ -0,0 +1,210 @@
+---
+title: "Site Update: New Fonts"
+date: 2023-03-19
+series: site-update
+tags:
+ - font
+ - design
+ - CSS
+ - woff2
+---
+
+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](https://typeof.net/Iosevka/) font that I designed for my
+online brand image. It includes three fonts that serve different
+purposes:
+
+* <span style="font-family: Iosevka Aile Iaso;font-size:1.25rem">Iosevka Aile Iaso -
+  screen prose, sans serif</span>
+* <span style="font-family: Iosevka Curly Iaso;font-size:1.25rem">Iosevka Curly Iaso -
+  code and terminals</span>
+* <span style="font-family: Iosevka Etoile Iaso;font-size:1.25rem">Iosevka Etoile Iaso -
+  screen titles, printed text, has serifs</span>
+
+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.
+
+<xeblog-hero ai="Anything" file="park-drawing" prompt="1girl, light green hair, green eyes, black hoodie, long hair, outdoors, seattle, picnic table, wearing headphones, sketchpad, drawing, pondering, ponytail, space needle"></xeblog-hero>
+
+<xeblog-conv name="Cadey" mood="enby">I also made the base font on the
+webpage a bit bigger. Let me know if this is too big!</xeblog-conv>
+
+## Why?
+
+<xeblog-conv name="Mara" mood="hmm" standalone>I don't get why you'd
+need your own font though. Why aren't system fonts good
+enough?</xeblog-conv>
+
+In general, my website used to look inconsistent across different
+platforms. I had optimized things for macs with the
+[Menlo](https://en.wikipedia.org/wiki/Menlo_(typeface)) 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.
+
+<span style="font-family:sans-serif;font-size:1.125rem">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 <em
+style="font-size:1.125rem">annoyingly different</em>. The fact that
+the CSS I use assumes the use of a monospace font certainly doesn't
+help either.</span>
+
+Monospace fonts are also [very bad for
+prose](https://ux.stackexchange.com/questions/48753/does-the-use-of-monospaced-fonts-negatively-affect-legibility-of-article-text).
+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](https://typeof.net/Iosevka/customizer). 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](https://github.com/Xe/iosevka/blob/main/flake.nix) 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:
+
+![](/static/img/iaso-fonts-depgraph.svg)
+
+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](https://typeof.net/Iosevka/specimen).
+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](https://iliana.fyi), 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:
+
+```shell
+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.
+
+<xeblog-conv name="Aoi" mood="cheer">Wow! That's small!</xeblog-conv>
+
+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:
+
+```html
+<link rel="stylesheet" href="https://cdn.xeiaso.net/static/css/iosevka/family.css" />
+```
+
+Or this to your CSS:
+
+```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:
+
+```css
+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.
+
+<xeblog-conv name="Cadey" mood="coffee">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.</xeblog-conv>
diff --git a/flake.lock b/flake.lock
index 2009f26..e387845 100644
--- a/flake.lock
+++ b/flake.lock
@@ -103,11 +103,11 @@
         "utils": "utils"
       },
       "locked": {
-        "lastModified": 1679172980,
-        "narHash": "sha256-B9RMXNbKk6ZY1Xom/3j/psIW7xJIaWTy1hSOplvDjps=",
+        "lastModified": 1679241422,
+        "narHash": "sha256-ueCrGqZHj9Grf/yCxbbaOkLBI9D8lH5NiPRu9Bcy8+Q=",
         "owner": "Xe",
         "repo": "iosevka",
-        "rev": "7ff508fdc3b00f822d4b8dcd14f0ed2a5eb302fd",
+        "rev": "09abe22e07d8d20d718e782d990af02d430d3f33",
         "type": "github"
       },
       "original": {
diff --git a/lib/xesite_templates/src/lib.rs b/lib/xesite_templates/src/lib.rs
index 9472af2..79d4004 100644
--- a/lib/xesite_templates/src/lib.rs
+++ b/lib/xesite_templates/src/lib.rs
@@ -144,7 +144,7 @@ pub fn video(path: String) -> Markup {
 
 pub fn advertiser_nag(nag: Option<Markup>) -> Markup {
     html! {
-        script r#async src="https://media.ethicalads.io/media/client/ethicalads.min.js" { "" }
+        script async src="https://media.ethicalads.io/media/client/ethicalads.min.js" { "" }
         div.adaptive data-ea-publisher="christinewebsite" data-ea-type="text" data-ea-style="fixedfooter" {
             .warning {
                 @if let Some(nag) = nag {
diff --git a/static/css/hack.css b/static/css/hack.css
index e3615aa..39d631f 100644
--- a/static/css/hack.css
+++ b/static/css/hack.css
@@ -17,7 +17,7 @@
 }
 
 html {
-  font-size: 14px;
+  font-size: 16px;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
 }
@@ -188,7 +188,7 @@ a:hover {
 .hack em,
 .hack strong {
   font-size: 1rem;
-  line-height: 20px;
+  line-height: 0.5rem;
 }
 .hack blockquote,
 .hack code,
diff --git a/static/img/iaso-fonts-depgraph.svg b/static/img/iaso-fonts-depgraph.svg
new file mode 100644
index 0000000..3489309
--- /dev/null
+++ b/static/img/iaso-fonts-depgraph.svg
@@ -0,0 +1,62 @@
+<svg width="172pt" height="283pt"
+ viewBox="0.00 0.00 172.21 282.83" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 278.8313)">
+<title>G</title>
+<polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-278.8313 168.2109,-278.8313 168.2109,4 -4,4"/>
+<!-- xesite -->
+<g id="node1" class="node">
+<title>xesite</title>
+<ellipse fill="none" stroke="#000000" cx="33.5613" cy="-90" rx="33.6228" ry="18"/>
+<text text-anchor="middle" x="33.5613" y="-85.8" font-family="Times,serif" font-size="14.00" fill="#000000">xesite</text>
+</g>
+<!-- iosevka -->
+<g id="node2" class="node">
+<title>iosevka</title>
+<ellipse fill="none" stroke="#000000" cx="77.5613" cy="-18" rx="40.5693" ry="18"/>
+<text text-anchor="middle" x="77.5613" y="-13.8" font-family="Times,serif" font-size="14.00" fill="#000000">iosevka</text>
+</g>
+<!-- xesite&#45;&gt;iosevka -->
+<g id="edge1" class="edge">
+<title>xesite&#45;&gt;iosevka</title>
+<path fill="none" stroke="#000000" d="M44.2125,-72.5708C49.4164,-64.0553 55.787,-53.6308 61.5606,-44.183"/>
+<polygon fill="#000000" stroke="#000000" points="64.6277,-45.8762 66.8557,-35.5182 58.6547,-42.226 64.6277,-45.8762"/>
+</g>
+<!-- XeDN -->
+<g id="node3" class="node">
+<title>XeDN</title>
+<ellipse fill="none" stroke="#000000" cx="121.5613" cy="-90" rx="36.4761" ry="18"/>
+<text text-anchor="middle" x="121.5613" y="-85.8" font-family="Times,serif" font-size="14.00" fill="#000000">XeDN</text>
+</g>
+<!-- XeDN&#45;&gt;iosevka -->
+<g id="edge2" class="edge">
+<title>XeDN&#45;&gt;iosevka</title>
+<path fill="none" stroke="#000000" d="M110.9102,-72.5708C105.7062,-64.0553 99.3357,-53.6308 93.562,-44.183"/>
+<polygon fill="#000000" stroke="#000000" points="96.468,-42.226 88.2669,-35.5182 90.495,-45.8762 96.468,-42.226"/>
+</g>
+<!-- Xess -->
+<g id="node4" class="node">
+<title>Xess</title>
+<ellipse fill="none" stroke="#000000" cx="121.5613" cy="-162" rx="29.6127" ry="18"/>
+<text text-anchor="middle" x="121.5613" y="-157.8" font-family="Times,serif" font-size="14.00" fill="#000000">Xess</text>
+</g>
+<!-- Xess&#45;&gt;XeDN -->
+<g id="edge3" class="edge">
+<title>Xess&#45;&gt;XeDN</title>
+<path fill="none" stroke="#000000" d="M121.5613,-143.8314C121.5613,-136.131 121.5613,-126.9743 121.5613,-118.4166"/>
+<polygon fill="#000000" stroke="#000000" points="125.0614,-118.4132 121.5613,-108.4133 118.0614,-118.4133 125.0614,-118.4132"/>
+</g>
+<!-- other -->
+<g id="node5" class="node">
+<title>other</title>
+<ellipse fill="none" stroke="#000000" cx="121.5613" cy="-245.4156" rx="42.7997" ry="29.3315"/>
+<text text-anchor="middle" x="121.5613" y="-249.6156" font-family="Times,serif" font-size="14.00" fill="#000000">other</text>
+<text text-anchor="middle" x="121.5613" y="-232.8156" font-family="Times,serif" font-size="14.00" fill="#000000">projects</text>
+</g>
+<!-- other&#45;&gt;Xess -->
+<g id="edge4" class="edge">
+<title>other&#45;&gt;Xess</title>
+<path fill="none" stroke="#000000" d="M121.5613,-215.7715C121.5613,-207.5664 121.5613,-198.6796 121.5613,-190.5388"/>
+<polygon fill="#000000" stroke="#000000" points="125.0614,-190.3865 121.5613,-180.3866 118.0614,-190.3866 125.0614,-190.3865"/>
+</g>
+</g>
+</svg>