ウェブサイトで英数字のIDを表示するときに最適なフォント

注文IDや招待IDなど英数字の羅列を表示することがあるとして、ユーザーがその文字列をコピペできない(もしくはコピペが面倒、難しい)場合、各文字を間違わずに識別できる必要がある。具体的にはゼロとオーなどの似ている文字を勘違いせずに済むようにしたい。

一般的にウェブサイトで良く利用されるフォントであるArial、Verdanaでゼロとオーを表示すると下記のようになる。次に勘違いしやすそうなイチとエルも書いてある。
左から、ゼロ オー イチ エル。

こうして見ると細長い方がゼロだなと区別は付く。とはいえ、ゼロにスラッシュがあればより勘違いする可能性が低いだろうから、ゼロにスラッシュのあるフォントを探してみた。

OS X Mountain Lion:フォントリストより、Macにインストールされているフォント(ただし英語フォントのみ)でゼロにスラッシュのあるものを探してみた。こんなにたくさんのフォントがインストールされているのに、ゼロにスラッシュが入っているフォントは下記のみだった。

今度はList of Microsoft Windows fontsからWindowsにあるフォントでゼロにスラッシュのあるものを探してみた。

え、Consolasだけ?あんなにもフォントがあるのに。

結論

font-family: "Monaco", "Consolas";

MacをMonacoにしたのはイチとエルの区別も分りやすいというのがありますが単に好みです。Consolasはイチとエルが似ているのが微妙ですね。Linuxは手元にGUIが動く環境を持っていないので検証していません。また、Webフォントはブラウザが対応していない可能性があるので検証していません。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です