どうも、鶏です。季節はすっかり秋ですね。
秋といえば、文字間のアキを調整するのは忘れてはならない工程ですよね。

ウェブサイト上のプレーンテキストに対して「ここもう少しツメて」とクライアントからの指示がきたりしますね。どちらが折れるか譲れない戦いが始まりです。

ウェブページで文字間のアキを調整する

アキを調整すれば文章がキュッと引き締まって美しく見える。そんな大事な部分ですが、HTMLでそれを行うにはなかなか難しい。
英語圏ではウェブフォントの普及してきているので、ウェブページでの文字組みがかなり見直されてきている印象ですが、文字数が多い日本語環境では、デバイス間のフォントもバラバラで、もう少し先になるのでは?といった印象。

しかし、完璧ではありませんが日本語環境でもできないことはありません。
例えば電通報では見出しなど一部の日本語を調整しています。
ソースを見ると、日本語ウェブフォントを使って環境ごとのフォントの差を埋めてから、JavaScriptで行っているようです。

やってみた

指定した要素に含まれるテキストの字間を調整します。

See the Pen JavaScriptで日本語の文字間のアキを調整する 1

全画面で見る

全画面で見る

はてブ数

http://codepen.io/sato4yoshida/full/gaLWLa/

JavaScriptで日本語の文字間のアキを調整する

仕組みはなかなかの力技で、句読点といった記号や「ヵっぉ」のように小さい文字、「アフン」のように右下にホワイトスペースのある文字を変数にいれて、文字ごとに微調整しています。