自動文字詰め(カーニング)機能

キャプチャ画像

コチラ↓のボタンをクリックすると、(このページのみですが)『デフォルトのフォント』での表示が確認できます。

フォント変更

カスタムテンプレート【Volar】では、
日本語フォントの自動文字詰め(カーニング)機能をデフォルトでONにしてます。


日本語フォントの文字詰め(カーニング)

”文字詰め”、いわゆるカーニングですが、
ウェブ上で文字詰め機能がうまく機能する日本語フォントはそう多くはありません。

 

その中でWindowsでもMacでも使われてる「游ゴシック」は、数少ない文字詰め機能が機能するフォントです。

(最近は「游ゴシック」を採用するサイトが増えつつあります)

 

SIRIUSではこの「游ゴシック」が選択できるようにもなってます。

 

キャプチャ画像

 

では比較的よく使われる「メイリオ」フォントの場合はどうなのかと言えば、
「メイリオ」ではカーニング機能が無効となります。

 

なぜメイリオではカーニングができないかと言えば、それは等幅フォントだから。

 

等幅フォントというのは文字通り字間が等幅、つまり原稿用紙に書いたみたいに均等幅で表示されるフォントのことです。

 

当然文字詰め機能は無視されます。

 

その違いを(キャプチャ画像で)ご紹介しましょう。

 

こちらが↓フォント「メイリオ」での表示例。

 

キャプチャ画像

 

続いてフォントを「游ゴシック」に変えて文字詰め機能はOFFのままでの表示例です。

 

字体に若干の違いがあるものの、ほぼ「メイリオ」と同じ間隔で表示されてます。

 

キャプチャ画像

 

最後がフォントは「游ゴシック」のまま文字詰め機能をONにした状態での表示例です。

 

読点(、)かぎかっこ(「」)中黒文字(・)カタカナの小文字などが
若干詰まっているのがわかるでしょうか。

 

キャプチャ画像

 

いかがでしょう、最後が一番自然な感じで視界に入ってくると個人的には感じてるんですが。

 

ただしMacでは一部カーニングが効かない部分もあるとの”噂”です。

(私はMacを持ってないので実機検証ができませんが、そういう検証結果もあるそうです)

 

またiOSAndroidは仕様がWindowsと異なる部分も多く、
バージョンによってカーニングがうまく機能するときもあれば何も変わらない場合もあります。

 

ただ”文字が読めなくなった”などの大きな不具合はないため、
使ってみる価値は大いにあると思います。

 

ということで当サイトでは游ゴシック(カーニングあり)で表示させてます。

 

文字詰め(カーニング)機能はOFFにすることもできます。

 

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

フォントというのは「このフォントはかっこいいから」などの理由であなた好みのフォントを指定できるわけではありません。

 

というのもホームページというのは、基本的には訪問者のPC・iPhone・Androidにインストールされてるフォントでしか表示することができないからです。

 

そのため独特なフォントを仮に指定したとしても、そのフォントが訪問者のPC等にインストールされてなければそのフォントで表示させることは不可となります。

 

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

 

コチラ↓のボタンをクリックすると、(このページのみですが)『デフォルトのフォント』での表示が確認できます。

フォント変更

※iPhone(スマホ)でご覧になる場合は、iPhone(スマホ)専用のフォントで表示される可能性が高く、フォント設定の違いによる差はないかもしれません。

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSカスタムテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください

(※「SIRIUSでホームページ作成」という姉妹サイトの専用ページが開きます)
 この記事をシェア 
キャプチャ画像

PC版レイアウトに切替

スマホ版レイアウトに切替