Blog

テキストボックス謎余白についての対処法

投稿サムネイル

FigmaやSketchで日本語テキストボックスを扱う際、行間を指定すると上下に謎の余白ができてしまいます。

行間指定しつつ見た目通りに実装して欲しい場合は、下記の方法で対策できます。

1. Line Heightの値はフォントサイズと同じにする。

2. Line Height設定の側にある、「Paragraph Spacing」という値を変更。

これは、指定したいLine Height – フォントサイズ となります。

フォントサイズ16pxで、Line Heightを24pxにしたい場合は、

24px – 16px = 8px なので

Paragraph Spacing に8を入力します。

すると上下の余白がなくなり、デザインもやりやすくなります。

ただ本来は段落余白のためのものなので、

文章(改行なしで折り返しがある場合)では望むような形になりません。ボタン内のテキストや見出しなどの短い単語を扱う際には使える方法だと思います。プラグイン出ないですかね…

最新の技術と手法を用いて、
IT分野で変化と進化を続ける
Webインテグレーター

神田北信ビルエントランス

株式会社GEEK 〒101-0033
東京都千代田区神田岩本町4-4 神田北辰ビル3F

CATEGORIES