Sketch | 日本語フォントで行間指定時のバグを知りました

こんにちは。マスダです。デザイナー1年目と名乗れる時期が終わってしまいました…。デザイナー2年生です(´-ω-`)

今日はデザイナーなら一度は使ったことがあるのではないでしょうか。Sketchについてのお話です。Sketchで日本語フォントを使って文章を打つと…？あれ？行間の指定したらなんかおかしくない…？と思ったことはないでしょうか。

こんな感じです。

こちらはフォントサイズ16px、行間30pxで指定をしたテキストです。バウンディングボックスをわかりやすいように灰色の四角で囲ってあります。
行間を指定した英語のフォントと日本語のフォントでバウンディングボックスの位置が異なるのがおわかりでしょうか。日本語フォントの場合は行間を指定すると、テキストの上下に余白ができるのではなくテキストの上部に大きく余白が作られてしまいます。

なーんか変な感じだなーと思っていたら、これバグでした。結構前から起こっているバグのようなのですが、まだ治っていないみたいですね。
フォントにはTrue TypeとOpen Typeという2種類の形式があるらしく、Open Typeのフォントで行間を指定するとこのバグが起きるみたいです。

デザインを作るだけならいいのですが、Zeplinでエンジニアに共有して要素同士の間隔（marginとかpadding）を確認する時には少し困ります…。その通りにCSSを書くと、あれ？なんか違う？となってしまいます。

このバグの対処方法として考えられるのは、文章の最後に英語フォントで半角スペースを入力することでしょうか。

これで解決ですね！
ちなみに、Zeplinではフォントの判定を1文字目で行なっているらしいので（おそらく）、1文字目のフォントを実際に使用するものと異なるものにするのはやめたほうがいいですね。

もし、他にいい解決方法などがあれば教えてもらいたいです！文章の最後に半角スペースを入力して英語フォントにするの、すごく手間だと思うので…。

ちなみに、Sketch Version 53.2です。