テキスト・フォント

「letter-spacing」プロパティ

「letter-spacing」プロパティは、文字の間隔を指定するCSSプロパティです。
文字の水平方向の文字と文字の間隔を開く値を設定できます。

「letter-spacing」プロパティの値

文字の間隔を指定する単位は「normal」「px」「%」「em」などの値を指定することができます。
また、「%」「em」の値は、親要素を基準に間隔を空けます。 ※ブラウザの種類により、小数点以下の数値は切り上げされる場合がありますので小数点での指定は推奨できません。

CSSでサイズ指定する単位「px」「%」「em」「rem」の違いと使い分け

「letter-spacing」プロパティの指定方法

文字の間隔を指定する場合は、「letter-spacing」プロパティを使い適応する値を指定することで実装できます。

「letter-spacing」プロパティ
セレクタ{
letter-spacing;文字の間隔;
}
値例
/* 初期値 */
letter-spacing: normal;

/* px値 */
letter-spacing: 10px;
letter-spacing: 15px;
letter-spacing: 20px;
letter-spacing: 25px;
letter-spacing: 30px;

/* %値 */
letter-spacing: 5%;
letter-spacing: 10%;
letter-spacing: 15%;
letter-spacing: 20%;
letter-spacing: 30%;

/* em値 */
letter-spacing: 1em;
letter-spacing: 2em;
letter-spacing: 5em;
letter-spacing: 10em;
表示例

文字の間隔(10px)

文字の間隔(20px)

文字の間隔(1em)

文字の間隔(2em)