01 — The face
Mona Sans
By GitHub, under the SIL Open Font License. One family covers everything — a display cut for headlines, the regular cut for body, and a monospace companion for figures.
Free, open source, about a minute to install. Both the sans and the mono are in the same release.
That link always resolves to the current release, so it never goes stale. Full feature documentation is at github/mona-sans.
Install it before you start. The realistic failure is not someone picking the wrong weight — it is someone skipping the install and substituting a system font, with everything that follows being subtly off. Tradeify hosts no copy and ships none in its bundles, so the link above always resolves to current files.
02 — Styles
Two styles, one exception
Expressed as axis coordinates rather than style names. Style names are ambiguous between applications; coordinates are not.
Funded accounts, real capital
Pass the evaluation once and the account is yours — no repeat fees and no reset charges.
1,204.50 · −318.00 · 10,880.00
Copy this
The complete setup
Most people will take this block and nothing else, so it is complete: both families, the feature string and the variation settings.
Note the weight. Mona Sans defaults to wght 200, and
font-variation-settings replaces the whole coordinate string
rather than merging — so every rule that touches one axis must restate
them all, or text renders as ExtraLight.
/* Mona Sans — github.com/github/mona-sans — SIL OFL 1.1 */
@font-face {
font-family: 'Mona Sans';
src: url('MonaSansVF[wdth,wght,opsz,ital].woff2') format('woff2-variations');
font-weight: 200 900;
font-stretch: 75% 125%;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Mona Sans Mono';
src: url('MonaSansMonoVF[wdth,wght].woff2') format('woff2-variations');
font-weight: 200 900;
font-stretch: 75% 125%;
font-style: normal;
font-display: swap;
}
/* One feature string, applied to BOTH families.
ss08 is off deliberately — see below. */
body {
font-family: 'Mona Sans', system-ui, sans-serif;
font-feature-settings: 'ss01' on, 'ss03' on, 'ss05' on;
font-variant-numeric: tabular-nums;
/* Body. The font's own default weight is 200, so wght must
always be stated or text renders as ExtraLight. */
font-variation-settings: 'wght' 400, 'wdth' 100, 'opsz' 20;
letter-spacing: 0;
}
/* Headline */
h1, h2, h3 {
font-variation-settings: 'wght' 600, 'wdth' 112.5, 'opsz' 72;
letter-spacing: -0.01em;
}
/* Mono — numeric data only. No opsz axis on this family. */
.mono {
font-family: 'Mona Sans Mono', ui-monospace, monospace;
font-variation-settings: 'wght' 400, 'wdth' 100;
}03 — Detail
Three stylistic sets
Mona Sans has ten. Tradeify enables three. The difference is subtle enough to pass unnoticed and obvious enough to look wrong once seen.
Tradeify"ss01" on, "ss03" on, "ss05" on
Available capital · Portugal · a global grid
Mona Sans defaultsnormal
Available capital · Portugal · a global grid
ss01Squares the dot on i and j, and every diacritical dot.ss03Adds a tail to lowercase l, so it cannot be read as a 1 or an I.ss05Swaps the single-storey a for a double-storey one.
Leave ss08 off
The one people break
ss08 adds a straight bar to the tabular zero. Tradeify does
not want it. Leaving it off, with tabular-nums on, already
gives tabular figures with a plain zero — with no font modification and
nothing to maintain.
This is the single most likely thing for someone to break by helpfully enabling everything.
- ss01 · on Square dots — the dot on a plain i and j, and every diacritic.
- ss03 · on Lowercase l with a tail, so it cannot read as a 1 or an I.
- ss05 · on Double-storey a.
- ss08 · off Would add a straight bar to the tabular zero.
- All others · off ss02, ss04, ss06, ss07, ss09, ss10.
One string
The mono uses the same one
Do not write a second feature string. The numbering does diverge —
ss07 and ss10 mean different things in the mono,
and ss08 does not exist there — but the three sets Tradeify
enables map to the same three features in both families.
Monospace already solves character disambiguation through fixed advance widths. Two strings would mean two things to document, two to misapply and two to drift apart.
04 — Mono
Numbers, and only numbers
Right-aligned figures in a table are the entire reason mono is in the system.
| Account | Realised | Unrealised | Net |
|---|---|---|---|
| Evaluation — 50K | 1,204.50 | −318.00 | 886.50 |
| Evaluation — 100K | −640.25 | 1,905.75 | 1,265.50 |
| Funded — 150K | 10,880.00 | 0.00 | 10,880.00 |
| Total | 11,444.25 | 1,587.75 | 13,032.00 |
Not for
Where mono must not go
Not body copy. Not headlines. Not labels, captions or navigation. Not for signalling a technical mood — monospace is routinely abused as decoration in fintech, and Tradeify does not do it. If the content is not a number in a column, set it in the sans.
- Slashed zero The mono’s default zero carries a slash and the sans’s does not. Intended — removing it would need a second feature string. Do not add
ss10to “fix” it; in the sans that feature is J with bowl. - tabular-nums Redundant on mono — every glyph already shares an advance width, and the mono implements no
tnumfeature at all. Harmless if applied.
05 — Latitude
Exceptional use
Condensed and SemiCondensed widths, and weights above 600, are permitted — with a reason.
- Good reasons A tight lockup where the standard width will not fit, a large numeric display, deliberate editorial impact on a single element.
- Not reasons Variety, emphasis that weight already handles, or making a page look busier.
- The test If you cannot say what the exception is doing, use the two styles.