CSSでフォントに長体・平体をかける方法と注意点

デザインの世界では、フォント・テキストに対して行う調整として「長体・平体」という概念があります。

昔は、意図的に平体をかける事（例えば新聞のような文字）で可読性を上げる風潮もあったようですが、基本的には長体も平体もかけない、いわゆる「100％×100％」の状態である「正体」である方が見やすいと思います。

ですが、スペースの都合でどうしても長体・平体をかけざるを得ない時があります。例えば、食料品の成分表などですね。

大きく表示しないといけない決まりがありますので、わずかなスペースでも表記できるように、長体・平体を活用したりします。

要はスペースの都合でやむをえず長体・平体は利用する、という認識になると思います。

もちろん、Webの世界でもそういった事は同じで、2行に別れるなどして、デザイン的なバランスや文字の高さがずれるのが嫌なので、どうしてもフォントサイズはそのままで、長体をかけて一行で抑えたいという場合があります。

そんな時にはCSSで調整をとってあげたいところですが、フォントを長体・平体にする専用のプロパティは残念ながらありません。

ですので、その代用として、要素を「回転」「拡大縮小」などの変形しているように見せる事ができる「transform 」プロパティというものを利用したいと思います。

transformは、変形という意味ですのでイメージしやすいと思います。

ちなみにですが、長体・平体に似たような動きをすると解説されております「font-stretch」プロパティというのもありますが、何かが問題で実装確認できず、そもそも長体・平体というよりかは、フォントファミリー（フォントの太さ）の調整するプロパティになっていますので、今回の主旨とは違うかと思いますので、解説はなしとさせていただきますね。

transformプロパティ

transformプロパティに適用する「値」は、「translate（移動）」「scale（拡大）」「rotate（回転）」などがあり、これらを同時にかける事も可能です。

今回の、文字を長体・平体にするにあたっては「scale（拡大）」を使っていきます。

transformプロパティのscale値は以下のように記述していきます。

（ X軸 , Y軸 ）の並びで、「1」を100％として指定していきます。

以下も、数字の設定は違えど、同じ長体風になります。

「実装例1」の場合、左の余白が気になりますが、それは後ほど解説していきますね。

次は平体のサンプルになります。

しかし、transformプロパティを利用するにあたって注意点がありますので、以下で解説していきたいと思います。

注意点 1

transformプロパティというのは、変形前の領域を一旦保持したうえで指定の方向へ拡大縮小させます。

わかりやすいのが、前述の「実装例1」のサンプルで、以下で示しているのは初期設定での縮小方向です。

今回は問題点をわかり易くする為に、背景に色をつけて、margin-bottomを付与しています。

X軸の値が小さくなるにつれて、スタート位置の方から中央に向かって縮小されていきます。

わかりますように、文字だけが縮小している訳ではありません。

時には、スタート位置から中央に向けて変形される事が良い時もあるかもしれませんが、文章や文字の場合だと違和感になってしまう事の方が多そうです。

ですので、こうした場合には、transformプロパティの原点を決める事ができる「transform-origin」プロパティも併記しておきましょう。

「transform-origin」プロパティに使う「値」は、「center（中央）」もしくは、「top left」のような上下左右の英単語の組み合わせになります。

以下の例では、左上を変形の原点とする場合の例になります。

注意点 2

上記説明しましたが、もしかすると中には「というかDIVでやるからダメなんじゃないの？SPANとかでやったら？」と思われた方もおられるかもしれません。

本来ならそうしたいところですが、実はtransformプロパティではインライン要素への適用ができません。

ですので、文章中の一部のテキストだけなどのインライン要素にのみ使いたい時は、「display: inline-block;」を併記すると使用できるようになります。

インライン要素など意味がわからない場合は、以下の記事よりご確認ください。

注意点 3

transformプロパティでは、あくまで元の領域を一旦保持したままの見た目だけの変更になりますので、以下のようにインライン要素で続けた場合でも、自動で間が詰まる訳ではないので見た目が悪くなってしまいます。

「キャッチコピー」の左側にスペースが空いてしまいますね。

これだと、さらに他の要素に対してなんらかの再調整などが必要になります。

「letter-spacing」の方が便利な時もある

上記説明のように、transformプロパティで長体・平体風にするには扱いづらい点がありますので、単純にスペースを狭めたい・確保したいだけの長体利用だけなのであれば、字間を詰める「letter-spacing」プロパティを利用する方が、案外簡単で直感的かもしれません。

まとめ

いかがでしたでしょうか？

transformプロパティを利用して、Web上で長体・平体風にフォントを表示する方法の紹介をしてきました。

transformプロパティは大変便利で、リッチなサイトを演出する事も可能ですが、上記注意点でも示しているように、扱いにくい点などもありますので、文章中の一部だけに適用するなどには使用は控えた方がよく、独立した見出しなんかにだけ適用するのが良さそうです。

少しだけスペース確保の為に、X軸方向に縮めたいくらいなのであれば、letter-spacingプロパティを利用する方がスムーズに制作していけるかもしれませんので、その点もデザインの引き出しに入れておいてみてください。