Plutonic Rainbows

Today I've updated the blog's typography system, migrating from a dual-font approach to Google Fonts Commissioner. This change brings a more unified visual identity while maintaining the readability improvements from the recent typography scaling updates.

Commissioner is a low-contrast humanist sans-serif with almost classical proportions, designed as a variable font. What makes it particularly appealing is its versatility — the variable weight axis allows smooth transitions from 100 to 900, though I'm using a focused range of 400-700 for optimal web performance. The humanist design provides excellent readability for extended reading sessions, while the variable weights give precise control over text hierarchy.

The previous system used Work Sans for body text and Montserrat for headings, which worked well but required loading two separate font families. By consolidating to Commissioner, I've reduced the number of font files while gaining more flexibility through the variable font technology. Body text renders at weight 400, while headings use weight 600, creating clear visual distinction without the need for separate typefaces.

Importantly, this update preserves all the responsive typography improvements implemented yesterday. The fluid clamp() scaling continues to ensure that headings guide rather than dominate, with smooth size transitions across all viewport widths. Commissioner's character fits naturally into these proportions, maintaining the balanced visual hierarchy that makes the content comfortable to read on any device.

From a technical perspective, the implementation uses Google Fonts' CSS API with automatic font-display: swap for optimal loading performance. The variable font format means a single WOFF2 file can handle all weight variations, reducing total download size compared to loading multiple static font files. This efficiency gain becomes more significant as the blog continues to grow.

Second and final phase of the 2025 improvements is now done.

I worked through the 18 improvements identified in my blog’s health check report, turning it into a more efficient and reliable static site generator. This included performance enhancements such as chunked file reading with 8KB chunks to prevent memory issues, concurrent processing with a ThreadPoolExecutor using 4 workers, and a markdown caching system that stores 604 posts for faster rebuilds. I also reduced storage needs by converting images to WebP and using batch processing, bringing the size down from 8.5MB to 2.14MB. Other updates included retry logic and connection pooling for network stability, progress bars for user feedback, and additional logging options with verbose and debug modes.

These changes brought the build times down by 41%, from 11.53 seconds to 6.82 seconds, while keeping everything compatible with existing workflows. I also improved the codebase by adding type hints, removing duplicate code, and creating utility scripts for image handling and progress tracking. The deployment system now has retry mechanisms for temporary failures and more efficient CloudFront configurations with specific path invalidations.

Overall, the updates make the blog faster, more efficient, and easier to maintain, while keeping the original functionality intact. Each change was implemented with the goal of making the system more dependable and user-friendly for long-term use.

I thought I would experiment with a Whitney variant for the body text to see how the overall layout performs in practice. I’ve been using the same typeface for several years now, and while it has served me well, I’m curious whether switching to something closer to Whitney might improve readability in a noticeable way. Typography plays such a critical role in user experience, and even subtle changes can influence how comfortably text is read over longer sessions.

To properly evaluate this, I plan to test not only the aesthetic feel of the new font but also its technical performance. Specifically, I need to compare the latency and rendering speed of two fonts across different environments. This will help determine whether the change is purely cosmetic or if it has a measurable impact on responsiveness and user interaction. Ultimately, the goal is to find the right balance between visual clarity, reading comfort, and performance efficiency.

I refined the blog's typography after realizing the headings were too large and overwhelming the content. By implementing fluid CSS scaling with clamp() functions, I was able to create a more balanced visual hierarchy where headings guide rather than dominate the reading experience. The changes also improved mobile readability by increasing the minimum font size and eliminated the jarring jumps that occurred at the old 600px breakpoint. While these are relatively small adjustments, they should make the blog more comfortable to read across all devices and create a more professional, proportioned layout that better serves the content.