Editorial typography

Optical-sized serifs, real vertical rhythm, and a quiet pipeline that fixes small text problems without ever rewriting what you said.

Most apps treat the words people post as a string to render. Lanai treats them as text — the kind that has rhythm, that benefits from a properly placed em dash, that deserves to be set with some care.

The body of a post on Lanai is set in a serif designed for reading, sized at the iOS body baseline of 17 points, with line height generous enough that paragraphs feel like paragraphs rather than rows in a table. Author names sit in a labeled sans-serif. Timestamps and metadata live in caption type that respects the hierarchy. Numbers — likes, replies, durations — are tabular, so columns don’t jitter as you scroll past them.

A spectrum of careful intervention

When a post arrives, Lanai applies a small amount of typographic care before showing it to you. Curly quotes where someone typed straight ones. An em dash where a sequence of hyphens lived. The kind of trailing-whitespace cleanup that no one notices until it isn’t done. None of these change what the post says. They only change how it sits on the page.

For longer posts — the kind that earn a magazine-style treatment in the post-as-image export — Lanai goes a step further: hanging punctuation, optical margin alignment, proper hyphenation, widow and orphan control. The author still wrote what they wrote. The page just helped it look its best.

Editorial typography, on the page.

Six small things a good typesetter would notice — rendered live in the page you're reading, not described.

  1. A line of body type wants room to breathe. Sufficient leading and well-mannered hyphenation keep long words from sprinting into the margin while shorter ones still walk at the pace of the rest of the paragraph.

    Generous leading & hyphenation Reading Mode · Image Export

  2. The opening quote belongs in the margin, so the first real letter sits flush with the body text underneath it. The eye prefers it that way, even when it can't say why.

    Hanging punctuation Reading Mode · Image Export

  3. Two adjacent characters that get confused all the time — the em dash and the hyphen-minus — behave very differently in running text. Lanai uses the right one in display, every time.

    Real em dashes Timeline cleanup · Tier 3

  4. “It’s the smallest thing,” she said, “and the first thing I notice.” The keyboard gives you straight quotes; the page gives them back curly, with the apostrophes you'd write yourself if you had time.

    Curly quotes & apostrophes Timeline cleanup · Tier 3

  5. A reading surface is just a room that respects the words inside it.

    Pull-quote treatment Reading Mode · Image Export

    • Posted11:14 AM
    • Reply11:47 AM
    • Quote2:08 PM

    Tabular numerals Everywhere a column of figures meets a column of figures

What cleanup looks like.

Four small repairs Lanai makes at the render layer — never on the post record, never on the network. The left column is what arrives. The right column is what you see.

  1. Straight quotes & hyphens Tier 3

    "It's the smallest thing," she said -- and the first thing I notice.

    “It’s the smallest thing,” she said — and the first thing I notice.

    Curly quotes, real apostrophes, an em dash where the keyboard typed two hyphens.

  2. Mojibake recovery Tier 1

    Café con leche, mañana. I’m running early.

    Café con leche, mañana. I’m running early.

    When UTF-8 got read as Latin-1 somewhere upstream, the page restores the original character without rewriting the post.

  3. Sentence-boundary truncation Display

    A long thought that runs past the preview boundary and ends mid-sentence with no good place for the timeline to cut it off, leaving the reader hanging on a fragment that was…

    A long thought that runs past the preview boundary and ends mid-sentence with no good place for the timeline to cut it off. More →

    When a post overflows its row, Lanai cuts at the nearest sentence boundary instead of mid-word. Tap to read the rest in its full form.

  4. Whitespace & ellipses Tier 2

    One thing led to another... and then, well... you know how it goes.

    One thing led to another… and then, well… you know how it goes.

    Three dots become one ellipsis. Runaway spaces collapse to one. Nothing said gets unsaid — the post just stops fidgeting.

Long-press any post to see the original, character for character. Lanai refines display. It doesn’t “improve.”

Hyperlegible mode

For readers who find serifs harder to parse at certain sizes — or who simply prefer letterforms designed for maximum legibility — Hyperlegible mode swaps the body and display typefaces for Atkinson Hyperlegible Next, the Braille Institute’s free variable font expressly designed to disambiguate characters that often look alike (lowercase l from the digit 1, the letter O from the digit 0, the letter G from C).

It’s filed under a setting, but it isn’t really an accommodation. Plenty of readers turn it on for reasons that have nothing to do with vision and everything to do with comfort. Faster reading, less effort, fewer little re-reads of a sentence to figure out what it actually said.

What you don’t see

You don’t see the architecture. You see paragraphs that have room to breathe, headlines that don’t shout, and text at every size that holds its shape.