Adobe Xdの行送りとline-height

AdobeXd

Webサイトのデザインカンプは今までPhotshopを使っていましたが、Xd使ってみました。

ひとつ疑問に思ったことがあったのですが、行間(行送り)がPhotoshopやIllustratorと同じってこと。

PhotoshopやIllustratorは、そもそもWebデザイン用に作られたものではないので、文字下に行間ができるのは仕方ないですが、

UIデザインやプロトタイプ制作のために作られたXdなのにPhotoshopやIllustratorと同じ行送りでした。
少しわかりにくいですが、Webサイトの行間を設定するline-heightは行送りではなく、文字の高さなので文字の上下に均等に空きができます。

なので通常、画像などの横にテキストを並べても天地が揃うことはないです。

とまあ、こんな細かいところはどうでもいいんですが、何を言いたいかというと、Xdはline-heightの数値を入力する形にしてくれれば、いちいち計算しなくて済むのに…ってことです。

最適なline-height

「16ピクセル x 1.8=28.8ピクセル」なんて計算してたら、実際日本語で読みやすいline-height値って幾つなんだろう?って思いましてメジャーなポータルサイトやニュースサイトを軽く調べてみました。

記事本文のフォントサイズはほぼ16px。
line-heightは1.7〜1.8が多かったです。そんな中、東洋経済ONLINEは1.6でした。行間狭くても読みやすいなと思いましたが、letter-spacingが0.05emとほんの少しカーニングを調整していまして、窮屈な印象は受けませんでした。

ブログ記事ではfont-sizeもline-heightも様々でしたのであまり参考にしない方がいいですね。

やはりニュースサイトなどの、1.7〜1.8が正解なんでしょうね。

このブログテーマは、font-size: 14px line-height: 1.7です。ちょっとフォントサイズ小さいですね。
※font-size: 16px line-height: 1.8 letter-spacing: 0.05emに修正

 

Google Chromeのline-height:normalの値は1.5でした。
そして英文のサイトも1.5が多かったです。Bootstrapはデフォルトで1.4だったと思います。
英語だとそれくらいが読みやすいんでしょうね。

それと今まで気づきませんでしたが、ニュースサイトの記事では割と字下げしているサイトが多かったです。
僕の中での発見でした。

これはブログ記事では見当たりませんでした。
字下げの癖のある人のブログがあれば、スペースを入れるて字下げすることもあるでしょうけど、text-indent設定しているブログってないんじゃないでしょうか?(僕が勝手に思ってるだけですが。)

 

 

 

Pocket

タイトルとURLをコピーしました