閉じる

【サンプルコード付き】CSSで文字間隔を指定する方法(初心者向け)

CSSでの文字間隔の調整方法を、初心者の方向けに紹介。 「文字間隔を指定するletter-spacingの使用方法」「1文字ずつ適切な文字間を調整するfont-feature-settingsの使用方法」」を中心にサンプルコード付きで詳しく解説しています。

カテゴリ: HTML/CSS

こんにちは!
最近、WEB制作の勉強をして少したったけど、 「文字間隔を指定する方法ってあるの・・?」「文字間隔ってどうやって指定するの・・?」「文字間隔を指定してみたい・・!」
そんな風に考えている、初心者WEB製作者の方も多いのではないでしょうか?

今回は、初心者WEB制作者の方向けに「文字間隔を指定するletter-spacingの使用方法」「1文字ずつ適切な文字間を調整するfont-feature-settingsの使用方法」を中心に解説します。

文字間隔とは?(letter-spacing)

文字間隔とは、下記の様なものです。

文字間隔指定なし↓

一つひとつの仕事に真剣に向き合い周囲に貢献し続けます。

お客様やパートナー様と共に歩み成長し、

自社の価値を磨きながら徐々に影響範囲を広げてまいります。

多くの幸福を目指し、貢献の輪を広げていくことが

弊社のアイデンティティです。

文字間隔指定あり↓

一つひとつの仕事に真剣に向き合い周囲に貢献し続けます。

お客様やパートナー様と共に歩み成長し、

自社の価値を磨きながら徐々に影響範囲を広げてまいります。

多くの幸福を目指し、貢献の輪を広げていくことが

弊社のアイデンティティです。

好みや場面にもよりますが、文字間隔が指定されていたほうが、ユーザーにとって見やすくなり、より良いwebサイトになります。
また、SEOという観点からも文字間隔の指定は、有利に働きます。

この文字間隔を指定するには、CSSプロパティ「letter-spacing」を指定していきます。

「letter-spacing」の指定方法

letter-spacing: 値;文字間隔を指定する事ができます。

指定できる値

normal←初期値
→ブラウザが自動的に文字間隔を決めてくれるが、基本的に0になることが多い。
 個人差があるが、初期値のままだと少し狭い。

数値+px
→決まったpx数で文字間隔を指定。
 指定した値がそのまま文字と文字とのスペースになる。

数値+em←1番オススメ!
→フォントサイズに応じて文字間隔が決まる。
 1emの場合フォントサイズと同じ、1.5emの場合フォントサイズの1.5倍という解釈になる。

一番のオススメは値emですが、それぞれ見ていきます。

指定方法

値 normal

サンプルコード表示結果↓

貢献の輪を広げる

一つひとつの仕事に真剣に向き合い周囲に貢献し続けます。

お客様やパートナー様と共に歩み成長し、

自社の価値を磨きながら徐々に影響範囲を広げてまいります。

多くの幸福を目指し、貢献の輪を広げていくことが

弊社のアイデンティティです。

HTMLサンプルコード

※解説
初期値は、「normal」なので何も指定しなければ、ブラウザが自動的に決めてくれます、実際は0(letter-spacing: 0;)という指定になっている事が多いです。
これでも見にくい事はありませんが、人によっては、少し詰まっている印象を受ける人もいます。

値 px

サンプルコード表示結果↓

おはようございます。

HTMLサンプルコード

CSSサンプルコード

※解説
指定したpx分の文字間隔(今回は、10px)を空ける事ができ、シンプルでわかりやすいと思います。
しかし、デメリットがあります。下記で解説します。

pxで指定する時のデメリット

pxで指定するデメリットは、webサイトには、さまざまな種類のフォントサイズが混在しており、フォントサイズごとに個別設定しなければならないためです。

上記図のように、letter-spacing1pxを指定した時、フォントサイズが15pxの時は、文字間隔がちょうど良く見えますが、30pxでは少し窮屈に感じます。
一つ一つに個別に文字間隔を設定すれば良いのですが、「一つ一つ設定していく事」、「フォントサイズが変わるたびに、また個別に設定していく事」はかなりの手間がかかってしまいます。
したがってなるべくpxでの指定は避けたほうが良いでしょう。

値 em

一番オススメの方法です。
理由は、フォントサイズに応じて文字間隔が指定されるからです。
em0.05、em0.1を指定し、サンプルコードで詳しくみていきましょう。

サンプルコード表示結果em0.05指定↓

一つひとつの仕事に真剣に向き合い周囲に貢献し続けます。

お客様やパートナー様と共に歩み成長し、

自社の価値を磨きながら徐々に影響範囲を広げてまいります。

多くの幸福を目指し、貢献の輪を広げていくことが

弊社のアイデンティティです。

サンプルコード表示結果em0.1指定↓

一つひとつの仕事に真剣に向き合い周囲に貢献し続けます。

お客様やパートナー様と共に歩み成長し、

自社の価値を磨きながら徐々に影響範囲を広げてまいります。

多くの幸福を目指し、貢献の輪を広げていくことが

弊社のアイデンティティです。

HTMLサンプルコード

CSSサンプルコードem0.05

CSSサンプルコードem0.1

※解説
emはフォントサイズに対する比率で、文字間隔を指定できます。
好みにもよりますが、0.05em-0.1emがオススメです。

emの考え方

emは、1em指定=「文字の高さ」になります。
フォントサイズ16pxの時、約1.6pxの文字間隔
フォントサイズ30pxの時、約3pxの文字間隔

emのメリット

・フォントサイズに対する比率で指定できるので、フォントサイズが変わっても、相対的な指定ができる。
・WEBサイトに、フォントサイズが何種類あっても、途中フォントサイズの指定が変わっても一括で修正できる。

マイナス値も指定できる

値をマイナスに指定し文字間隔を狭くする事も可能です。
サンプルコードでみてみます。

サンプルコード表示結果em-0.1指定↓

一つひとつの仕事に真剣に向き合い周囲に貢献し続けます。

お客様やパートナー様と共に歩み成長し、

自社の価値を磨きながら徐々に影響範囲を広げてまいります。

多くの幸福を目指し、貢献の輪を広げていくことが

弊社のアイデンティティです。

HTMLサンプルコード

CSSサンプルコード

※解説
標準normalでは、少し文字間が空きすぎるという方や、そのような場面あれば、マイナス値を指定する事で文字間隔を狭くする事ができます。

1文字ずつ字間を調整できるカーニング(font-feature-settings)

カーニング(font-feature-settings)とは?

カーニング(font-feature-settings)とは、1文字ずつ適切な文字間を調整してくれるものです。
letter-spacingで、文字間の調整はできますが、全ての文字に一律のスペースが設定され、1文字ずつはできません。 かなり細かく調整したい上級者がカーニング(font-feature-settings)を使用します。
初心者の方は、ほとんど必要なく、letter-spacingだけで十分ですが、知識として参考にしてみて下さい。

どんな場面に必要か?

フォントの多くは、正方形の中に文字が収まるように空間を作成します。
日本語には句読点や、小文字(ゅ、ぃ)などもあり他の文字と並んだ時、 letter-spacing一律の文字間隔設定では、微妙に文字間隔が違ってきます。

カーニング(font-feature-settings)指定方法

font-feature-settingsプロパティを使用します。

指定したい時は、1かonを指定
font-feature-settings: “palt” 1;

無効にしたい時は、0かoffを指定
font-feature-settings: “palt” 0;

実際に違いをみていきます

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
カーニング指定なし(緑)
カーニング指定あり(青)
それぞれ3行目に注目してください。
小文字の続いた、緑3行目、青3行目の文の長さの違いが、よりはっきりしています、これがカーニングです。

カーニングを使えるフォント

カーニングを使えるのは、open Typeフォントのみとなります。
open Typeフォントとは、これまでのTrueTypeを拡張子したフォントのことです。
TrueTypeと比べ、文字数が多く、多機能なフォントです。

フォント表

フォント名 フォントの種類
MS Pゴシック TrueType
MS P明朝 TrueType
メイリオ OpenType(open typeだが等幅制作の為、対応していない)
ヒラギノ角ゴシック OpenType
ヒラギノ明朝 OpenType
游ゴシック体 OpenType
遊明朝体 OpenType
Noto Sans CJK JP Noto Sans CJK JP
Osaka TrueType

カーニング(font-feature-settings)は、1文字単位で文字間隔を調整したい、上級者やデザイナー向けです。
letter-spacingでも十分に綺麗にWEBサイトを見せる事ができるため、まずはletter-spacingの習得からオススメします。

まとめ

最後にポイントをまとめます。
今回は、初心者WEB制作者の方向けに「文字間隔を指定するletter-spacingの使用方法」「1文字ずつ適切な文字間を調整するfont-feature-settingsの使用方法」」を中心に解説しました。

最後にポイントをまとめます。

1.letter-spacingの指定方法は
 letter-spacing: 値;

2.letter-spacingで指定できる値は
 normal←初期値
  → ブラウザが自動的に字間を決めてくれるが、基本的に0になることがほとんど

 数値+px
  →決まったpx数で字間を指定。

 数値+em
  →相対的な指定ができる、数値+emが一番オススメの方法
   
3.カーニング(font-feature-settings)とは、1文字ずつ適切な文字間を調整してくれる

4.カーニング指定するときは1かonを指定
 font-feature-settings: “palt” 1;

5.カーニング無効にするときは0かoffを指定
font-feature-settings: “palt” 0;

いかがだったでしょうか?
よいwebサイトは、文字間隔など細かい指定も数多くもされています。
文字間隔の指定など細部にこだわり、初心者から一歩抜け出していきましょう。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。