こんばんは！

本日はjQueryを使ってホームページのフォントのカーニングを行ってみたいと思います！

カーニングってなんぞ？

そもそもカーニングってなんでしょう？

所謂「文字詰め」ってヤツなのですが、DTP系のデザインでは必ずといっていい程使われてるテクニックですね！

日本語だと「、」とか「。」とか括弧とかをパソコンで打つと、なんか次の文字との距離空いてるなぁ〜って思うことありますよね？

その余白を詰めてあげて、文字が綺麗に見えるように調整するのがカーニングです！

先ほども言ったのですが、紙媒体のデザインだと当たり前のように使われているのですが、Web上だとあんまり使われていません…
ちゃんとしてるのも見かけるのですが、あんまり見ません…
一応CSSにはletter-spacingというプロパティが用意されていて、文字間の詰めを調整できるのですが、あまり見かけません…

何故なんでしょう？

ボクが考えた理由としては、

1.DTP系のデザインソフト(Illustratorなど)に比べると手間がかかる

2.一文字づつやり出したらキリがなく、手間がハンパじゃない

3.そんな事にファイルサイズを使いたくない

こんな感じなのかな…真相は不明ですが…

とりあえずやってみよう

正直細かい調整をやり出したらキリがありません。

しかし「、」と「。」と括弧だけに特定して、カーニングするくらいならそんなに難しくないし、ファイルサイズもそこまで圧迫しないので、それくらいならやった方が良いんじゃないかなぁ〜と個人的には思います。

そこで、自分ならこう書くかな？ってのを作ってみましたっ！！

こんな感じ

$('h1,h2,p').each(function() {
    var arr = $(this).text().split('');
    for(var i = 0; i < arr.length; i++) {
        if(arr[i].match(/*カーニングしたい文字列*/)) {
            arr[i] = '<span class="karning">' + arr[i] + '</span>';
        }
    }
    $(this).html(arr.join(''));

    var tagName = $(this).prop('tagName');
    var value = tagName === 'H1' ? '-0.5em' : '-0.4em';
    $(this).find('.karning').css('letter-spacing',value);
});

今回は一応h1、h2、pタグに絞ってますが、その辺は臨機応変にできます。ちなみにデフォルトサイズだとh1の文字が大きいので、個別に調整しました。

ちょこっとやるだけでも大分見た目が変わるなぁ〜という印象でした。

是非一度試してみてくださいっ！

という感じで本日はWebでのカーニングについてのお話でしたっ！

ありがとうございました！