TSUNAGU GROUP TECHNOLOGIES

TGT TechBlogTGT TechBlog

フロントエンドからバックエンドまでの技術ナレッジ

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

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

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

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

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

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

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

24px – 16px = 8px なので

Paragraph Spacing に8を入力します。

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

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

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