Lettering.JSで描いた文字の配置をビジュアル的に調整するブックマークレット「Kern.js」
Kern.jsはLettering.JSと連携してビジュアル的に文字間を調整するJavaScriptライブラリ。
Kern.jsはHTML5/JavaScript製のフリーウェア（ライセンスはWTFPL）。HTMLは表現力が高い。しかし雑誌のようなレイアウトを表現するのはまだまだ力不足だ。もちろんCSSを駆使すればできないことではないが、設定が大変だ。
文字をつめた所
例えば行の折り返しに伴って文字間がひどく広がってしまう場合がある。そんな時にDTPであれば前後の単語の文字間を狭めることによって指定範囲に表示が収まるように工夫する。それをWeb上で再現するのがKern.jsだ。
カーニングとはいわゆる文字間調整のことだ。Kern.jsは以前紹介したLettering.JSをより手軽に使えるようにするソフトウェアで、ブックマークレットとして利用できる。Lettering.JSを使って装飾している文字列があるWebページでKern.jsを実行すると、画面上部にバーが表示される。
CSS設定が得られる
この状態で文字をクリックするとハイライト表示になる。そのまま矢印キーを押すと指定した文字以降を左右に移動させることができる。マウスで一気に動かすことも可能だ。そうやって文字間を調整した後、Finish Editingボタンを押すと、配置をCSSで調整した設定が表示される。一つ一つの文字を幅調整できるのが良い。
CSSでのデザイン調整というとピクセルやemを数字で調整していくイメージがあるが、Kern.jsを使うとビジュアル的に調整ができる。Lettering.JSだけでなく、このようにビジュアル的に文字間設定ができると便利そうだ。
[s2If current_user_can(access_s2member_level1)]
文字を移動している所（プレミアム限定）
[/s2If]
MOONGIFTはこう見る
CSSの設定というのは、Webデザインというビジュアル的な問題でありながら操作は数値入力で行うというプログラミングに似た手法を使うということで分かりづらさを感じてしまう。もっとビジュアル的にマウスだけでできると使い勝手が良くなるだろう。
実際、Webページ上でのドラッグアンドドロップやその場での編集などデザインとWebサイトの構築は融合しつつある。この手の技術やサービスはWebデザイナーはもちろん、プログラマーにも人気が高い。特にCMSを使ったWebサイト構築はもっとビジュアル的にできるようになるべきだろう。