"Dropcap generation with AI".
"Drop cap" is short for "dropped capital" and means those large super fancy capital letters at the beginning of a section in a book.
"Initials or 'dropcaps' are fun typographic features used on Gwern.net, but there are few fonts suitable for Web use; creating new ones is difficult & expensive. However, AI image generators have revolutionized image generation, and shown promise in typography. How practical is it for a hobbyist to use generative models to create dropcap initial letters, and use them in a web page (like this one)? Can we achieve (1) high-quality dropcaps, (2) little total human labor, and (3) acceptable bandwidth use (~100kb)? After working through image & SVG-based workflows, we find that: yes, we mostly can. To expand our dropcaps selection, I & Said Achmiz experiment with use of Midjourneyv5/6 & DALL-E 3 in late 2023, and discover that, while somewhat tricky to prompt, they generate dropcap images we like. The challenge is using them -- web font-based dropcaps are already challenging to do, but image-based dropcaps are even harder, due to problems with removing backgrounds, positioning, multiple sizes, and light/dark-mode compatibility."
"While feasible, the hand-editing is laborious and took longer than generation! So we looked into vector generation instead, which would make it easier to automatically remove backgrounds & reposition them. While no 2023 vector generation AI does adequate dropcaps, and converting image to SVG often produces large/bad-looking SVGs, we find that with careful processing, we can make SVGs which look identical & generally are only ~2CHR(215) larger than hand-tailored PNGs, while still requiring a little manual repositioning. To make that repositioning easier, Said Achmiz developed Dropcap Workshop, a specialized web-GUI dropcap SVG editor."
"The SVG workflow is: generate an image in a NN, vectorize using the free Recraft.ai service, remove SVG background, reduce precision of numbers in SVG, minify SVG, adjust margins/positions in Dropcap Workshop, drop into a directory for automatic inclusion in website build, then web pages set a CSS variable."
