東京都

【HTML】WEBサイトを読みやすくするカーニング方法まとめ【CSS】

Ayako Shimizu, 河野隼人

Business (Finance, HR etc.), 開発部/デザインチーム/サブリーダー

Ayako Shimizu

株式会社viviON / Business (Finance, HR etc.)

河野隼人

株式会社viviON / 開発部/デザインチーム/サブリーダー

on 2021-08-26

こんにちは！

突然ですが皆さんWebでも文字詰めができるって知ってましたか？
WEBでの文字詰め方法を聞かれた時、

「一文字ずつ<span></span>で囲む…とかですかね…？」

と自信なさげな上に情弱さを披露してしまったデザイナーの山下と申します🙈

一般的に昔から知られている方法としてはletter-spacingやspanで文字詰めをする方法がありますが、他にもfont-kerningやfont-feature-settingsといったカーニング用のCSSプロパティが存在しています！

特にfont-feature-settingsというプロパティではカーニング用に設定できる方法が何通りもあってめちゃくちゃすごいんです。

こういう方法もあるよー！と、デザインチームの有識者のメンバーに何通りか方法を教えてもらったので、今回はWEBサイトを読みやすくするカーニング方法を紹介していきたいと思います！✍️

1.letter-spacing（等間隔調整）

メリット
対象のブラウザやフォントなどを気にせず、手軽に全体的な字間の詰まりを解消できる。

デメリット
等幅で調整されるため、句読点などは間隔が空き過ぎてしまう。

まず一般的に字間調整で知られている方法はletter-spacingです。
値の指定はnormalや数値などで設定します。

おすすめは数値+emと言われていて、これは1emが文字の高さになるのでフォントサイズに応じて字間が変わってくれる便利な値になります！

細かい字詰めはせず、ただ全体的な字間の詰まりを解消したい方や字間を大きく広げたい場合など気軽に使えて、対象のブラウザやフォントなどを気にせず使える方法です。

2.<span>で囲む（手動調整）

メリット
細かすぎる調整をしたい時や、あえて字間をバラバラにしたい時に使える。

デメリット
コーディングの手間がかかる。コンポーネント化に向かない。

<span>で囲んでスタイルをつけるのは、もっと細かく自分好みに細かく設定したい！という場合や、字間をあえてバラバラにしたい時などに役立つ方法です。

※marginではなくletter-spacingでも可

ちなみに…

<p><span class="type_1">D</span><span class="type_2">L</span><span class="type_3">s</span><span class="type_4">i</span><span class="type_5">t</span><span class="type_6">e</span><span class="type_7">文</span><span class="type_8">字</span><span class="type_9">詰</span><span class="type_10">め</span></p>

span.type_1 {
 margin-right: 12px;
}

span.type_2 {
 margin-right: 10px;
}

span.type_3 {
 margin-right: 1px;
}

span.type_4 {
 margin-right: 19px;
}

span.type_5 {
 margin-right: 5px;
}

span.type_6 {
 margin-right: 4px;
}

span.type_7 {
 margin-right: 8px;
}

span.type_8 {
 margin-right: 22px;
}

span.type_9 {
 margin-right: 4px;
}

CSSではこのように記述が大変なことになるのでコンポーネントで流用するのには向きません。

細やかな調整は効くのでLPやキャンペーンページなどの単一のページのファーストビューなどでは使えるかもしれません！