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

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

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

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

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

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

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

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

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

↓DEMO作ってみました。

DEMO

使い方

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

HTML

XHTML

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/FLAutoKerning.js"></script>

1 2	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/FLAutoKerning.js"></script>

 

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

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

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

JavaScript

$(function(){ FLAutoKerning.process($('.group2 h1')); FLAutoKerning.process($('.group2 nav li a')); FLAutoKerning.process($('.group2 h2')); FLAutoKerning.process($('.group2 section .text')); });

1 2 3 4 5 6

$(function(){ FLAutoKerning.process($('.group2 h1')); FLAutoKerning.process($('.group2 nav li a')); FLAutoKerning.process($('.group2 h2')); FLAutoKerning.process($('.group2 section .text')); });

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

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

 

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

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

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

 

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

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

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