font-variation-settings: "wght" 400, "slnt" 0;
A precise neo-grotesk, tuned for interfaces. True optical rounds, strokes that thin where they meet, flat-cut terminals, and spacing set for 12 to 16 pixels. Free and open source.
Manhattan UI was drawn for the text interfaces are made of: labels, settings, tables, notifications. These are real layouts set in it, not pictures.
Settings
Wednesday, November 11
9:41
Calendarnow
Design review moved to 2:30 PM, Room 4B
Bank8m ago
Payment of $1,249.50 to Hudson Supply received.
Transit21m ago
Your 6 train is 4 minutes away at Astor Place.
Revenue, November
$48,920.15
+12.4% vs October
| Date | Customer | Plan | Amount |
|---|---|---|---|
| Nov 11 | Hudson Supply | Team | $1,249.50 |
| Nov 10 | Canal Street Press | Studio | $179.00 |
| Nov 10 | Atlas Mapping | Team | $1,249.50 |
| Nov 9 | Lenox Avenue Labs | Solo | $39.00 |
| Nov 8 | Bowery & Co. | Studio | $716.00 |
The same spacing that keeps a label crisp keeps a paragraph even. Set at 18 and 16 pixels.
In 1811, New York's commissioners laid a grid over an island that was still mostly farms and hills: twelve avenues running its length, 155 streets crossing them, every block a plain rectangle. It is tilted about 29 degrees from true north, to follow the island instead of the compass.
Critics called it monotonous. It turned out to be the opposite: a quiet, regular system that lets everything built on it stand out, from a brownstone to a tower. Broadway, older than the plan, still cuts across it on a diagonal, and the places where it does became squares. Manhattan UI borrows the idea. Its letters are regular on purpose, so the words you set in them carry the meaning. The angle of the grid shows up once, in the cut at the top of the t and the flag of the 1.
Manhattan UI belongs to the neo-grotesk family of ideas: even widths, low contrast, closed-ish shapes, nothing decorative. Each letter is drawn from measured rules, then tuned for screens. Five things to look for.
Every round is an optical curve, slightly squarer than an ellipse, with points only at its extremes. Where a curve meets a stem (the shoulders of n, m and h, the bowls of b, d, p and q) the stroke thins, so joins stay open as the weight climbs. Drag the weight and watch the joins.
nmhbdpqa
c, e, s, a, C, G, S and the figures 2, 3, 5, 6 and 9 end in horizontal cuts, parallel to the baseline, with the stroke tapering into the cut. It is the classic neo-grotesk finish. The guides mark the baseline, x-height and cap height.
cesaCGS
The gaps in c, e, s and a sit a third of the way from the classic closed forms toward a UI face. They still read as neo-grotesk, and they hold up at 11 pixels, where an e can turn into a c. Compare the sizes below.
ecsa CGS
Settings, Access, Messages, Success: 11px
Settings, Access, Messages, Success: 13px
Settings, Access, Messages, Success: 16px
A few small decisions give the face its voice. The R leg is straight and lands right under the bowl. The t top and the 1 flag share one 29° cut, the angle of Manhattan's street grid. Ascenders rise above the caps, so l stands taller than I. Dots are square.
Figures are spaced for reading by default, so 1,147 sits evenly in a sentence. Turn on tnum and every figure takes one width, so prices, timers and tables line up. The 1 has a flag and the 0 is narrower than O. Arrows are drawn at figure height.
12:30 ←→
$1,111.10
$8,094.67
$70,512.39
Every character in the current build, read from the font itself. Hover or focus a cell to inspect it. Arrow keys move between cells.
Turn each feature on and off. The top line is the default, the bottom line has the feature applied. In CSS, use font-feature-settings with the tag shown.
Six named weights, each with a slanted twin, and every value in between. One line of Manhattan for each.
One file covers every weight and slant. Spacing is set for text at 12 to 16 pixels. Above that, tighten it a little. The table gives the amount, measured for this face.
@font-face {
font-family: "Manhattan UI";
src: url("ManhattanUI-VF.woff2") format("woff2");
font-weight: 100 900;
font-style: oblique 0deg 12deg;
font-display: swap;
}
body { font-family: "Manhattan UI", system-ui, sans-serif; }
/* headings: tighten with size */
h1 { font-size: 64px; letter-spacing: -0.015em; }
/* all-caps labels: capital spacing */
.label { text-transform: uppercase; font-feature-settings: "cpsp"; }
/* prices and tables */
.amount { font-variant-numeric: tabular-nums; }| Size | letter-spacing |
|---|---|
| 12px | +0.002em |
| 16px | 0 |
| 24px | −0.004em |
| 32px | −0.007em |
| 48px | −0.012em |
| 64px | −0.015em |
| 96px | −0.019em |
| 160px and up | −0.021em |
Yes. The SIL Open Font License lets you use it in apps, sites, products, logos and print, commercial or not, and bundle or embed it. The one thing you cannot do is sell the font files on their own.
English and the other Western European languages that use the Latin-1 set: accented vowels, ç, ñ, ß, æ, ø and the rest, plus the punctuation, currency, fractions and symbols everyday text needs. Central and Eastern European letters are planned.
Use the variable font on the web: one file, every weight and slant. The download also has a static file for each of the twelve named styles, for apps that do not handle variable fonts. On a desktop the variable font installs as Manhattan UI Variable, so both can sit side by side.
The fonts are not hinted yet. Modern Windows apps render them smoothly; older ones can look softer at small sizes. Hinted static files are on the list before the first stable release.
Every glyph is drawn from code: one parametric outline per letter, three masters from Thin to Black, upright and slanted. Shapes and spacing are checked on every build against measurements of the genre, letter by letter and pair by pair, and read by eye at large and small sizes.
Manhattan UI is licensed under the SIL Open Font License 1.1. Use it in apps, sites, print, logos and products, commercial or not. Bundle it, embed it, modify it. The one thing you cannot do is sell the font files on their own.
@font-face {
font-family: "Manhattan UI";
src: url("ManhattanUI-VF.woff2") format("woff2");
font-weight: 100 900;
font-style: oblique 0deg 12deg;
font-display: swap;
}
/* serifed I, tailed l, slashed zero */
.code {
font-feature-settings: "ss03";
}