Improve numbers height

The system makes adjustments even for slight differences in alphanumeric characters.

In text, it’s “I (capital I),” “l (lowercase L),” and “1 (the number one).” When generating random alphanumeric characters, letters are mixed in.

As a workaround, it’s acceptable to design the specification for automatically generated alphanumeric candidates to “exclude specific character strings,” but it’s also strange that characters not present within the system exist.

As a simple solution, I’ll explain how to use a font with small decorative “feet or whiskers” at the ends of characters by specifying “serif” in CSS.

Examples of Representative Dialogue Fonts

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

The example specified in CSS is as follows.

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

The problem is that depending on the font, the “height position of numbers” appears as a subscript. Specifying a different font for the numbers can be helpful.

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

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

Specifying a range for the numbers (0 to 9) and assigning the “Number” font to them. Next, we’re writing the font to be applied to the numbers first so it loads with priority.

Numbers 0 through 9 will be displayed in “Baskerville,” while all other characters will use “Times New Roman.” After that, feel free to experiment with combining fonts to achieve your ideal look, then choose whichever works best. Please give it a try.