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

I.Ming · 明體 · 開源自架

 

Rixing Song No.2 · 宋體 · justfont

 

Source Han Sans · 黑體 · justfont

 

Lanyang Hei · 超黑 · justfont

 

SETTING

Vertical and horizontal

Ink strength

1.0

Lean

1.0

Ink weight

1.0

Chinese, vertical

滿

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.

SET YOUR OWN

Set your own

Direction

Size

Face

Export

Leading

1.50em

Tracking

0.00em

Ink strength

1.0

Lean

1.0

Ink weight

1.0

Composition happens when you leave the box — the jitter splits every character, and doing that mid-typing breaks input methods. Drag the corner of the box to resize it.

Webfont service by emfont

USAGE

Usage

Without a framework

import { mount, redact } from 'kappan'

const dispose = mount({ typeFamily: "'I.Ming', serif" })
document.querySelectorAll('.sg').forEach(redact)

React

import { LetterpressStyles, LetterpressFilters, Redacted } from 'kappan/react'

<div className="lp">
  <LetterpressStyles typeFamily="'I.Ming', serif" />
  <LetterpressFilters />

  <i className="lp-fibre" /><i className="lp-grain" />

  {/* 豎排加 .lp-v,橫排拿掉就好 */}
  <p className="sg lp-v lp-typed"><Redacted text="常世通信 ███ 第一號" /></p>
</div>

BEFORE YOU USE IT

Before you use it

01

Bring your own face open source, a system font, or a justfont webfont subscription all work.

02

Vertical setting needs a separate face with vertical forms for the punctuation; most Ming faces have none.

03

Filtering a whole page of text is slow on Safari. With a lot of copy, keep it to the headings.

 

Type set in I.Ming 一點明體 · IPA Font License 1.0