Dropcat

Our dropcat font covers 6 catipal letter-types (B/C/G/I/Q/T), in both dark & light mode, 74 total; per-letter breakdown of count:

• Dark:

  1. B: 4

  2. C: 3

  3. G: 7

  4. I: 1

  5. Q: 13

  6. T: 4

  7. total dark dropcats: 32

• Light:

  1. B: 7

  2. C: 5

  3. G: 10

  4. I: 1

  5. Q: 12

  6. T: 7

  7. total light dropcats: 42

• Pages using dropcats: this page · “Cat Psychology & Domestication: Are We Good Owners?” · “Why Cats Knock Stuff Over” · “Fuzz Testing” (by cats) · cats & human earwax · “Catnip immunity and alternatives” · worldwide catnip surveys · optimal catnip testing · catnip breeding

/lorem-dropcap

rubri-cat-ed dropcats

can’t generate ‘i’ at all!

rated so many images MJ gave me a free GPU-hour

selection ratios: Said picked 1:8, I picked 1:4 (after experimenting was done), so these represent 1:32 - rendered harder in part by the fact that many looked great but either the letter was fundamentally wrong, or it just wouldn’t work when scaled down & actually used for reading.

https://www.reddit.com/r/OpenAI/comments/17kokun/in_the_spirit_of_halloween_i_created_a_font/ https://twitter.com/mbateman/status/1723012963513053678

N = lines drop-cap must span H = visual height of n lines (top of x-height to bottom of x-height) Y = total height of image (bounding box) such that letterform is H tall, allowing for ornaments/etc.

Create master image file:

1. Convert to grayscale

2. Adjust levels such that background is white / black respectively

3. Scale image such that letterform is 4H tall

4. Adjust canvas height to 4Y

5. Adjust canvas width such that ~40 px remain on either side of glyph

Create scaled assets:

6a. Scale master image to 25% (total height = Y) and save as -small-1x 6b. Scale master image to 50% (total height = 2Y) and save as -small-2x #. Make scaled images transparent (convert to 8-bit color, fill background with magenta, set magenta to transparent color)

Example values for dropcats:

N = 5 lines H = 144 px (7.2em @ 20px base font size) Y = 188 px (9.4em @ 20px base font size)

edits: crop to size, edit out occasional smudges on the bottom-right especially (presumably abortive attempts at watermarks/logos).

https://thefloatinglibrary.com/2008/09/02/dreamtigers/ In my childhood I was a fervent worshiper of the tiger: not the jaguar, the spotted “tiger” of the Amazonian tangles and the isles of vegetation that float down the Paraná, but that striped, Asiatic, royal tiger, that can only be faced by a man of war, on a castle atop an elephant. I used to linger endlessly before one of the cages at the zoo; I judged vast encyclopedias and books of natural history by the splendor of their tigers. (I still remember those illustrations: I who cannot rightly recall the brow or the smile of a woman.) Childhood passed away, and the tigers and my passion for them grew old, but still they are in my dreams. At that submerged or chaotic level they keep prevailing. And so, as I sleep, some dream beguiles me, and suddenly I know I am dreaming. Then I think: this is a dream, a pure diversion of my will; and now that I have unlimited power, I am going to cause a tiger.

Oh, incompetence! Never can my dreams engender the wild beast I long for. The tiger indeed appears, but stuffed or flimsy, or with impure variations of shape, or of an implausible size, or all too fleeting, or with a touch of the dog or the bird.

Yes, ControlNet is the next thing to try, it’s just not nearly as easy to set up AFAIK. (Apparently you need to install AUTOMATIC1111…? Definitely something I had been hoping to avoid just for the sake of quickly testing out whether it’ll make good typography.)

I’ve now tried out Midjourney v5, Firefly-2, SD-1, SD-XL, DALL·E-2, DALL·E-3* by proxy, and they all have bizarrely weak understanding of letters. (My working theory is that, while several of them are silent about their internals, they all rely on, and suffer from, BPE tokenization.) For example, in your sample, DALL·E-3 looks a lot like MJ 5: it is indeed fancy, but as you can see, it still doesn’t understand ‘T’ accurately because it’s trying to slide into ‘I’/‘J’/‘E’/‘F’ territory - #1/2 are unusable, #4 is borderline unusable, and #3 is saved only by the fact that its weird curve/squiggly gets put on the top left so probably no one would be confused by it and left wondering if it’s supposed be ‘F’ or what. So, similar to MJ 5 in that you’d have to throw out a lot of samples to get a few workable ones.

Overall, the DALL·E 3 text samples I’ve seen seem higher-quality but less interesting than what I’ve been getting out of MJ 5, so I haven’t looked too hard into how to get full DALL·E 3 access.

* Imagen & Parti solve this by simple scale. DALL·E 3 presumably also is large enough to enjoy accurate text, but also presumably carries over all the liabilities of BPEs from DALL·E 2’s use of BPEs, either through using the unCLIP trick or possibly the self-captioning trick backfiring.

Economics:

A few hundred dollars in commissioned art

Survey: Asterisk (asteriskmag.com), Works In Progress (worksinprogress.co), Palladium (www.palladiummag.com), Stripe Press (press.stripe.com), LW2 (lesswrong.com), The Latercomer (latecomermag.com)

Drop Cap Implementation

Web drop caps posed several challenges to our implementation of 5 drop cap fonts in March 2019:

1. browser positioning: cross-browser support is nominally good but browsers differ subtly in spacing details, which means that a drop cap which looks good in Google Chrome will look bad in Mozilla Firefox & vice-versa.

   We solve this with (a lot of) hard work & CSS.

2. font size: drop cap fonts are often quite large, and waste bandwidth & time while being both purely decorative & highly user-visible; and

   We solve this by subsetting: splitting drop cap fonts into one font file per letter, so instead of downloading a megabyte font file with all the drop caps, the browser only downloads 4–20kb and it’s much faster.

   Usually only 1 drop cap is used on a page, but a typical drop cap font will slowly download as much as a megabyte in order to render 1 single letter. CSS font loads avoid downloading font files which are entirely unused, but they must download the entire font file if anything in it is used, so it doesn’t matter that only one letter gets used. To avoid this, we split each drop cap font up into a single font file per letter and use CSS to load all the font files; since only 1 font file is used at all, only 1 gets downloaded, and it will be ~4kb rather than 168kb. This has been done for all the drop cap fonts used, and the necessary CSS can be seen in fonts.css.

3. no dark mode: drop caps do not usually come with dark-mode in mind.

   We focus on monochrome drop caps which will look good when inverted in dark-mode, and so don’t really need a separate dark-mode. (This would not work so well for more illustrated or ‘historiated’ initials, which is why the dropcat had to come with separate light & dark mode sets.)

Drop caps are set in the Markdown page metadata, parsed by Hakyll to substitute into the final HTML as a <body> class, which applies page-wide to ‘the first letter of the first paragraph after an .abstract’ (which allows sub-essays like appendices to get drop caps of their own as long as they have a written abstract). Drop caps can be forcibly set on specific paragraphs as well using a <div> wrapper, which is useful for testing; see the Lorem Drop caps page to browse all the drop caps in action.

Cheshire

It appears to have been created by “House of Lime” (Merethe Liljedahl?) in the early 2000s.

Cheshire is used on ‘literary’ pages, like my Batman short story or my “Solving ‘Suzanne Delage’” close-reading analysis (2023-11-05: 42 uses).

Goudy Initialen

The original initials were designed by Frederic Goudy for the 1913 Cloister font, and have been digitized or revived or modified several times (it’s even available colorized). Goudy Initialen appears to be another Dieter Steffmann digitization.

Goudy is used with more contemporary literary (eg. _Vectors 3.0) or (if they are not too technical) biological pages (the invention of breeding); whether a page gets Cheshire or Goudy right now mostly depends on how overused I feel Goudy has become, and more drop caps would be useful to make more principled distinctions here (2023-11-05: 59 uses).

Blackletter

Deutsche Zierschrift

It appears to be an early 2000s digitization by Dieter Steffmann of a 1921 Rudolf Koch original.

Deutsche Zierschrift is the ‘default’ drop cap (2023-11-05: 180 uses), and is used on pages which don’t clearly fit into one of the more specific drop caps; aside from newsletters (eg. May 2021), it covers topics like economics (“Ordinary Life Improvements”), psychology (impossibility of retrocognitive knowledge), or Wikipedia.

Yinit

yinit was developed for T_eX use by Yannis Haralambous in 1990 based on historical models, and we’ve borrowed it for web use.

yinit, befitting its elegant but severe look, is reserved for the most technical/statistical articles, like my dog cloning analysis or “The Kelly Coin-Flip Game” page (2023-11-05: 99 uses).

Kanzlei

Kanzlei is used on pages which are not so technical as to merit a yinit drop cap, for example, discussion of subscript typography or surprisingly Turing-complete technologies (2023-11-05: 99 uses).

New Drop Caps

As of 2023-11-05, the 5 primary dropcaps are enabled on ~481 Gwern.net pages, as follows:

1. 180: Deutsche Zierschrift

2. 99: yinit

3. 99: Kanzlei

4. 59: Goudy Initialen

5. 42: Cheshire

As the breakdown suggests, there are some balance issues: Cheshire is not used half as much as 3 of them, while Deutsche Zierschrift is overused at almost half the pages.² Reallocating would struggle to balance them without diluting the meaning, and we felt that the original quintet had gotten a bit boring while most reader reaction was positive—so why not add more?

We have not yet added any more ‘traditional’ dropcaps fonts, but our first pass through Said Achmiz’s font library turned up relatively few candidates: while there may seem to be hundreds, most dropcap fonts are generally either too eccentrically-specific, half-finished, or just low-quality. In many cases, we held onto a candidate which is not a dropcap at all but simply is a display font with rather fancy capitals. Our first-pass candidates:

• Blackletter (Kanzlei/yinit) alternatives, allowing a refinement (perhaps moving some pages from Deutsch Zierschrift to ‘below’ Kanzlei):

  1. Andrade Font, George Williams

  2. Neue Zier Schrift, Peter Wiegel

  3. Paulus Franck Initialen, Typographer Mediengestaltung

  4. Art Nouveau Initialen

  5. Monarchia (based on Frühling by Rudolf Koch?)

  6. DrPoDecoRu

  7. Unger-Fraktur Zierbuchstaben, Typographer Mediengestaltung

  8. Dearest, West Wind Fonts

  9. CAT Altgotisch, Peter Wiegel

  10. Durer Gothic (background)

• A new category of ‘design’-related pages (eg. the Lorem pages, Sidenotes, rubrication):

  1. Typographer Capitals (the similar Old Constructed Caps dropcap font is cool, but the sketches are too rough to fit into Gwern.net’s overall ‘polished’ theme)

  2. P22 Durer Caps: https://www.dropbox.com/sh/qdeh2dawb5gfhap/AAAHK3pdyufkW3xpRpHiwOa6a?dl=0&preview=Screen+Shot+2020-12-09+at+6.30.09+PM.png

• Art/literature (Cheshire):

  1. P22 Kilkenny Swash Caps: https://www.dropbox.com/sh/qdeh2dawb5gfhap/AAAHK3pdyufkW3xpRpHiwOa6a?dl=0&preview=Screen+Shot+2020-12-09+at+6.30.11+PM.png

• General non-technical (to augment the de-zs with more Art Deco/italic/calligraphic rather than blackletters):

  1. https://www.1001fonts.com/neugotische-initialen-font.html#waterfall

  2. Bodoni Classic Deco Caps https://fontsgeek.com/fonts/Bodoni-Classic-Deco-Caps-Medium https://www.dropbox.com/sh/18p88tkiqyfqoek/AAABou9VWB-MQVHiBW-SZc9ja?dl=0&preview=Screen+Shot+2020-12-09+at+3.21.30+PM.png

  3. Art Deco MN: https://www.dropbox.com/sh/18p88tkiqyfqoek/AAABou9VWB-MQVHiBW-SZc9ja?dl=0&preview=Screen+Shot+2020-12-09+at+3.21.26+PM.png

  4. Caslon Calligraphic Initials https://www.1001fonts.com/caslon-font.html

  5. https://www.1001fonts.com/thannhaeuser-zier-font.html

  6. West Nouveau Didot: https://www.dropbox.com/sh/w8yyd5gp6m3n9y4/AAAns7bO-6569pFQTLdX8br9a?dl=0&preview=Screen+Shot+2020-12-09+at+3.38.34+PM.png

  7. Ampir Deco: https://www.dropbox.com/sh/18p88tkiqyfqoek/AAABou9VWB-MQVHiBW-SZc9ja?dl=0&preview=Screen+Shot+2020-12-09+at+3.21.22+PM.png

  8. Ambassador Script Alt Caps: https://www.dropbox.com/sh/qdeh2dawb5gfhap/AAAHK3pdyufkW3xpRpHiwOa6a?dl=0&preview=Screen+Shot+2020-12-09+at+6.30.21+PM.png

  9. Sail: https://fonts.google.com/specimen/Sail?category=Display&preview.text=ABCDEFGHIJKLMNOPQRSUVWXYZ&preview.text_type=custom&sort=alpha&subset=latin&preview.size=47

  10. Cinzel Decorative (Black or Bold): https://fonts.google.com/specimen/Cinzel+Decorative?category=Display&preview.text=ABCDEFGHIJKLMNOPQRSUVWXYZ&preview.text_type=custom https://www.dropbox.com/sh/18p88tkiqyfqoek/AAABou9VWB-MQVHiBW-SZc9ja?dl=0&preview=Screen+Shot+2020-12-09+at+3.21.33+PM.png

  11. Elsie Swash Caps: https://fonts.google.com/specimen/Elsie+Swash+Caps?category=Display&query=swash&preview.text=ABCDEFGHIJKLMNOPQRSTUVWYZ&preview.text_type=custom

  12. of the bold italic swashes with some merit as a roman counterpart to all the blackletter initials right now: Adobe Caslon Pro, Arno Pro Caption, Garamond Premier Pro Subhead, Kepler, Playfair Display, Triplicate, Zapfino

Further Reading

Similar Links