プログラムデザイナーへの旅路プログラムデザイナーへの旅路jQueryを使ってホームページのフォントをカーニングしてみる2016.01.07こんばんは!本日はjQueryを使ってホームページのフォントのカーニングを行ってみたいと思います!カーニングってなんぞ?そもそもカーニングってなんでしょう?所謂「文字詰め」ってヤツなのですが、DTP系のデザインでは必ずといっていい程使われてるテクニックですね!日本語だと「、」とか「。」とか括弧とかをパソコンで打つと、なんか次の文字との距離空いてるなぁ〜って思うことありますよね?その余白を詰めてあげて、文字が綺麗に見えるように調整するのがカーニングです!先ほども言ったのですが、紙媒体のデザインだと当たり前のように使われているのですが、Web上だとあんまり使われていません...ちゃんとしてるのも見かけるのですが、あんまり見ません...一応CSSにはletter-spacingというプロパティが用意されていて、文字間の詰めを調整できるのですが、あまり見かけません...何故なんでしょう?ボクが考えた理由としては、1.DTP系のデザインソフト(Illustratorなど)に比べると手間がかかる2.一文字づつやり出したらキリがなく、手間がハンパじゃない3.そんな事にファイルサイズを使いたくないこんな感じなのかな...真相は不明ですが...とりあえずやってみよう正直細かい調整をやり出したらキリがありません。」と括弧だけに特定して、カーニングするくらいならそんなに難しくないし、ファイルサイズもそこまで圧迫しないので、それくらいならやった方が良いんじゃないかなぁ〜と個人的には思います。$(this).find('.karning').css('letter-spacing',value);});今回は一応h1、h2、pタグに絞ってますが、その辺は臨機応変にできます。ちなみにデフォルトサイズだとh1の文字が大きいので、個別に調整しました。やるだけでも大分見た目が変わるなぁ〜という印象でした。