まだ便利なツールはないようなのでAdobe XDで作った image 160×160の白い正方形の上に、太い黒のテキストと、少し細い白のテキストを置いて、グループ化して書き出している。 imageimage

小さい絵文字で使われるのでそのままの文字ではつぶれて見にくくなった。白い文字にも元々の文字に5pxの境界線をつけて太くした。 カーニング-150で文字の間を詰めている。 imageimage

今気づいたけどこのフォントJapaneseじゃなくてJavaneseじゃん!(実害はなかったようだ)

Slack Mattermost image image

表示しないのになぜ正方形を用意してるか

  • 画面上で文字が小さすぎると読めない
  • 画像のサイズが大きくなると同じフォントサイズでも文字が小さくなってしまう
  • 固定サイズの正方形に収めることで画像のサイズを固定する