Emoji（絵文字）と全角文字とを等幅表示するためのフォントサイズ

Emojiとは

　Emoji（絵文字）は、Unicodeなどの文字コードを割り当てた絵；1999年の日本発祥；2010年にUnicodeにより世界共通となりました；
　UnicodeのEmojiの一覧｜ウィキペディア
　List of emojis｜Wikipedia

Emojiフォントサイズの課題

　絵文字には，全角文字に比べて，フォントサイズがあいまいという課題があります；絵文字には白黒（モノクロ）とカラーの２種類あり，カラーの絵文字のフォントサイズがそうです；プロポーショナルフォントが主流の欧文ではそれほど問題ではないのかもしれませんが，和文では等幅表示が基本なので大きな問題です；
　Emojiと全角文字とを等幅表示するための各フォントサイズについて検討しました；フォントサイズが25px以下では絵文字の幅がおかしいことがわかりました；Emojiのフォントサイズは全角文字の1.33倍前後になっています；Emojiと全角文字とを等幅表示するために，HTMLとCSSにフォントのサイズなどを，別々に設定するタグ（全角文字用のzタグとEmoji用のeタグ）を追加してみました；その結果，サイト本文でよく使用する15〜18pxでも等幅表示出来るようになりました；

　サイトを作成していると，🔴や🔵といった絵文字が全角文字よりも大きく表示され，等幅表示が崩れて困っています；
　いろいろ検討したところ，フォントサイズが25px以下では絵文字の幅がおかしいことがわかりました；推奨されている本文のフォントサイズは15〜18pxですから，本文の表示は必ずおかしくなります；同じフォントサイズで，絵文字も全角文字と同じ幅で表示したい場合には，26px以上のフォントサイズが必要です；26px以上のフォントサイズを使用するのは，h1タグの見出しぐらいしかありません；絵文字を全角文字と等幅表示できるのは，見出しで使われる大きなフォントサイズのみということです；
　「フォントサイズ 25px以下 絵文字の幅がおかしい」を検索してみました；

AIによる概要

　AIによる概要によれば，「
　フォントサイズを25px以下に設定した際に絵文字の幅がおかしくなる現象は、ブラウザやOSによる絵文字のスケーリング（倍率設定）の差異が主な原因です。 特にブラウザごとに絵文字の扱いが異なり、以下の特性があります。
　Chrome/Windows: 絵文字がテキストサイズの約1.38倍で描画されることがあり、余白が生じる場合があります。
　Safari/macOS: 絵文字をテキストの約1.31倍のサイズで描画し、独自の余白を持つ傾向があります。
　非線形なスケーリング: フォントサイズと絵文字サイズの比率は必ずしも一定（線形）ではなく、特定のサイズ以下でアスペクト比や余白の計算が崩れることがあります。
」とあります；

　このAIによる概要が正しいとすると，フォントサイズが25px以下では，意図的に非線形なスケーリングにしているということです；そういうことであれば対策は簡単です；全角文字のフォントサイズと絵文字のフォントサイズを別々に設定するタグを作成すれば良いということです；
　iPadやiPhoneでは，1pxあたり２個以上の物理ピクセルなので，25pxを12.5px以下に変更しても絵文字の視認性は問題ありません；WindowsやmacOSでどうなるかは検討していません；iPadでは，Safari，Chrome，FireFox，Operaでもこの対策で問題なく等幅表示できました；

フォントサイズが25px以下では絵文字の幅がおかしい理由の考察

　フォントサイズが25px以下では絵文字の幅がおかしい理由を考察しました；
　昔は，640×480といった低解像度のディスプレイに，ビットマップフォントで表示していました；半角文字は8×16，全角文字は16×16が標準でした；絵文字を表示しようとすると，これと同じドット数では全然解像度が足りません；このため，絵文字は全角文字より大きめのフォントサイズで表示することにしたと思います；拡大倍率は，当時のテレビのアスペクト比である４；３＝1.33倍前後としたのでしょう；
　現在では，ディスプレイが高解像度になり，iPadなどではRetina displayがあたりまえとなりました；また，指によるピンチアウトで小さい文字でもきれいに拡大できます；現在のiPadなら絵文字を全角文字と同じフォントサイズでも全然問題ないのですが，一度決めてしまった表示仕様は簡単には変更できないのだと思います；

AIによる概要

はい、その通りです。絵文字のフォントサイズや表示のされ方は、使用する環境によってあいまい（異なって）になります。これは主に、絵文字のデザインがプラットフォームごとに異なるためです。 主な理由は以下の通りです。 プラットフォーム（OS）による違い: Apple、Google（Android）、Microsoftなどの各OS開発元は、それぞれ独自の絵文字フォントデザインを持っています。同じUnicodeコードであっても、デバイスによってアイコンのデザインやサイズ感が異なります。 アプリケーションやブラウザによる違い: 使用するアプリ（LINE、Twitter、各種ブラウザなど）によっても、標準のシステムフォントではなく独自の絵文字画像が表示されることがあります。これにより、同じOS内でも表示が異なる場合があります。 文字幅の扱い: テキストの一部として扱われる絵文字は、その文字幅の定義（全角扱いか半角扱いかなど）が環境によって異なり、結果としてサイズ感やレイアウトの崩れを引き起こすことがあります。 規格（Unicode）は共通: 絵文字の「文字コード」自体はUnicodeという国際標準規格で定められていますが、そのコードに対応する「具体的なデザイン（見た目）」は各ベンダーに委ねられています。 そのため、送信側と受信側で全く同じように見えているとは限らず、意図したニュアンスが伝わらない可能性もあります。

　Emojiと全角文字とを等幅表示するためには，HTMLとCSSにフォントのサイズなどを設定するタグを追加します；
　タグは半角の山括弧を使用しますが，HTMLでは半角の山括弧をテキスト表示できないので，代わりに全角の山括弧を使います；
　HTMLのindex.htmlでは，Emojiの赤丸の🔴を下記のようにe18タグを使って記述します；
＜e18＞🔴＜/e18＞
　CSSのindex.cssでは，e18タグの定義を下記のように記述します；
e18 {font-family: "Source Han Code JP", "Hiragino Sans", sans-serif; font-size: 13.5px; font-weight: 400;line-height: 0.94; padding:0; margin:0 0 0 0;vertical-align: middle;}
　なお，e18タグを使わない場合，下記のbodyタグの設定が適用されます；
body {-webkit-text-size-adjust: 100%; font-family: "Source Han Code JP", "Hiragino Sans", sans-serif; font-size: 18px; font-weight: 400;line-height: 0.94; padding:0; margin:0; margin:0;vertical-align: middle;}
　１行内で異なるフォントの高さを揃えるために，全角文字にz18タグを適用させます；
z18 {font-family: "Source Han Code JP", "Hiragino Sans", sans-serif; font-size: 18px; font-weight: 400;line-height: 0.94; padding:0; margin:0;vertical-align: middle;}

　Emojiにe18タグを使用前；

　Emojiにe18タグを使用後；

　Emojiにe15タグを使用前；

　Emojiにe15タグを使用後；

　Emojiにe36タグを使用前；

　Emojiにe36タグを使用後；