Skip to main content

‘dropcaps (typography)’ directory

⁠“Dropcap Generation With AI ”⁠, ⁠Gwern⁠2023 (, , , ; ⁠backlinks⁠, ⁠similar⁠, ⁠bibliography⁠):

A dropcap initial capital letter ‘C’, of an enigmatic-looking longhair monochrome Art Deco cat, by Gwern Branwen & Midjourney v5.

We de­velop AI image gen­er­a­tion work­flows for web­page drop­cap ty­pog­ra­phy, cre­at­ing PNGs & SVGs using image gen­er­a­tors. As demos, we cre­ate new Gwern.net logos and sev­eral cus­tom FLOSS drop­cap sets, in­clud­ing fe­lines, Gene Wolfe hor­ror fic­tion, and neural-net-inspired drop­caps.

Ini­tials or ‘drop­caps’ are fun ty­po­graphic fea­tures ⁠used on Gwern.net⁠, but there are few fonts suit­able for Web use; cre­at­ing new ones is dif­fi­cult & ex­pen­sive. How­ever, AI image gen­er­a­tors have rev­o­lu­tion­ized image gen­er­a­tion, and shown promise in ty­pog­ra­phy.

How prac­ti­cal is it for a hob­by­ist to use gen­er­a­tive mod­els to cre­ate drop­cap let­ters⁠, and use them in a web page (like this one)? Can we achieve (1) high-quality drop­caps, (2) lit­tle total human labor, and (3) ac­cept­able band­width use (~100kb)? After work­ing through ⁠image⁠ & ⁠SVG-based⁠ work­flows, we find that: yes, we mostly can.

To ex­pand our drop­caps se­lec­tion, I & Said Achmiz ex­per­i­ment with use of ⁠Mid­jour­neyv5/6 & DALL·E 3⁠ in late 2023, and dis­cover that, while some­what ⁠tricky to prompt⁠, they gen­er­ate drop­cap im­ages we like. The chal­lenge is using them—web font-based drop­caps are al­ready ⁠chal­leng­ing to do⁠, but image-based drop­caps are even harder, ⁠due to prob­lems⁠ with re­mov­ing back­grounds, po­si­tion­ing, mul­ti­ple sizes, and light/dark-mode com­pat­i­bil­ity.

We first demon­strate image drop­caps by cre­at­ing a cat-themed drop­caps set which we call drop­cat⁠: we gen­er­ate & cu­rate the most dropcap-esque ones; we hand-edit them into repo­si­tioned & background-free im­ages, and dis­play them with our cus­tom CSS/JS drop­cap im­ple­men­ta­tion. The im­ages are small enough (~32kb, range: 8–140kb) to use freely. We also made ⁠holiday-themed⁠ Gwern.net logos (⁠Christ­mas⁠ & Hal­loween⁠). And be­cause we can gen­er­ate so many drop­caps, we gen­er­ate many for each let­ter and pick ran­domly per-page-load.

How­ever, while fea­si­ble, the hand-editing is la­bo­ri­ous and took longer than gen­er­a­tion! So we looked into vec­tor gen­er­a­tion in­stead, which would make it eas­ier to au­to­mat­i­cally re­move back­grounds & repo­si­tion them. While no 2023 vec­tor gen­er­a­tion AI does ad­e­quate drop­caps, and con­vert­ing image → SVG often pro­duces large/bad-looking SVGs, we find that with care­ful pro­cess­ing, we can make SVGs which look iden­ti­cal & gen­er­ally are only ~2× larger than hand-tailored PNGs, while still re­quir­ing a lit­tle man­ual repo­si­tion­ing. To make that repo­si­tion­ing eas­ier, Said Achmiz de­vel­oped ⁠Drop­cap Work­shop⁠, a spe­cial­ized web-GUI drop­cap SVG ed­i­tor.

The SVG work­flow is: gen­er­ate an image in a NN → vec­tor­ize using the free Re­craft.ai ser­vice → re­move SVG back­ground → re­duce pre­ci­sion of num­bers in SVG → minify SVG → ad­just mar­gins/po­si­tions in Drop­cap Work­shop → drop into a di­rec­tory for au­to­matic in­clu­sion in web­site build → web pages set a CSS vari­able.

We demon­strate this with sets of Gene-Wolfe/hor­ror/vampire-themed⁠ drop­caps and ⁠AI/neural-net/steam­punk drop­caps⁠ (in progress).

We re­lease all our drop­cap im­ages⁠, ⁠code/scripts⁠, & ed­i­tor under FLOSS⁠ li­censes, and hope that this will de­moc­ra­tize drop­caps for every­one.

Back­links:⁠

Sim­i­lar Links:⁠

Bib­li­og­ra­phy:⁠

See Also

Gwern

“Lorem Ipsum: Dropcaps ”, Gwern 2020

Miscellaneous