Why Ninety Letters looks the way it does
Ninety Letters is a small Columbus ministry that pairs volunteers with men and women in Ohio prisons and forwards every letter through one P.O. box. The site is built like correspondence: a letter opens it, the type comes from a typewriter, and the colors come from an airmail envelope.
- Built for
- Church members and neighbors thinking about writing to someone inside for the first time, plus families of incarcerated people who want their loved one to get mail.
- Navigation
- Contents column. A right-hand contents list tracks where you are on long pages, the way a well-made book or report does.
- Pages
- Start, Write a letter, Mail-room rules, From the inside, Writing nights, Stamps & paper
- Hero
- A personal letter from the pastor or director as the opening: a greeting, two or three short paragraphs and a handwritten-style signature, with their portrait. Variants: a = the letter on a sheet with the portrait overlapping its left edge; b = an editor's-letter layout with a huge greeting, two text columns and a small captioned portrait
Typography
Courier Prime carries every headline because the typewriter is still the voice of prison paperwork: request slips, chaplain's memos, the notice that comes back when a letter is rejected. Literata, a book serif drawn for long reading on screens, sets the body at 18px so the longer explanations feel like a letter rather than a form. Homemade Apple appears in exactly one place, Marjorie's signature, because a handwritten name is the point of the whole ministry.
Color
The palette is an airmail envelope: ballpoint blue for links and actions, the red of the striped border for small accents, and a cool onionskin gray for the page. We kept the paper cool on purpose so it never drifts into the cream-and-brown of a heritage brand. At night the page becomes a desk under a lamp, deep navy with the blue lifted so links stay above 4.5:1.
Layout and navigation
The contents column on the right lists every section of the page you are on, the way a writer's guide would. People who come here are usually deciding something careful (am I allowed to send photos, will they know my address) and the column lets them jump to the answer without hunting. The writing-night action stays in that column on every page.
The hero
The home page opens with a letter from Marjorie Telfair, the director, because that is how the ministry itself started: one page about tomato plants sent to a stranger in 2009. A letter from a real person says more about what we ask of volunteers than any headline could, and it sets the tone for writing plainly.
Calls to action
The main action is "Write your first letter", because the hardest step is the first page. Secondary actions are equally concrete: come to a writing night, read the mail-room rules, pay for a book of stamps. We avoided the word donate on the giving page and talk about stamps, envelopes and paper, which is what the money actually buys.
Photography
There are very few photographs, and none of incarcerated people. We do not show faces from inside without consent, so the images are hands, paper, Bibles passed across a table and the fence line, used sparingly. Portraits are of volunteers and staff who agreed to be pictured.
Accessibility
Body text is 18px with generous line spacing for the many older volunteers who write with us. The typewriter face is used only for headings and never for long paragraphs. Every form field has a visible label, the contents list is a real ordered list, and colors pass contrast in both light and dark themes.
Type system
- DisplayCourier PrimeCourier Prime is a careful redraw of the typewriter face that every prison form, chaplain's memo and mail-room notice is still typed in, which makes the headlines feel like they came out of the same machine as the letters.
- TextLiterataLiterata was drawn for long reading on screens, and its warm book serif sits comfortably beside the typewriter without competing with it.
- AccentHomemade AppleUsed only for signatures, because every letter we forward ends with a name written by hand.
Colour and contrast
Every text pairing is checked against WCAG 2.2 in both themes.
Light theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 14.06:1 | AAA |
| Body text on cards | Aa | 15.53:1 | AAA |
| Secondary text | Aa | 5.61:1 | AA |
| Links | Aa | 8.42:1 | AAA |
| Button text | Aa | 9.65:1 | AAA |
| Accent label text | Aa | 5.43:1 | AA |
| Text on dark bands | Aa | 14.06:1 | AAA |
| Muted text on dark bands | Aa | 7.55:1 | AAA |
| Text on brand bands | Aa | 9.65:1 | AAA |
| Muted text on brand bands | Aa | 6.19:1 | AA |
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 14.76:1 | AAA |
| Body text on cards | Aa | 13.31:1 | AAA |
| Secondary text | Aa | 6.59:1 | AA |
| Links | Aa | 8.91:1 | AAA |
| Button text | Aa | 9.28:1 | AAA |
| Accent label text | Aa | 7.42:1 | AAA |
| Text on dark bands | Aa | 15.74:1 | AAA |
| Muted text on dark bands | Aa | 8.01:1 | AAA |
| Text on brand bands | Aa | 9.28:1 | AAA |
| Muted text on brand bands | Aa | 5.59:1 | AA |
