KERN LAB仕組み
GitHub(新しいタブで開きます)

KERN LAB の仕組み

KERN LAB は、文字どうしの間隔を字面(インク)の見た目から自動で決めるロゴ組版ツールです。フォントのメトリクスではなく描画されたピクセルそのものを計測するため、A と V のような斜めの字形も自然につまります。

1文字ずつ字面を走査する

各文字を計測用キャンバスに大きく描画し、走査行ごとに最初と最後のインクピクセルを検出します。得られる左右のエッジプロファイル(Lp / Rr)がその文字の「字面のかたち」で、フォント・ウェイトごとにキャッシュされます。

インク端走査行
走査行ごとのインク端。字面ボックスの左右端からの距離が Lp / Rr

実装: engine/kerning.ts(新しいタブで開きます) の measureGlyph

隣どうしの余白を行ごとに測る

隣り合う2文字のあいだでは、行ごとに「左の文字の右端から右の文字の左端まで」の白量を測ります。離れすぎた行が平均を支配しないよう白量には上限(cap)を設けます。ツールの「余白の面積」表示は、この帯をそのまま重ねて描いたものです。

caps
行ごとの白量(赤)。cap を超えるぶんは数えない

実装: engine/render.ts(新しいタブで開きます) の renderToContext(可視化)

面積が目標に合う間隔を解く

間隔 s を広げると行ごとの白量の平均は単調に増えます。平均が目標値(字間スライダーで決まる)と一致する s を46回の二分探索で求め、最後に最小の隙間が床値を割らないよう補正します。これをすべての隣接ペアに適用します。

lohitargets平均白量
単調な平均白量と target の交点を lo / hi で挟み込む

実装: engine/kerning.ts(新しいタブで開きます) の solveS / computeLayout

額縁に納めて書き出す

全文字の字面を包むボックスの高さから、比率(余白スライダー)で上下左右のパディングを生成し、字面の中心を額縁の中央に置きます。PNG は字面から算出した約2400px幅の高解像度ラスター、SVG はフォントを参照するベクターとして書き出します。

pad額縁字面
pad は字面の高さ × 比率。中心合わせで光学中央に座る

実装: engine/export.ts(新しいタブで開きます) の exportPNG / exportSVG