カーニング(文字詰め)-Volar2

カーニング(文字詰め)-Volar2

SIRIUS2テンプレート【Volar2】では一部のフォントでカーニング(文字詰め)を適用できます。
 

カーニングというのは文字詰めのことで、《Volar2》では日本語フォントのカーニング機能を搭載してます。


概要

ウェブサイト上でカーニング(文字詰め)がうまく機能する日本語フォントはそう多くはありません。
その中で「游ゴシック or 游明朝」は数少ないカーニングが機能するフォントです。
そしてSIRIUS2になって新たに搭載されたwebフォント「Noto Sans JP」(Google Font)もカーニングが効きます。


では比較的よく使われる「メイリオ」はどうかというと、和文部等幅フォントなのでカーニングが効きません。
等幅フォントというのは字間が等幅、つまり原稿用紙に書いたみたいに均等幅で表示されるフォントのことです。
これに対して欧文部はプロポーショナルフォント、つまり文字ごとに幅が変えてあるのでカーニングが効きます。


カーニングが効くのはSIRIUS2ではwebフォント(Noto Sans JP)游ゴシック游明朝のみになります。


実際に見較べてみます。


こちらは「メイリオ」とwebフォント「Noto」での表示例です。
ただしカーニング機能はOFFのままです。



字体に若干の違いはあるものの、どちらもほぼ同じ間隔で表示されてます。
では今度はwebフォント「Noto」のカーニング機能をONにした状態で比較してみます。



句読点かっこカタカナの小文字などが若干詰まっているのがわかるでしょうか。


好みがあるのでどちらがいいとは断言できませんが、少なくとも筆者個人はカーニングされてた方が自然で読みやすい気がしてます。

有効化

この機能はデフォルトでは無効化されてます。


《カーニング》機能を利用するには専用モジュールを有効化する必要があります。

有効化のやり方

【Volar2】カーニング
上記モジュールの[有効]のチェックをONにします。


【Volar2】の《カーニング》機能を有効化すると全テンプレート(すべてのページ)に反映されます。

游ゴシック or webフォント以外のフォントを選択した時はカーニング機能をONにしていても自動的に無効となります。


フォントというのは「このフォントは見た目がいいから」といった理由であなた好みのフォントを指定できるわけではありません。
というのもウェブサイトというのは基本的には利用者のPC・iPhone・Androidにインストールされてるフォントでしか表示できないからです。


よって最大公約数的なフォントしか指定できないようになってます。


SIRIUS2でも(全部が全部とは限りませんが)そういった仕組みに合うフォントしか選択できないようになってます。