ウェブデザインにおけるline-heightについて

ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳

[PerolineLuv]

PSDデザインに100%忠実なピクセルパーフェクトを強要される現場で、アタマに来て文字列周りは全て line-height:1 にして他の要素も全てpx単位でmargin, padding, position 実装してやったことある。

[ryo_n574]

久々にウェブ制作関連の記事を書きました！

[ustam]

とりあえず、line-height でオブジェクトの高さを指定するのは止めろ

[miruto]

昔先輩が、「基本は1.618を使っているよ」って言ってて、なんですかその中途半端な値？って聞いたら、「黄金比」と言っていた。

[pmint]

デザイン界隈では「バッドノウハウを考える人が優秀」っていう傾向がある。新興宗教と変わらない。

[sippo_des]

この高速スクロール時代にどこまで気にするか、みたいなキモチ。 印刷はさらに不明。ＰＤＦでもおいておいてくれたほうが親切。何のコンテンツかわかんないけど。道順はテキストで親切に書いて♥

[ichi404]

line-height:1じゃ複数行の文章対応出来なくなるじゃんか。個人的にletter-spacing細かく設定されてるの勘弁してってなる

[nunulk]

"実は調べれば調べるほど奥が深いCSSのline-heightの世界"

[spark7]

特に発見はない...のかな

[ezmu]

XDはcss側に仕様合わせて欲しい ここだけでFigmaからの乗り換え検討にあがる

[maritimecolor]

勉強になった～。色々と曖昧にしてた部分あったからスッキリした。[css][アクセシビリティ]

[securecat]

てか、上下に空きができるという言い方じゃなくて、line-heightは行ボックスの高さだで済むと思うんだけど行ボックスって表記が1つも出てこないのなんでなんだぜ？

[sawasawa12]

ふむ

[kuracom]

目がおじいちゃんなので和文は 1.8 以上にしてほしい。自分はなるべくそうしてる。単位はいつも入れてないけど、入れると厄介になるのを知れたのは良かった。

[fujibay1975]

いつも1.5

[diveintounlimit]

20年前のCSS仕様書から特にwhats newが無い

[thesecret3]

ラインハイトってなんだかドイツ語っぽい。

[Helfard]

へー。

[Nyoho]

詳しい。

[primedesignworks]

こういう所に行き着く前の、マージンを統一するとか、色数をやたらと増やさないとか、ガイドを引いてズレないようにするとか、オブジェクトのサイズは整数にするとか、レスポンシブで破綻しないようにしてほしい。

[ifttt]

XDは用途がそれなんだからCSSに合わせろや！

[wumf0701]

“line-heightの値は単位なしで記述するのがいい” おーこれは目から鱗！

[d4-1977]

line-heighiは、視認性に関わる大切な値なので注意したいです。Figmaで単位が入っている時があるからコピペされないように変えたいけれど、viewer向けのプラグインないし、あの表示される箇所は変更出来ないらしい

[aceraceae]

関係ないけど、鉛のプレートの話が興味深かった。

[ch416]

昔からウェブサイトにおける行間の最適な間隔については文献もあるのだけど、なかなか文字の読みやすさに対してウェブ業界が成長しない。ウェブメディアとか無茶苦茶だし。

[tilfin]

％と単位なしでも違うのか知らなかった。

[poliphilus]

行送りと概念が違うのは面倒だよなあ。なんでこんな仕様にしたんだろうか。ちなみに和文は1.8はあった方がいいよ。欧文と違ってアセンダーがないからね。行長が短い場合は1.6、見出しは1.4まで許容可。

[montbranc62]

いい記事

[namisk]

印刷のほうのレディングのような仕様だと誤解していた。大誤解。。そんな細かい字組みの要件なくて幸せだったが、一から出直すわ……。

[oyssi]

基本1.5くらいでデザインしているけど、和文は「1.8 – 2.0」なのか…結構空き気味な印象なので、読み易さやグルーピング難しいけどどうなんだろう。参考にいくつか挙げてもらっているので、それをメインに考えようかな

[misarine3]

line-heightでブロックの高さ調節すると変更に対応できなくなる時あるある。ピクセルパーフェクトの要求してくる現場はちょっとガソリンかけたくなる時ある。やるけど！

[umai_bow]

レディング分ネガティブマージン指定するぐらいならline-height:1を指定すればいいのでは。自分が良く理解できていない可能性がある

[blueboy]

　%　em　でなく、単位なし がいいそうだ。　／ 行間が広いと読みやすいけど、スクロールの手間がかかる感じ。ちょっと間延びした印象も。

[gen-tatsumi]

よいまとめです。ありがとうございます。

[AzuLitchi]

行間読みやすいと忖度捗る。