Blog

日本語の文字詰め(カーニング)を自動で調整してくれるjQuery

日本語フォントでは、基本一つ一つの文字が等幅で作られていることがほとんどで、

ウェブサイト上でテキストによって文字組をした場合に、不自然な文字間隔になってしまう場所が出てきます。

フラットデザインやレスポンシブデザインが標準化傾向にある今、

ウェブサイトでの文字は文章はもちろんのこと、テキストにおいても画像を使わずテキストを使う必要性が高まってきており、

日本語フォント独特の文字間隔の不自然さが、ウェブデザインでの障害となることもあります。

 

そんな中、ウェブページのテキストの文字詰めを自動でしてくれるJSが公開されていましたので、

こちらをご紹介いたします。

HTMLで文字詰めするタイポグラフィー用JS

ファイルはこちらのサイトよりダウンロードください。

 

↓DEMO作ってみました。

DEMO

 

使い方

まず、jQueryとダウンロードした文字詰めのJSファイルを読み込みます。

 

次に、文字詰めを行うHTML要素に、

FLAutoKerning.process($(‘対象の要素’));

と行った形でスクリプトをあてます。

これで文字詰めが行われます。

文字詰めを行う文字一つ一つが<span>で囲まれますので、<span>で文字の大きさや色などを指定していたりする場合は注意が必要です。

 

全体として文字の間にできる不自然な空白が抑えられ、

特に句読点や括弧などの前後にできる大きな空白が抑えられているので、

まとまった感じがします。

 

等幅でなくなるため、行の終わりが揃わなくなるという問題が出てくるため、

タイトルやキャッチコピーなどでの利用に抑えたり、

センタリングや右寄せした文章のような、行の終わりをそろえる必要がないような箇所に使うなどの利用法がいいかもしれません。

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ