CHIAKI LETTERPRESS WORKS
千秋印書館
TYPE SPECIMEN · LETTERPRESS FOR THE WEB
在數位中模擬紙的纖維，墨的濃淡，鉛字的歪斜，印刷的缺損。一個在網頁上重現活版印刷的專案。
SPECIMEN OF CHINESE TYPE
活字見本
一號
Double Pica.
二號
Double Small Pica.
三號
Two-line Brevier.
四號
Three-line Diamond.
五號
Small Pica.
六號
Brevier.
SPECIMEN OF FACES
字體見本
一點明體 千秋印書館
日星宋體貳號 千秋印書館
思源黑體 千秋印書館
蘭陽黑 千秋印書館
SETTING
豎排與橫排
墨壓強度
1.00
歪斜程度
0.2
墨色濃淡
1.0
中文豎排
活版印刷
一顆鉛字是一塊金屬。字面朝上，排進版盤裡，一顆挨著一顆，行與行之間夾進薄薄的鉛條決定行距。
排好的版上機、著墨、壓紙。壓力落在紙上，字就陷進纖維裡，指腹摸得到那道凹痕 —— 這是活版與平版最明顯的分別。
墨不會每次都沾得一樣勻。這一顆吃飽了墨，飽滿發黑；那一顆沾得少，筆畫就虛了半邊。
鉛字會磨損。用久的字邊角崩了口，印出來缺一角，換一顆新的又太黑，同一頁上深淺不齊。
排字工的手也不是尺。每顆字擺進去都差那麼一點點，整段看下去，字是活的，行是斜的。
這些在照相排版之後都被修掉了。字距均勻、墨色一致、邊緣銳利，乾淨，但也就少了那點手的溫度。
這個套件把上面這些事寫回樣式裡：紙的纖維、墨的濃淡、字的歪斜與缺角，一層一層疊回去。
你現在讀的這段，直排與橫排是同一份內容。
◂ SCROLL
中文橫排
活版印刷
一顆鉛字是一塊金屬。字面朝上，排進版盤裡，一顆挨著一顆，行與行之間夾進薄薄的鉛條決定行距。
排好的版上機、著墨、壓紙。壓力落在紙上，字就陷進纖維裡，指腹摸得到那道凹痕 —— 這是活版與平版最明顯的分別。
墨不會每次都沾得一樣勻。這一顆吃飽了墨，飽滿發黑；那一顆沾得少，筆畫就虛了半邊。
鉛字會磨損。用久的字邊角崩了口，印出來缺一角，換一顆新的又太黑，同一頁上深淺不齊。
排字工的手也不是尺。每顆字擺進去都差那麼一點點，整段看下去，字是活的，行是斜的。
這些在照相排版之後都被修掉了。字距均勻、墨色一致、邊緣銳利，乾淨，但也就少了那點手的溫度。
這個套件把上面這些事寫回樣式裡：紙的纖維、墨的濃淡、字的歪斜與缺角，一層一層疊回去。
你現在讀的這段，直排與橫排是同一份內容。
英文橫排
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
用法
貼上就能用
<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>
不用框架
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
使用前要知道
字體要自己準備。開源自架、系統字、或申請 justfont 的 webfont 服務都可以。
直排的標點要另外準備。多數明體其實鑄了直排字形，只是 justfont 這類 webfont 服務取不到，得自己切一份子集頂上。
濾鏡必須跟內容在同一份文件裡。指到外部 SVG 檔（放 CDN、或另存一個 .svg）瀏覽器不會套用。
千秋稻荷社印書館 常世町一丁目
Type set in I.Ming 一點明體 · IPA Font License 1.0