Blog Technology

Fonts

Cormorant

I fell in love with this font upon seeing its Bēhance gallery page. Turns out, my friend and I had also already settled on it for their website! Itʼs a modern, more angular/precise cut of the classic Garamond family. Itʼs a bit risky at body font sizes, but its Garamond OpenType font features assist in keeping it legible, and I went for a more generous font size and weight.

I adore the Upright style, an unslanted italic that has served great in places where I need a more cursive vibe without the semantic implications of a slanted italic.

I had some trouble finding the right source for the files. The latest commit in the GitHub repo seems broken: at least on Mac, the even-odd rule was broken, making the cross-braces on “A” and “e” cut into the figures, which not only looked funny at high resolutions but also destroyed the hinting at low resolutions, almost making the cross-braces disappear. I think I ended up going with the version downloaded from Google Fonts, which contains all of the OpenType features though the font served on their CDN does not.

At the time of writing, non-essential OpenType features aren’t included in web fonts served via Google Fonts’ API; however, the OpenType features are still present in the downloadable fonts, which can then be self-hosted.

EB Garamond (Ελληνικά)

I used this purely to supplement Cormorant with Greek characters, which otherwise only contains Latin and Cyrillic.

CSS Details

I do this by making it the default font, coming before Cormorant, but only loading the Greek section of it by chopping down the default Google Font loader. This is necessary because Comorant actually does contain a few Greek characters, like π (compare π in EB Garamond), so we need EB Garamond to override those for the sake of consistency.

body {
  font-family: "EB Garamond GR", "Cormorant", "Apple Color Emoji";
}

/* greek-ext */
@font-face {
  font-family: "EB Garamond GR";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ebgaramond/v25/SlGFmQSNjdsmc35JDF1K5GRwUjcdlttVFm-rI7e8QL9xU661hGFJRvzr2Q.woff) format("woff");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "EB Garamond GR";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ebgaramond/v25/SlGFmQSNjdsmc35JDF1K5GRwUjcdlttVFm-rI7e8QL9-U661hGFJRvzr2Q.woff) format("woff");
  unicode-range: U+0370-03FF;
}
/* greek-ext */
@font-face {
  font-family: "EB Garamond GR";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ebgaramond/v25/SlGDmQSNjdsmc35JDF1K5E55YMjF_7DPuGi-6_RkCI95WamXgHlIbvw.woff) format("woff");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "EB Garamond GR";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ebgaramond/v25/SlGDmQSNjdsmc35JDF1K5E55YMjF_7DPuGi-6_RkB495WamXgHlIbvw.woff) format("woff");
  unicode-range: U+0370-03FF;
}

(Notice how the greek and greek-ext URLs only differ by 1 or 2 characters – ask me how I learned that(The hard way).)

Mulish

I donʼt have a favorite sans-serif font. I do like Libertinus Sans, but it isnʼt appropriate for most situations. But this seems like a nice modern, legible sans-serif font.

Fira Sans (Ελληνικά)

Same story as the other Greek supplement font. Same trick.

Fira Code

Iʼve been using Hasklig for a couple years for my personal coding, but as I was looking for a good font for this blog I found Fira Code on Google Fonts. I started using it for my personal coding too – after all, if Iʼm going to use it for my blog I should find it good enough to use myself!And I have been satisfied with the experience.

At first I thought I would be able to use the Google Fonts hosted version, but due to the same reason as above that did not work out due to the lack of OpenType features. I needed finer control over the ligatures Fira Code was using. In particular, PureScript uses the backwards fat arrow <= for class declarations, which Fira Code can render like that but by default renders as a less-than-or-equals sign <=. This is controlled with stylistic set cv20, so I set font-feature-settings: "cv20" 1 on this blog, since I think <= is less confusing than <= – but of course a context-sensitive approach would be better.

I am also tempted to make my own version of the font with visible spaces, but I donʼt yet have enough experience with the font building tools to do that yet.

Oswald

Used for nonterminals and rule names in grammars.

I needed something with a lot of contrast from Fira Code, which basically meant tall and skinny. It doesnʼt have a lot of characters though, just Latin, Cyrillic, and ASCII symbols (no arrows unfortunately).

Amaranth

I spent a while trying to find a nice sans-serif font that had character to use for UI accents, like the info boxes I sprinkled into the Eudoxus real numbers post and the input boxes on the parsing posts. I really love Amaranth because it meets these goals: almost all characters have a little extra flair and curve to them, so it remains distinctive and legible. I just wish it was available as a variable font, itʼs a bit heavy for my liking. Of course, it doesnʼt help that Cormorant is so feather-light …

Pandoc

Pandoc is cool because itʼs written in Haskell and does what I need. It supports lots of nice Markdown features, seems to have a sane data model, and is pretty easily extensible. I knew that optimizing for SSR static content that doesnʼt require JS was one of my design goals, so thatʼs why itʼs great.

Widgets

I wanted Pandoc/Markdown content to be primary, but I also wanted to make interactive blog posts with embedded widgets written in PureScript.

:::: widget-group
::: {widget="Widget.Control" widget-datakey="main"}
:::
::: {.widget widget="Parser.Grammar" widget-datakey="default" widget-loading="true"}
:::
::::

CSS

I like Sass, most significantly for the color manipulation functions and also the syntax. Of course the nested selectors in Sass/SCSS is a huge convenience for DRY, plus I find the braceless syntax of Sass a little nicer to work with quickly, but syntax support in editors seems abysmal for some reason I donʼt understand. Maybe SCSS support is better just because the syntax definitions could be based on CSS and extended.

@use "sass:selector"

@mixin unify-parent($child)
  @at-root #{selector.unify(&, $child)}
    @content

.wrapper .field
  @include unify-parent("input")
    /* ... */

  @include unify-parent("select")
    /* ... */

KaTeX

LilyPond

I finally added LilyPond support!

I wrote a Pandoc plugin to take LilyPond source out of the markdown and render it to SVG. Then I style it a little bit. It is pretty simple!

In dark mode, the ruled staff was visually overwhelming, so I added {opacity: 0.75} to it.

Still need more output formats. And interactivity!!

I would like to make a nice editor for it. Perhaps based on Spontini (CodeMirror).