CHIAKI LETTERPRESS WORKS
千秋印書館
TYPE SPECIMEN · LETTERPRESS FOR THE WEB
Simulating in the digital the fibre of the paper, the weight of the ink, the lean of the type, the flaws of the impression. A project that reproduces letterpress printing on the web.
SPECIMEN OF CHINESE TYPE
活字見本
一號
Double Pica.
二號
Double Small Pica.
三號
Two-line Brevier.
四號
Three-line Diamond.
五號
Small Pica.
六號
Brevier.
SPECIMEN OF FACES
Specimen of faces
一點明體 千秋印書館
日星宋體貳號 千秋印書館
思源黑體 千秋印書館
蘭陽黑 千秋印書館
SETTING
Vertical and horizontal
Ink strength
1.00
Lean
0.2
Ink weight
1.0
Chinese, vertical
活版印刷
一顆鉛字是一塊金屬。字面朝上，排進版盤裡，一顆挨著一顆，行與行之間夾進薄薄的鉛條決定行距。
排好的版上機、著墨、壓紙。壓力落在紙上，字就陷進纖維裡，指腹摸得到那道凹痕 —— 這是活版與平版最明顯的分別。
墨不會每次都沾得一樣勻。這一顆吃飽了墨，飽滿發黑；那一顆沾得少，筆畫就虛了半邊。
鉛字會磨損。用久的字邊角崩了口，印出來缺一角，換一顆新的又太黑，同一頁上深淺不齊。
排字工的手也不是尺。每顆字擺進去都差那麼一點點，整段看下去，字是活的，行是斜的。
這些在照相排版之後都被修掉了。字距均勻、墨色一致、邊緣銳利，乾淨，但也就少了那點手的溫度。
這個套件把上面這些事寫回樣式裡：紙的纖維、墨的濃淡、字的歪斜與缺角，一層一層疊回去。
你現在讀的這段，直排與橫排是同一份內容。
◂ SCROLL
Chinese, horizontal
活版印刷
一顆鉛字是一塊金屬。字面朝上，排進版盤裡，一顆挨著一顆，行與行之間夾進薄薄的鉛條決定行距。
排好的版上機、著墨、壓紙。壓力落在紙上，字就陷進纖維裡，指腹摸得到那道凹痕 —— 這是活版與平版最明顯的分別。
墨不會每次都沾得一樣勻。這一顆吃飽了墨，飽滿發黑；那一顆沾得少，筆畫就虛了半邊。
鉛字會磨損。用久的字邊角崩了口，印出來缺一角，換一顆新的又太黑，同一頁上深淺不齊。
排字工的手也不是尺。每顆字擺進去都差那麼一點點，整段看下去，字是活的，行是斜的。
這些在照相排版之後都被修掉了。字距均勻、墨色一致、邊緣銳利，乾淨，但也就少了那點手的溫度。
這個套件把上面這些事寫回樣式裡：紙的纖維、墨的濃淡、字的歪斜與缺角，一層一層疊回去。
你現在讀的這段，直排與橫排是同一份內容。
English, horizontal
On Movable Type
A sort is a small block of metal. Face up, locked into the forme, one against the next, with thin strips of lead between the lines to hold them apart.
The forme goes on the press, takes ink, and meets the paper. The pressure drives the face into the fibre, and you can feel the bite with a fingertip.
The ink never lands evenly. One letter comes up full and black, the next takes less and goes thin along one side of the stroke.
Type wears out. An old sort prints with a corner missing; a fresh one prints too dark, and the page is never quite level.
Nor is the compositor a ruler. Every piece sits a fraction off, and read as a paragraph the letters are alive and the lines lean.
Photocomposition tidied all of this away — even spacing, even colour, clean edges. Cleaner, and colder.
This package writes those accidents back in: the fibre of the paper, the weight of the ink, the lean and the chipped corner.
USAGE
Usage
Paste it in
<link rel="stylesheet" href="kappan.css"> <!-- kappan-filters.svg 的內容貼進 <body>，整頁一份 --> <div class="lp lp-paper"> <h1 class="lp-sz-1">常世通信</h1> <p class="lp-sz-5">第一號 千秋稻荷社印書館謹啟</p> </div>
No framework
import { mount, redact, pressTuning } from 'kappan' // 調的是印刷的成因，不是濾鏡的參數。一個成因牽動好幾道濾鏡。 const dispose = mount({ typeFamily: "'I.Ming', serif", filters: pressTuning({ ink: 1.4, pressure: 0.8, roughness: 1.6, absorbency: 1.4, wear: 1.2 }), }) // 逐字歪斜要每個字自己一個 span。別直接把 redact 交給 forEach —— // 它的第二個參數是 barUnit，會收到陣列索引。 document.querySelectorAll('.sg').forEach((el) => redact(el))
React
import { pressTuning } from 'kappan' import { LetterpressStyles, LetterpressFilters, Redacted } from 'kappan/react' // 兩個元件要吃同一份 options。只給其中一個的話，CSS 會指到不存在的濾鏡 id。 const options = { typeFamily: "'I.Ming', serif", filters: pressTuning({ absorbency: 1.6 }), } <div className="lp lp-paper"> <LetterpressStyles {...options} /> <LetterpressFilters {...options} /> {/* 字號 class 同時決定字級與該用哪支濾鏡；豎排加 .lp-v */} <p className="sg lp-v lp-typed lp-sz-3"><Redacted text="常世通信 ███ 第一號" /></p> </div>
BEFORE YOU USE IT
Before you use it
Bring your own face — open source, a system font, or a justfont webfont subscription all work.
Vertical punctuation needs a face of its own. Most Ming faces do carry vertical forms — webfont services like justfont just will not serve them, so you have to subset one yourself.
The filters have to live in the same document as the content. Point at an external SVG file — on a CDN, or just a separate .svg — and the browser will not apply it.
千秋稻荷社印書館 常世町一丁目
Type set in I.Ming 一點明體 · IPA Font License 1.0