Numbers - CSS Typography | CSS: Presentation Layer
Standards Based Development
Lining numerals take up uniform widths of space, enabling the numbers to line up when tabulated in columns. Lining numerals are the same height as capital letters, so they can appear big and bulky when appearing in running text.
Types of Number Sets
Lining Figures (Capital)
Lining Figures are essentially capital numbers.
Lining Figures should only be used where the rest of the text is in all capitals; lining numerals used alongside lowercase text tends to "shout" at the reader, which is obnoxious.
Tabular Lining Figures
Tabular Lining Figures all have the exact same width; beloved by data scientists.
Proportional Lining Figures
Proportional Lining Figures have individual character widths, but all have the same height, which is typically the same height as capital letters in the font family.
OldStyle Figures (Lowercase)
OldStyle Figures are essentially lowercase numbers.
Tabular OldStyle Figures
Tabular OldStyle Figures have identical letter spacing (typically not aesthetically pleasing) and use lowercase letters.
Proportional OldStyle Figures
Proportional OldStyle Figures have individual character widths, as well as ascenders and descenders, that typically match the ascender/descender measurements of the font's lowercase letters.
Proportional OldStyle Figures are used with normal U&lc body copy.
Small Caps Figures
Small Caps Figures match the size, weight, and letter spacing of true Small Caps.
Small Caps Figures should be used with the lowercase portions of Small Caps words because they fit and do not shout at the reader.
{}