TypeStax; Featured Free Font: Ioskeley Mono; WOFF: A Short History
It’s been a minute since we had a typography Drop so we’ll pretend it’s Tuesday and look at some some new tools and typefaces in today’s Bonus Drop.
TypeStax
Getting a type scale “right” is mostly a typography term of art that means something close to: “every element feels proportionate to every other element, nothing jars, and the whole system breathes like something a careful designer touched”. The problem is that “careful designer” has historically meant someone who spent years internalizing rules about x-height ratios and optical size and tracking at display sizes that most folks only know about from blog posts. TypeStax (GH) is a browser-based type scale designer that tries to bake that expertise into the tool itself, and it does a pretty darned spiffy job.
When you bring up the site you set a base font size (in px) and a scale ratio – a multiplier – and the app computes sizes for twelve elements, from display-1 all the way down to eyebrow and small. The math in src/lib/scale.ts is baseFontSize * scaleRatio^position, where positions run from 9 (display-1) down through 0 (paragraph) and -1 (small). Eight preset ratios ship out of the box, ranging from 1.067 (minor second) to 1.618 (golden ratio, which gives us a pretty “dramatic” hierarchy). You can also enter a custom value, and there’s a separate mobile scale – its own base size and ratio, applied under a configurable width breakpoint – so the same configuration handles responsive typography end-to-end.
Rather than leaving line height and letter spacing as manual inputs you have to eyeball, the auto-balance engine reads actual font metrics – x-height and cap height – from a bundled table and adjusts those values automatically. Large text gets tighter line height and negative tracking. Small text gets looser line height and positive tracking. Word spacing follows. It also nudges weights for dark mode. This runs live while you edit, touching only elements you haven’t already overridden manually.
The preview is thorough and gorgeous. Within, what I’d describe as an old-school audio mix-panel motif, we have a mock browser window, four viewport sizes (full, laptop at 1440px, tablet at 768px, mobile at 375px), and actual Google Font (ugh) loading so you see real rendering rather than substituted fallbacks. There are website and blog layout templates if you want to see how the scale behaves in context rather than just stacked in isolation. When you’re done, seven export targets cover the majority of use cases – CSS custom properties with a mobile media query, Tailwind v4 @theme tokens, a Tailwind v3 config object, Figma variables JSON for Tokens Studio, and a direct Figma API push that writes variables to a file. There’s also a custom “Pen” export format documented in docs/superpowers/specs/2026-03-15-pen-export-design.md that I haven’t dug into yet.
Stacks – the social layer – lets you save configurations, publish them to a community gallery, and browse or like what others have shared. Thirty-nine curated presets ship with the app, each a font pairing (things like Playfair Display + Lato, Space Mono + Plus Jakarta Sans) with matching color settings. A neat feature of the site is that identity is a device UUID generated once in src/lib/device-id.ts and sent as an x-device-id header. Clerk (yet-another-startup-y-auth-aas-thing) is installed but unused for this layer. Configuration sharing also works via URL: the full state compresses into a ?c= query parameter using lz-string, so you can send an exact working configuration to someone without them needing an account or even a saved stack, just like this one for the section header.
Under the hood it’s Next.js 16 with React 19, Zustand for state, and Turso (remote SQLite) for the stacks database.
(WARNING: “AI” ahead) — The README is untouched create-next-app boilerplate, but the actual documentation lives in a set of implementation plan docs under docs/ addressed “For Claude”. Yep, the whole thing was built by an agent working from numbered task lists. As briefly already noted, the visual identity is deliberately skeuomorphic: dark, vintage hi-fi hardware aesthetic, amber LED displays, rotary dials, knurled grips.
Spent a solid chunk of time with it and came away impressed by the auto-balance quality more than anything else. Having a tool that handles scale ratios from real metrics is welcome when 1/3 of new sites I see use the same startup purple/blue/beige and font stacks from one of the worst sets of training data possible (judging solely by the results).
If you can stomach that it’s made with an agent, I suggest bookmarking it and using it when you lovingly human-craft your next web creation.
Featured Free Font: Ioskeley Mono
We’ve covered Berkeley Mono in the Drop, but the TL;DR for it is that it’s a gorgeous and well-crafted monospace font. It’s also a commercial font (folks gotta eat!), which may make it unusable by most Drop readers, especially in these dark times.
Ioskeley Mono (GH) is a free font based on Iosevka (which we have also previously covered), that was created by reverse-engineering Berkeley Mono’s look — matching its weight axis, its distinctive glyph choices (single-storey g, flat-arc parens, two-circle 8, dotted 0), and its compact metrics. It bundles all the changes inside Iosevka’s existing free toolchain to give you a pretty convincing clone of its commercial cousin.
The main site’s download takes you to the GitHub releases page and the section header is this editing session in the condensed version of the font.
To see what all the fuss is about Berkeley Mono, take a look at the Drop we covered it in.
WOFF: A Short History
W3C started work on fonts for the web in the 1990s. The Fonts Working Group released a first public draft in 1997, and that draft gave a method to link to a font with the @font-face rule. With that directive, a web page could then use a font without an installation on your device. But the draft did not select one font format (and, itt also did not solve the myriad of license problems)
The CSS Working Group added @font-face to CSS2 in 1998, but web designers did not use web fonts for more than ten years. The industry just could not agree about encryption, domain restrictions, and digital rights management. In July 2009, Jonathan Kew of Mozilla proposed the ZOT format, which used Zlib compression and no encryption. In the same month, Tal Leming and Erik van Blokland proposed the .webfont format, which gave links to the license and to the font supplier. In August 2009, the two groups made one format from the two proposals, and the name later became WOFF.
W3C chartered a new working group in March 2010, and Vladimir Levantovsky was the chairman. The group kept WOFF free of digital rights management, and it published the first public draft in July of 2010. The browsers made the format operational, and the use of web fonts increased quickly from 2011. In March 2012, Raph Levien proposed a method with two stages to make the font files smaller. The group selected MicroType Express and Brotli for these stages, and both technologies have a royalty-free license. The first draft of WOFF 2.0 came in May 2014, and it decreased the file size by as much as 40 percent.
The 2025 HTTP Archive report shows that approximately 88 percent of websites use web fonts. WOFF 2 has approximately 65 percent of all font file requests, and it became a W3C Recommendation in August 2024. TV and broadcast standards also use the WOFF formats. The same working group now develops a technique dubbed Incremental Font Transfer, which sends only the necessary parts of a font file. This fancy new tech helps relieve the bandwidth burden from the languages that have many thousands of characters, for example Chinese, Japanese, and Korean.
You can (and should!) read the full history at https://www.w3.org/blog/2026/woff-1-0-a-milestone-on-w3cs-journey-of-fonts-on-the-web/.
FIN
Remember, you can follow and interact with the full text of The Daily Drop’s free posts on:
- 🐘 Mastodon via
@dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev - 🦋 Bluesky via
https://bsky.app/profile/dailydrop.hrbrmstr.dev.web.brid.gy
☮️
Leave a Reply