数字の高さを改善

構築システムによっては「英数字」のわずかな違いも手を加えることがあります。

文字の外観では「I（大文字のアイ）」と「l（小文字のエル）」と「1（数字のイチ）」ですね。もしランダムな英数字を発行する仕様であれば文字が混ざります。

回避策として自動発行する英数字の候補に「特定文字列を含まない」という仕様設計もかまいませんがシステム内に存在しない文字があるのも不思議ですよね。

カンタンな解決策としてCSSで「セリフ体」を指定して文字の端に小さな「足やひげ」の装飾がついているフォントを利用する方法を解説させていただきます。

代表的なセリフ体フォントの例

・Times New Roman
・Georgia
・Garamond
・Baskerville
・Palatino

CSSで指定した例が下記です。

.element {
	font-family: "Times New Roman", Georgia, "Garamond", "Baskerville", "Palatino", serif;
}

問題は指定するフォントによって「数字の高さ位置」が下付きで少しずれて見える点。そこで数字にだけ異なるフォントを指定するという方法が役に立ちます。

@font-face {
	font-family: "Number";
	src: local("Baskerville");
	unicode-range: U+0030-0039;
}

.element {
	font-family: "Number", "Times New Roman", serif;
}

数字の範囲（0〜9）を指定して「Number」という設定値を持たせているわけですね。次に数字へ適用するフォントを先に書いて優先的に読み込ませています。

0〜9の数字は「Baskerville」が指定されてそれ以外の文字は「Times New Roman」で表示されるという流れです。あとはお好みでフォントを組み合わせてもっとも理想的な見た目になるパターンを試してどれかを採用すればOK。ぜひお試しくださいませ。