Web Applications2024–2025 · 3 months

Kanso Editorial Engine

Distraction-free publishing platform powered by variable typography.

Role

Product Designer & Frontend Engineer

Client / Team

Kanso Media

Timeline

3 months

Links

Live Code

Kanso publication article view with large variable serif typography and clean margins

Average Reading Time

+42%

Reader retention on long-form technical essays

Largest Contentful Paint

0.7s

Measured on simulated 4G mobile devices

Cumulative Layout Shift

0.00

Zero font flash or shifts during variable font load

The Challenge

Problem & Constraints

Modern editorial sites are bogged down with popups, shifting ads, poor typographic measure, and illegible font sizes on small mobile screens.

The Solution

Architectural Approach

Engineered an essay platform capped at 62 characters per line, utilizing Bricolage Grotesque variable axes to maintain optimal contrast across mobile and 4K displays.

Engineering Stack

System Architecture

Technologies & Tools

Next.jsReact 19Tailwind CSSTypeScriptBricolage Grotesque

Key Architectural Decisions

Enforced 62ch max reading width with balanced text-wrap for comfortable eye tracking.
Embedded self-hosted font subsets to eliminate third-party font network round-trips.
Used CSS scroll-driven animations for minimal reading progress indicators.

Typographic Rigor

62ch line lengths and fluid optical sizing

Line measure was constrained strictly between 50 and 65 characters. As screen widths expand, the optical size axis adjusts subtly to retain legibility without line-length bloat.

Headings utilize text-wrap: balance, while body paragraphs use text-wrap: pretty to prevent orphan words.

Outcomes

Deliverables & Assets

Variable Font Mechanics

Dynamic optical size tuning adjusting font contrast and stem width based on viewport size.

Progressive Markdown Parser

Syntax-highlighted code blocks with copy confirmations and accessible line numbering.

Adaptive Theme Engine

High-contrast reading themes (Paper, Sepia, Charcoal, Deep Blue) with local preference persistence.

Previous Project

Pulse Analytics Platform

High-throughput real-time telemetry with sub-second insights.

Next Project

Aurora Minimal Storefront

Headless e-commerce with instantaneous page transitions.

Coffee cup with brewing steam and rotating progress indicator

Loading content...

Fetching assets and initializing layout.

Back to all projects