Sketchで日本語フォントを使うと行間表示がおかしくなる問題への対処法

ocapi
3 min readOct 21, 2016

--

こんにちは。
六本木で働いているWebデザイナーです。

みなさん、Sketch使ってますか?
超いいですよね!もうない頃には戻れない感じですよね。
しかーし使ってる方はほぼ同じ問題にぶちあたってると思うのですが、Sketch、日本語の行間指定おかしいですよね??

特に使用頻度の高いヒラギノでおかしいので、Zeplinなど連携ツールを使っている人も困っているのでは。
そしておそらくみなさん「そろそろ解決方法見つかってるかも」と思ってぐぐる → ない
という経験をされているのでは。

上記ブログの方が開発元のBohemian Codingに問い合わせてくれてますが、彼らもこの問題を把握しているものの、まだアップデートはされないまま…( ˘ω˘ )

ずっとこの問題に悩まされていたのですが、今日!優秀な後輩と同僚が裏技を発見したので共有します!

わかったこと

日本語というより、OpenTypeのフォントにのみバグがおこる。
なので、Noto Sansとかメイリオとかだとバグは起こらない!

とはいえ、書体を変えるとデザインの印象も変わってしまうし、嫌ですよね…

そこで!

対処法

  1. 普通にヒラギノで文字を打つ
  2. 最初の1文字だけ、Noto Sans(TrueTypeフォント)にする!
  3. 変な行間がなくなる!

こういうことです↓

最初は普通にヒラギノなどのOpenTypeフォントで文字をうち…
最初の1文字だけNoto Sansにします。

Happy!\(^o^)/

とっても目から鱗だったので、初めてのMedium投稿してみました…。

ただ、解決法じゃなくてただのその場しのぎなのがアレですが…。

でも為すすべなくアップデートを待つよりは、とりあえずしのげるしよいかなと!思ってます。

よかったら試してみてくださいね!
他にももっといいやり方あるよ、とかありましたらぜひぜひ教えてください。

早くこの問題を解決するアップデートが来ますように!

20161030 追記

・Symbolにすると、最初の1文字に設定した書体になってしまうので注意(つらい…)
・Zeplinでも同じく最初の書体を読んでしまうので注意

やっぱり、そもそもの元を直してもらうしかないですね。
声をあげるとBohemian Codingフットワーク軽く直してくれるそうなので(実際に台湾版では声をあげる人が多く、いろいろアップデートされているそう)、日本人デザイナーのみなさまよろしくお願いします…!笑

--

--