WEBサイトでも、CSSで文字詰め・トラッキングが出来る事を知らないDTPデザイナーが結構いたので書いておきます。

WEBサイト内でもCSSを利用すれば、イラレで言うところの「トラッキング」や「文字詰め」を表現する事ができます。
文字間は文章の読みやすさに直結する要素なので、WEBページを制作する際に、特に気になる部分ですね。

CSSでトラッキング

トラッキングは、テキストまたはテキストブロック全体の文字間を調整する処理で、基本的に全ての文字間で同じ数値が反映されます。

例えばこんな文章があったとします。

この文章にトラッキングをかけると

こんな感じに字間が広がります。

letter-spacing でトラッキング

CSSの letter-spacing プロパティを使ってトラッキングを調節します。
イラレのトラッキングと同じで、0より大きい数値で字間が開き、0よりも小さい数値で字間が狭まります。

letter-spacing プロパティの単位は「px」「em」のどちらかを選択します。
それぞれ見た目が大きく変わるので、注意が必要です。

• 1.5em →字間を1.5文字分
• 1.5px → 字間を1.5ピクセル

部分的にトラッキングをかける方法

<span> タグで任意の箇所を囲う事で、部分的にトラッキングを調節する事も可能です。

<span> タグで囲った「CSS」という文字だけにトラッキングがかかりました。

CSSで文字詰め

トラッキングと併せてイラレでよく使う「文字詰め」について簡単に説明しておきます。
「文字詰め」とは、文字の「カタチ」によってできる文字同士の「スキマ」を調節して、見栄えを整える作業の事です。あまり字間を詰めすぎると読みづらいので、主に見出しやキャッチコピーに対して文字詰めをします。

文字詰めの例

わかりやすい例で言うと、カッコや句読点の周りには空きがありますよね。

この文章をCSSで文字詰めすると

字間が詰まり空きが無くなりましたね。これが文字詰めです。

font-feature-settingsで文字詰めをする

CSSの font-feature-settings プロパティを使って文字詰めをします。

文字詰めされてカッコの前後にあった余白が無くなりました。文字間のゆとりが無くなると、長い文章は読みづらくなります。特に理由がない限り font-feature-settings プロパティを本文中で使用するのはオススメしません。

まとめ

紙媒体のデザイナーさんって文字間にこだわる人多いですよね。
DTPデザイナーにとって、トラッキングや文字詰めは、彼女よりも身近な存在…。ウソです。言い過ぎました。

WEBと紙媒体の間に壁はあると思いますが「WEBでもトラッキングや文字詰めができる」と知れば、その壁も少しは低くなるのではないでしょうか。
「WEBと紙媒体は根本からして違う」と言いつつも、共通する部分もあったりするので、デザイナーは双方の特性を知り、使い分けるスキルが必要になりますね。

HTMLとCSSでトラッキング・文字詰めする方法でした。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

「コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、ちゃんとCSSを書く」ためのプロの考え方を徹底解説!
破綻しやすいCSS、セレクタのリファクタリングなどの基本から、OOCSS、SMACSS、BEMなどのコンポーネント設計のアイデア、実際によくあるパターンのコードの組み方までを丁寧に解説。