Figures, dashes and the details nobody teaches

The counter that jiggles

A live timer counts down: 0:59, 0:58, 0:57. The digits shift left and right by a pixel or two on every tick, and the whole element twitches. A price column in a table has its digits almost but not quite aligned.

Both have the same cause. Most typefaces ship proportional figures, where a 1 is narrower than a 0, because that looks better inside a sentence. For anything that changes in place, or anything in a column, you want tabular figures, where every digit occupies the same width:

.timer, .price-column { font-variant-numeric: tabular-nums; }

One declaration. It fixes a class of small ugliness that people otherwise try to solve with fixed widths and monospace fonts.

Lining and oldstyle

A second distinction, independent of the first. Lining figures are all the same height as the capitals. Oldstyle or text figures have varying heights with ascenders and descenders, so 3, 4, 5, 7 and 9 descend and 6 and 8 ascend.

Oldstyle figures sit more comfortably inside lowercase prose, because they have the same up-and-down profile as the letters around them. Lining figures stand out, which is right in a table, in an all-caps setting, or where a number is the point.

p { font-variant-numeric: oldstyle-nums; }
table { font-variant-numeric: lining-nums tabular-nums; }

Not every font contains both sets. Check before you specify, because a request for a variant the font lacks silently does nothing.

Dashes, and the three of them

• Hyphen - joins words and breaks them at line ends: well-known, co-operate.
• En dash – marks ranges and connections: 1998–2004, the London–Delhi route. The width of an n.
• Em dash — marks a break in a sentence — like this one. The width of an m.
• Minus sign − is a fourth character, wider than a hyphen and aligned with the figures. −5°C uses it; -5°C is using a hyphen.

British practice typically uses a spaced en dash for the parenthetical break where American practice uses a closed-up em dash. Both are correct within their conventions; what is not correct is a hyphen standing in for either.

Quotes and primes

Typographic quotes curl and point: ‘single' and "double". The straight marks ' and " are typewriter substitutes, and they have their own correct use as prime and double prime for feet and inches, minutes and seconds: 5′ 11″.

So a shop sign reading 6" Sandwich is using a prime correctly and an apostrophe in a name like O'Brien written with a straight mark is not. Word processors convert automatically. Web content generally does not, and the straight apostrophe is the single commonest typographic error on the internet.

Indian digit grouping

Worth its own section for this audience, because getting it wrong is immediately visible to a large number of readers.

The Indian numbering system groups the last three digits and then in pairs: 1,20,000 rather than 120,000; 1,00,00,000 for a crore. A page that displays Indian rupee amounts in Western grouping looks foreign in a way that is hard to unsee.

This is a formatting decision, not a font one, and JavaScript handles it:

new Intl.NumberFormat('en-IN').format(1200000)   // "12,00,000"
new Intl.NumberFormat('en-IN', {
  style: 'currency', currency: 'INR'
}).format(1200000)                                // "₹12,00,000.00"

The same API handles every other locale's conventions, including the comma-as-decimal-separator used across much of Europe. Hard-coding a grouping format is a decision to be wrong somewhere.

Spaces that should not break

Some pairs must not be split across a line: a number and its unit, an honorific and a name, a figure and its currency symbol.

10 kg    ₹1,200    Dr Sharma    Figure 4

A non-breaking space also does not collapse, which occasionally matters. The related character, a thin space, is what typesetters use inside a large number in some conventions, and a hair space is thinner still.

The ellipsis and the degree sign

Three full stops in a row are not an ellipsis. The character … has its own spacing and will not break across a line. Likewise the degree sign ° is not a superscript o, and the multiplication sign × is not a lowercase x — 1920 × 1080 against 1920 x 1080 is a small difference that a designer's eye catches instantly.

None of this is decoration. Each of these details exists because somebody needed the distinction and the typewriter could not make it. The characters came back; most people just never found out.