zine.js

Bringing Print-Grade Typography to the Web.

Generous leading, rhythmic baselines, and serene editorial margins. A lightweight, zero-dependency typesetting engine that brings desktop publishing quality to HTML.

Read 16P Zine Demo auto_stories Download zine.js (v1.1.0) arrow_downward Features south
Inspector HUD: Press G for grid, M for margins, H for HUD panel
Motivation

When words have room to breathe,
reading becomes a pleasure.

When reading long-form text on a screen, tight line-heights and uneven margins often cause visual fatigue without us realizing it.

In books and thoughtfully printed magazines, font sizes, line spacing (leading), and surrounding margins are aligned to a consistent, comfortable rhythm.

zine.js was created to bring these timeless principles of bookmaking and independent publishing (Zines) to everyday web pages. With a few declarative attributes, it shapes an inviting, peaceful reading environment.

Features

Eight Core Algorithms of zine.js

Bringing the discipline, proportion, and quietude of physical print to the web.

01 / Rhythmic Grid

Baseline Grid Snap

Snaps font sizes, line heights, and margins to an 8px modular baseline, keeping multi-column layouts needle-aligned.

8px Grid • Baseline Snap
02 / Optical Balance

Optical Kerning

Hangs punctuation beyond the text block to maintain clean vertical margins, and balances proportions of mixed scripts.

Hanging Punctuation • Mixed Scripts
03 / Precision Drop Cap

Drop Caps

Crafts initial drop caps fitted precisely to 2–3 lines of text with zero vertical bleed across Latin and CJK scripts.

Drop Caps • Line Precision
04 / Margin Notes

Tufte Sidenotes

Places annotations alongside their exact referenced line in the right margin, automatically dodging vertical collisions.

Sidenotes • Collision Avoidance
05 / Tateyoko Hybrid

Hybrid Flow

Seamlessly blends vertical CJK headings with horizontal running body text, complete with automatic Tatechuyoko numbers.

Vertical Flow • Tatechuyoko
06 / Editorial Cut-in

Pull Quotes

Typesets magazine-style quote callouts framed by delicate rules and generous breathing room for rhythmic pacing.

Pull Quotes • Balance Wrap
07 / Paragraph Composer

Paragraph Balancer

Automatically eliminates single-word dangling orphans and widows at paragraph ends through optical micro-adjustments.

No Widows • Balance Typeset
08 / Mathematical Scale

Modular Scales

Governs the typographic hierarchy with mathematical scales: Silver Ratio (1:1.414), Golden (1:1.618), and Musical Fifths.

Silver & Golden • Musical Scales
Live Example

Editorial Sample

Generous leading and calm white space. Toggle the Baseline Grid button below to inspect the underlying 8px grid.

Scale:
Essay ・ Issue 01

The Quietude Between Words and Tools

Not for rushed skimming, but for receiving thoughts slowly. Reflections on everyday typography.

When you open a well-bound book, there is a distinct moment of quietude. Words are not cramped together for maximum efficiency; rather, the page offers generous breathing room. Fresh air flows between the lines, allowing the eye to drift naturally from one paragraph to the next. Good typography is so unobtrusive that you forget its presence entirely while immersed in reading.

Throughout the history of bookmaking, page proportions and line heights were refined through patience and mathematical intuition. The Swiss grid systems pioneered by Josef Müller-Brockmann were never meant to be rigid constraints; they were simply guides for uncovering natural visual harmony.1 Can this calm reading environment be realized inside modern web viewports? That question led to the creation of zine.js.

"Good typography breathes in quietude."

Whether writing an architectural memo, an essay, or a technical guide, there is no need for heavy setup or complex frameworks. By adding a few attributes to standard HTML, your pages naturally adopt the poised presence of an artisanal zine.

Tools step back into the background, leaving the written word as the true protagonist. We hope zine.js brings this everyday luxury into your creative work.

ZINE.JS SHOWCASE
PROJECT KAMOS / KOSUKE KATO
PAGE 01
Quick Start & Documentation

Getting Started

Bring the quietude and precision of artisanal bookmaking to your web projects in three simple steps.

STEP 01

Place & Link Files

Download zine.css and zine.js and place them into your project directories.

STEP 02

Wrap with Container

Add data-zine="container" to automatically enable baseline snapping, optical kerning, and modular scale.

STEP 03

Add Declarative Tags

Drop in attributes for drop caps, sidenotes, or quotes whenever and wherever you desire.

1. Linking Files (Self-Hosted) Zero Dependencies (~12KB) 
<!-- Place downloaded CSS inside <head> -->
<link rel="stylesheet" href="/css/zine.css">

<!-- Place downloaded JS before closing </body> (auto-initializes) -->
<script src="/js/zine.js"></script>
2. Attributes Reference

HTML Data Attributes & Classes

Feature Attribute / Class Usage & Description
Container (Required) data-zine="container" Wraps article. Automatically enables 8px baseline snap, optical kerning, modular scale, and widow prevention.
Initial Drop Cap data-zine-dropcap <p data-zine-dropcap> precisely snaps initial letter height to paragraph leading.
Drop Cap Line Count data-zine-lines="2" Specifies number of baseline lines the drop cap spans (default is 2, or 3 for classical style).
Margin Sidenote data-zine-sidenote <aside data-zine-sidenote id="n1"> positions note in outer margin on desktop, inline on mobile.
Sidenote Reference class="zine-sidenote-ref" In body text, place <sup class="zine-sidenote-ref" data-target="n1">1</sup>.
Editorial Pull Quote data-zine-cutin <blockquote data-zine-cutin> frames quotation with hairline rules and calm padding.
Vertical Accent data-zine-vertical <h3 data-zine-vertical> renders heading vertically (with automated Tatechuyoko numbers).
Two-Column Grid class="zine-columns-2" Splits content into an elegant, balanced multi-column editorial spread.
3. Complete Ready-to-Run Template index.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Editorial Essay</title>
  
  <!-- 1. Include Zine Stylesheet -->
  <link rel="stylesheet" href="./css/zine.css">
</head>
<body>

  <!-- 2. Wrap article with data-zine="container" -->
  <article data-zine="container">
    <h1>The Quietude Between Words and Tools</h1>

    <!-- Initial drop cap lead -->
    <p data-zine-dropcap data-zine-lines="2">
      When you open a well-bound book, there is a distinct moment of quietude...
    </p>

    <!-- Body prose and anchored sidenote -->
    <p>
      Throughout bookmaking history, margins and line heights were refined with patience.<sup class="zine-sidenote-ref" data-target="note-1">1</sup>
    </p>
    <aside data-zine-sidenote id="note-1" data-target="note-1">
      1. Josef Müller-Brockmann's timeless Swiss grid philosophy.
    </aside>

    <!-- Editorial quote -->
    <blockquote data-zine-cutin>
      "Good typography breathes in quietude."
    </blockquote>

    <h2>Effortless Reading Experience</h2>
    <p>
      Tools step back into the background, leaving words as the protagonist.
    </p>
  </article>

  <!-- 3. Include Zine Engine (auto-bootstraps) -->
  <script src="./js/zine.js"></script>
</body>
</html>
4. Advanced JavaScript API (Optional) Options 
// Custom configuration (defaults work out-of-the-box)
Zine.init('[data-zine="container"]', {
  baseline: 8,            // 8px modular baseline
  scale: 'silver',          // 'silver' | 'golden' | 'perfectFifth' | 'majorThird'
  baseFontSize: 16,        // 16px
  opticalKerning: true,    // Optical balance & hanging quotes
  dropCaps: true,          // Precision drop cap alignment
  sideNotes: true,         // Margin notes with collision avoidance
});

// Switch mathematical scale dynamically
Zine.setScale('golden');

// Toggle 8px grid lines for inspection
Zine.toggleGrid();

zine.js

Breathe print-grade calm and thoughtful typography into your web projects.

Download zine.js (v1.1.0) ESM (zine.esm.js) CSS (zine.css)
MIT License • Kosuke Kato • Zero Dependencies • ~12KB