Send emailでのBodyで文字を揃える方法

Send email WFでメールの本文を設定する際、文字の幅を綺麗に揃えたいと思っています。
具体的には、画像のように箇条書きの文章を並べているイメージでコロン(:)の位置を綺麗に揃えたいです。

Rich text editorで色々試してみましたが上手くいかず。
ご教授いただけますと幸いでございます。
よろしくお願いいたします。

「いいね!」 1

同じように空白を入れてみました。
おそらくですが、全角と半角の空白が混ざっているのではないでしょうか。

「いいね!」 2

johnさん
いつもいつもありがとうございます!

画像のように実際に文字を入れてみると、ズレが出てしまいます…
空白の半角全角は統一してあるのですが…

そして、こちらを実際にGmailへ送信すると以下の画像のような感じです…

同じように実装してみましたが、
自分の環境ではズレませんでした。

「いいね!」 1

本当ですね。
なぜなんでしょうか…

全て半角スペースのパターン
全て全角スペースのパターン
両方試してはみたのですが…

@yunsu
横から失礼いたします。

おそらくですが、フォントの問題ではないでしょうか?
プロポーショナルか等幅かで大きく違ってくると思います。

対処法としては「気にしない」または「スペース+コロンで揃える以外の方法で記述」でしょうか。
下部に貼り付けた参考記事をご覧いただければおわかりかと思いますが、フォントはOS・ブラウザ・メールアプリなどでさまざま異なります。

「スペースや記号でキッチリ揃える」のは目指さず、ズレるものだと認識しておくか改行などで見た目を整えることをお考えになられた方がよろしいように思います。

【↓参考記事】同じ文字列でもフォントが違えば見た目はかなり変わってくるのがわかります。

「いいね!」 4

TomokoTsurutaさん
ご返信ありがとうございます!

なるほど。
ブラウザやメールアプリでの違いは考えたことがありませんでした。
違う対処を考えてみようと思います。
ありがとうございました。勉強になりました。

「いいね!」 2