アクアリウムハジメマシタ!!

WEBでも文字詰めが可能!? CSSに1行書き加えてかな文字の隙間も解消!

WEBでも文字詰めが可能!? CSSに1行書き加えてかな文字の隙間も解消!イメージ@complesso.jp

WEBサイト制作者がクライアントやデザイナーに「文章のところのカナのところのスキマつめてほしい。」とか言われたことありませんか?

それを解消するCSSがあることを知りましたので、備忘録として記入します。

長文のコーナー、右端のガタツキが気になる

確かに以前からクライアント様の社長のあいさつや説明文など、長文ページはシンプルになってしまうから、右側の文字位置が揃わないことが余計に目だってデザインとしては美しくない感じです。

WEBで文字詰めは無理と思っていました。

cssで修正右端のガタツキが気になるイメージ@complesso.jp

↑右側が揃っていない…

でも

text-align: justify;

を使うことで解消します。

cssにtext-alignjustifyで解消イメージ@complesso.jp

↑右端揃った!

AIやPhotoshopのように文字のカーニングをするなら

feature-settings

.class {
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

「font-feature-settings: “palt”;」約物を含む和文の字間を詰める
「font-feature-settings: “pkna”;」仮名系のみ字間を詰める

というCSSもあります。こちらはletter-spacingなどでの調整も合わせて必要でもあるようです。

webの文章はそのまま流して、成型なんか気にしないという感じもありましたが、ピシッと揃うだけでページが美しくなりますよね。意識して使っていこうと思います。