Typefaces and Typography

The first time I tried to create this design was over a decade ago, back when we had Web 2.0, when we were all struggling with semantic markup and strict XHTML and the web held so much promise. I wasn’t happy with the results then. Three important things had to happen for this design to work:

1. Browsers improved their text handling and made more advanced font features available through CSS.
2. We all started using higher resolution displays. Georgia isn’t the only serif that looks good on a screen anymore! Typefaces that only worked in print suddenly looked decent on our phones and laptops.
3. Type designers and foundries released high quality fonts with permissive licenses. I wasn’t interested in paying a recurring licensing fee.

These things happened! So now I can finally share a version of Diplograph that I’ve been thinking about since the time when blogs still mattered.

Typefaces

The main serif typeface, used in the site’s masthead, header elements, and body text, is EB Garamond. Garamond is a wonderful old-style typeface and has long been one of my favorites, and I was really happy to find this version! It’s elegant, beautiful, and thoughtful.

The roman face comes from matrices cut by Claude Garamont (c. 1495–1561).Not all typefaces called Garamond are the work of Garamont; many are based on the types of Jean Jannon (d. 1658) which is a story we should come back to some day. This does not mean the misnamed typefaces are necessarily bad! Jannon was a skilled typecutter and many revivals are very nice. But there’s a century between Garamont and Jannon, and they really aren’t the same at all. As with most modern Garamonds, the italics are based on type designed by Robert Granjon (1513–1589). Until the mid 16th century, romans and italics weren’t paired or thought of as just a style variant like they are now. They were separate typefaces, and entire books might be set in italic. So while Garamont did cut italics, they weren’t necessarily designed to match with his romans.

EB Garamond was developed by Georg Duffner using the Egenolff-Berner specimen, printed in 1592, hence “EB.” Octavio Pardo then added the bold faces (which weren’t really a thing until like the 19th century) and reworked the font to support variable weights.

In The Elements of Typographic Style, Robert Bringhurst writes:You would be forgiven if you looked at this site and thought, “she read The Elements of Typographic Style fifteen years ago and never moved on from that.” You would be forgiven because you would be right.

What is the character of my text? I have no idea. The content of this site is as much Animal Crossing screenshots as it is anxiety. So maybe EB Garamond is aspirational: it’s the stories I want to share, the art I want to make.

Diplograph’s body text is set in 22/30. On screens that are large enough (basically any device that isn’t a phone), the body is 540 px wide, chosen so that each line contains about 60–70 characters, a comfortable measure for reading. On the smallest screens, where the lines are shorter, the body text increases in size to 24/30.

The accent grotesque, used in the header and footer for navigation and metadata, is Karla, designed by Jonathan Pinhorn. To contrast EB Garamond and pull the blog away from looking like a 16th century book, I wanted something contemporary, chic, and maybe even a little feminine.

cat << EOF

Code is set in FiraCode [1], which is also what I use
in my editor most of the time. It has a lot of really
neat / weird ligatures and contextual alternatives
for programming, such as === for triple equals.

As the name suggests, FiraCode is based on Mozilla's
Fira [2] typefaces. The idea for the coding ligatures
comes from Ian Tuomi's Hasklig [3].

[1] (https://github.com/tonsky/FiraCode)
[2] (https://github.com/mozilla/Fira)
[3] (https://github.com/i-tu/Hasklig/)

EOF

There’s enough really cool stuff going on with the code formatting that it needs its own page. I want to write that one soon.

Subsetting and Compression

The full fonts would be too large to send to every visitor. EB Garamond Regular alone would be nearly 200 KB.

Each font is processed with pyftsubset, part of fontTools. For each font family, I’ve specified a range of codepoints to keep, an optional set of glyph names to drop, and the layout features I want. Wakamai Fondue helped me figure out what each font supported.

For example, for EB Garamond Regular, I’ve kept these codepoints:

And these layout features:

I also drop the c_t and s_t ligature glyphs.

After subsetting and compression, the font is a much more reasonable 56 KB. That’s still not free, but it’s smaller than a high quality photo, and I really like how nice the site looks with beautiful type.There are more than one thousand words on this page, so the math works out.

Typography

Ligatures

The usual set of ligatures, such as ff or ffl are enabled. Compare affably baffled vs affably baffled.

I’ve also enabled discretionary ligatures, for example Th, tt, ss, or fj. Compare: Throttled fjord Crossing vs Throttled fjord Crossing.

I’ve removed a few specific glyphs, such as the ct and st ligatures.These examples of removed features are being rendered with an second font file that still has support for those features. Most pages on the site won’t load this second font file. They’re beautiful but distracting; these glyphs are literally known by the technical term quaint. My process for removing them is pretty fragile, but here’s what I’m doing:

1. I take the font and export it as TTX XML.
2. I go through each file, removing elements that reference the glyph by the glyph, glyphName, value, or name attributes.
3. I also clean up some parent elements, for example a LigatureSet that no longer has any ligatures, or the modified PairValueRecord in the GPOS table.
4. I then convert the font back into a TTF for further processing.

These steps probably only work for the specific glyphs I’m dropping in the fonts I’m dropping them from. But now I get to turn on more ligatures, and that’s cool.

Figures

I use old-style proportional figures in prose; compare 5,678 vs 5,678.

Numbers with enough digits are letterspaced. Small numbers like 17 don’t get this extra space. Compare 2,048 and 555-1234 vs 2,048 and 555-1234.

Tables use tabular figures so numbers will line up with each other:

Punctuation

InkInk is what I call the software that generates this site. automatically turns any "straight quotation marks" into their “curly equivalents,” using an algorithm based on David Dunham’s Smart Quotes algorithm.

It skips over text it doesn’t think is prose (e.g., <code>). It will traverse sibling nodes, so it will correctly curl the marks around “emphasized text”.

“Opening punctuation hangs into the left margin in supported browsers, so the text remains aligned in each paragraph.” (Your browser may or may not support this.)

Inline Styles

Emphasized text and citations are italicized. Strong text is set in small caps instead of bold, which looks weirdly out of place to me.

Super^script uses the sups font feature. EB Garamond’s subs glyphs sit on the baseline, so I use the sinf scientific inferiors for sub_script instead, which sit below the baseline.

Headers

I’ve only styled three levels of headers for now, and by this point you’ve seen all of them. <h1> is used for the page title. On all but the smallest screens, first and second level headers hang into the left margin a bit, which makes it easier to scan for a header when scrolling through the page.

All of the headers are also anchor links that point to themselves, so you can copy the URL of a header to share a link directly to that section.

EB Garamond has the wonderfully whimsical capital Q as a swash alternative, but it’s a lot in body text, so it’s enabled only on headers. Compare Quickly Quoth vs Quickly Quoth.

Lists

1. List markers hang in the left margin, while the list text itself stays aligned with the main body text.
2. On the smallest screens where there isn’t any left margin, the list is indented to make room for the numbers.

• Likewise, the bullets for unordered lists also hang in the left margin.
• I would like to use @counter-style to implement lists one day, but at the moment it’s not widely supported.

Task Lists

• List items that start with [ ] are turned into task items.
  • Lists can be nested to represent subtasks.
• Ones that start with [x] are marked as completed.
• Items can be #tagged. Some of the tags are marked with a distinct color for easier scanning: #next #high #medium #low #bug #question
• For feed readers, a checkbox control is shown instead.

Block Quotes

That was probably written by someone very cool.

Asides

Ink supports sidenotes.They look like this. At larger layout sizes, on laptops or desktops, the sidenotes appear in the right margin. The text is set in 16/22, and there’s a bit of top padding so the baseline of the first line of the sidenote aligns with the body baseline. On smaller screens, the ordinal is tappable and shows the sidenote as an inline parenthetical in a subdued color.

Instead of using superscript, the inline numbers are actually EB Garamond’s ordinals. Ordinals may be intended for series, as in 1st, 2nd, 3rd, but I like how they aren’t raised quite as much. Compare superscript¹ vs ordinals1. The inline numbers are also slightly larger. Compare the standard size1 vs the slightly larger size.1

The style and implementation of sidenotes takes after the margin notes in Joel Dueck’s Try Pollen.And Matthew Butterick’s Pollen inspired some of Ink’s markup language and architecture.

Acronyms

Words and acronyms formed entirely of UPPERCASE LETTERS stick out from their surrounding text like shouting, and so Ink instead sets them in SMALL CAPS. A mix of numbers, letters, and some punctuation is also allowed: JPEG, 3DES, C-3PO, A-Z, A/B, 3 PM.

Some technical acronyms are set in small caps, with an initial full capital, when they are part of a mixed case name: MozJPEG, OptiPNG.

To be honest, I haven’t really found an exact set of rules I’m happy with, so Ink has a lot of exceptions to make this work.

A small amount of tracking has been added to any sequence of small caps, including acronyms, strong text, and headers. Compare: JPEG vs JPEG.

Math

Math is typeset with $\href{https://katex.org/}{\KaTeX}$. I don’t write math that often, but I think there must be a law that states as a blogging engine grows older, the probability of it adding support for $\TeX$ approaches 1. Or, because Ink follows this law, we can write it as:

The rendering is done during site generation; there’s no client-side JavaScript needed.

I’ve made a couple of tweaks to the default styles. $\KaTeX$ math is normally larger than the surrounding text, “which makes super- and subscripts easier to read,” per the docs. Diplograph’s base type size of 22 px is large enough that I think it’s okay without the size adjustment: $y_i = x^{2a}$.

The type is based on Computer Modern, developed by Donald Knuth in METAFONT. Knuth based his designs on Monotype Modern, a 19th century revival of 18th century neoclassical forms.

$\KaTeX$ isn’t a full $\TeX$ environment, and it’s not exactly perfect. I’ve had to add a hack for $P_{\TeX}$ to look right, but I really can’t blame anyone for not expecting someone ridiculous (me) would try to write P_{\TeX}. In my limited use so far it’s been great.

Japanese

I don’t write much Japanese here, and to be honest my comprehension is literally elementary. But there is occasionally some Japanese text on this site, and I’d like to write more.

Japanese font files contain tens of thousands of glyphs and are much larger than English fonts (a single weight of Source Hans Serif Japanese is over 15 MB). Subsetting gets complicated very quickly, and even a few hundred characters would be too much to expect every visitor to download.

So instead, Diplograph uses the types installed by default on various systems, pairing mincho types with serifs and gothics with sans-serifs. It prefers these types, in order from the most preferred:

To mitigate font fingerprinting, some browsers restrict the types available to webpages to those provided by the website or installed on the platform by default. Additional user-installed typefaces in the list may be ignored.

Because I can’t rely on any particular metrics, and because browser support for controlling features like furigana is awfully inconsistent, I’m largely relying on default styling. Thus, many of the specific details of rendering depend on your platform, browser, and installed typefaces.

Even so, I’ve tried to make some refinements. Japanese characters are a couple points smaller than the surrounding text. Compare the unadjusted text 「準備はいいかね？」 with the adjusted 「準備はいいかね？」アイアイキャプテン！

On larger screens, each line is about 30–35 characters, a comfortable measure for reading. On phones, each line is around 20 characters.

Rather than use italic characters, which aren’t really a thing, citations use nijuu kagikakko: 吾輩は猫である. Emphasized text is marked with bouten: 鶏肉は取りにくい.

Furigana annotations use the ruby glyph variants, optimized for display at small sizes. Compare the standard glyphs 京都きょうと with the ruby ones 京都きょうと.

Mixed language text uses yakumono hankaku palt proportional alternate widths for punctuation. However, in full paragraphs of Japanese, full-width characters are used instead. Compare the spacing around the punctuation in 「と、と、ろ……？トトロ！あなた、トトロって言うのね。」 with

「と、と、ろ……？トトロ！あなた、トトロって言うのね。」

Not all of the types listed above support all of these features.

I’ve gone back and forth whether romaji words should be marked in some way, perhaps with italics. But I don’t want to mark Japanese words as other, to split being Nikkei into an American side and a Japanese side, so I’m leaning towards not using any sort of typographic treatment for now.

Selected Sources

1. Robert Bringhurst. The Elements of Typographic Style. 2004.

Typefaces

1. Rasmus Andersson and contributors. “Inter”. Retrieved 7 March 2020.
2. Georg Duffner, Octavio Pardo, and contributors. “EB Garamond”. 22 April 2019. Retrieved 7 March 2020.

   I couldn’t figure out which page to link here. Duffner’s site about EB Garamond and the corresponding GitHub project are for an older version of the font, and Pardo’s GitHub project lacks the variable fonts unless you build them yourself. So, the link above is to EB Garamond’s Google Fonts page.

3. Jonathan Pinhorn and contributors. “Karla”. 5 March 2019. Retrieved 18 December 2020.
4. Nikita Prokopov and contributors. “Fira Code”. Retrieved 7 March 2020.

Software

1. Emily Eisenberg, Sophie Alpert, and contributors. “KaTeX”. Retrieved 7 March 2020.

   $\LaTeX$-like math typesetting for browsers.

2. Roel Nieskens. “Wakamai Fondue”. Retrieved 7 March 2020.

   Tool to examine which layout features and glyphs are supported by a font file.

3. Just van Rossum and contributors. “Fonttools”. Retrieved 7 March 2020.

   Python library and command line tools for manipulating font files, including pyftsubset for creating fonts with only specific layout features and glyphs.

Additional Sources

1. Harry Carter. A View of Early Typography: up to About 1600. 1969. 2002.
2. Jost Hochuli. Detail in Typography. Translated by Charles Whitehouse, 2008.