Loading...
本文のタイポグラフィとCSS
チーミー発表、2022年5月27日
一般的にタイポグラフィと言うと、かっこいい書体を使って見栄えがする組み方をしたデザインなんかが連想されると思います
そういったものは、見た目のよさを目的とした文字の使い方ですが、そうでなく今回は、読みやすさのためにはどうすべきかについて話します
先日のゴールデンウィークに
自分のサイトをリニューアルしました
このサイトはテキストメインのブログが主体なので、デザインとしては、いかにして長い文章を読みやすく構成するかが重要になります
具体的には、CSSでどのようにテキストの扱いを制御するかという部分です
たとえばテキスト関係のCSSプロパティはいろいろありますが、あまり広くは知られていなかったり、上手に使われていなかったりする印象があります
そのなかでよくある悪い例というか、長い文章を読みやすく組むという意味では避けたほうがいい実装としては次のようなものです
html
{
font-feature-settings
:
"palt"
1
;
}
paltというのはProportional Alternate Widthsの略です
日本語のグリフの幅は普通全角になるように作られていて、一文字一文字が全部同じ幅になります
しかしフォントによっては、プロポーショナルメトリクスという機能が実装されています
それを有効にすると、個々の文字の形に合わせた幅に変更されるようになります
詰め組と呼ばれるものです
https://github.com/fontplus/web-typography-glossary/blob/master/terms/proportional-metrics.md
見出しとか、大きく表示されるテキストを全角幅に設定すると、文字間がスカスカしてまとまりがなく見えてしまうので、プロポーショナルメトリクスが使われることがよくあります
しかしこれをサイト全体に対して適用してしまうと、内容を読む上では息苦しい感じになります
こういう風に文字間が詰まっていると、忙しない印象を受けたり、一文字一文字の形を認識する上での妨げになったりしてしまうので、結果として、疲れてきたり頭に入らなくなったりしてしまうことが多いと思います
このような長い文章を読みやすくするためには、基本的にはプロポーショナルメトリクスを使わずに、全角幅で表示されるようにしておくのがよいです
ベタ組と呼ばれるものです
ひらがなと漢字の文字を見比べたりすると、ひらがなのほうが空間的に空いているように見えるので均等になるように詰めたいとなったりしますが、そうでなくて、あえてそのまま組むことによって、文字の濃度差から文章の意味理解を促すことができるようになるという話もあります
paltを指定しなければ、プロポーショナルメトリクスは適用されないようになります
しかしフォントやブラウザによっては、それだけでは正しく全角幅で表示されるようになっていません
というのも、プロポーショナルメトリクスは無効なのに、ペアカーニングだけが有効になってしまっていることがあるんですね
ペアカーニングというのは、プロポーショナルメトリクスと同じくフォントに実装されている機能のことで、特定の文字の組み合わせ、たとえば「A」という文字の次に「B」が来たらどれくらい詰めるかみたいな情報が個別に設定されているものです
このペアカーニング機能は、本来は、プロポーショナルメトリクスと同時に使うために設計されているんですが、ブラウザとかフォントによっては、プロポーショナルメトリクスが無効になっていても、ペアカーニングだけが有効になってしまっているんですね
つまり、フォントを作っている人が意図しない使い方を自ずとしてしまっているということになります
それを防ぐためには、ペアカーニングを無効にするためのCSSを明示的に書かないといけないんですね
html
{
font-kerning
: none;
}
開発者ツールでこの宣言をトグルすれば違いがわかります
欠点としては、欧文のカーニングも無効になってしまうことです
欧文は逆にカーニングを有効にするのが普通ですが、和文と欧文が混植になったテキストだと、それらを個別に制御するのが実装的に難しくなってしまうんですね
しかし日本語中心のテキストであればそれは許容するようにしたほうがベターだと思います
ただし、欧文が使用される箇所が決まっているのであれば、個別に上書きするという対応もありです
Please turn on JavaScript to use Paper in all of its awesomeness. ^_^
html { font-feature-settings: "palt" 1;}html { font-kerning: none;}