Skip to Content

Microtypography

Part of a series about Diplograph’s Design, this note is a mix of design documentation and test content.

A number of minor adjustments have been made to prose text. Some are implemented in the custom fonts used by this site, and some are implemented in a typesetting pass that makes adjustments through markup and styles.

Code and math is exempt from this formatting, and a different set of rules is applied to Japanese text.

Display Text (Defunct Quaints, Embellished Ampersands & Luxurious Swashes)

Headers and other text at display sizes use the italic ampersand & rather than the roman &, allow some additional quaint ligatures that would be distracting in body text like ct or st, and use swash variants like Q.

Consecutive Capitals

Words and acronyms formed entirely of UPPERCASE LETTERS stick out from their surrounding text like shouting, so they’re instead set in SMALL CAPS. A mix of numbers, letters, and some punctuation is allowed: JPEG, 3DES, C-3PO, TTRPGs, U+2603.

A small amount of tracking has been added to small caps. However, that extra tracking is skipped with spaces, so the space in SMALL CAPS doesn’t seem overly big. And the tracking is preserved at the end with plural acronyms, such as RPGs.

Inter lacks SMALL CAPS, so runs of capital letters are set in a slightly smaller point size instead.

Figures

Old-style figures are used in most prose 123,456. A small amount of tracking has been added.

Lining figures are used in sans-serif text 123,456.

Tabular figures are used in tables so numbers line up.
Row 1123.452.3456
Row 2678.907.8901

Punctuation

"Straight quotation marks" are converted to their “curly forms” using an algorithm based on David Dunham’s Smart Quotes (external link). Ink’s version knows how to traverse DOM nodes so “quoted” works correctly.

(Parentheses), [square brackets], and {curly brackets} are too tight by default; some spacing has been added. This especially helps when they surround (italics).

EB Garamond’s ellipses are too compact by default (they are weirdly slightly tighter than three unspaced periods). The modified ellipsis uses M/4 spaces and has been kerned with ending punctuation.

a … b c… d. e…? f…! […]

Analphabetic Symbols

The x in 3× faster or 210 × 297 is replaced with the multiplication symbol, which has been lowered slightly towards the baseline to better fit with old-style figures.

-> becomes , shorthand for implies.

In Other Types, Sizes

The above adjustments may use different metrics at different sizes and for different types.

“quoted”, 3×, 123 × 456, 4 : 5, , (test) [test] {test}

“quoted”, 3×, 123 × 456, 4 : 5, , (test) [test] {test}

“quoted”, 3×, 123 × 456, 4 : 5, , (test) [test] {test}

“quoted”, 3×, 123 × 456, 4 : 5, , (test) [test] {test}

See Also
Diplograph Jaramond