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