HOPE
A type system for social innovation work: websites, dashboards and apps from one set of roles.
Constraints
- No exaggerated scale. The ratio is 1.21, shallow enough that the largest role is 44px rather than 90. The scale carries structure and nothing else.
- Visual contrast means something. Three ink tiers, each with a fixed job. No fourth tier, no decorative weight change, no size difference that is not a level difference.
- Density flexes; the type does not. Density multiplies the spacing ladder and leaves the scale alone, so a component written once behaves on a dashboard and on a reading page.
- Usable by humans and by models. Roles and lockups are named by job, the rules are written out alongside the tokens, and nothing depends on taste to apply correctly.
- Dense without being cramped. Measure at 66ch, leading at 1.65. Space groups; it does not decorate.
Character
HOPE sits between four registers. The mix is constant; the vibes below adapt it to a surface, they do not change it.
- Swiss. Neutral grotesque, shallow ratio, flush left, hierarchy on weight rather than size.
- Technical. Monospace for labels, eyebrows, metadata and units. Tabular figures everywhere.
- Soft. Generous leading at 1.65, low weight contrast, two weights only, sentence case headings.
- Terminal, slightly. Uppercase tracked monospace, but only on labels and table headers.
Two weights carry the system: 400 and 600. 700 is not used, because heavy display weight reads as emphasis for its own sake.
Fonts
Five sets, each supplying a sans, a serif and a mono. Switching sets changes three declarations in hope-tokens.css and nothing else.
IBM Plex, the default
Sans, Serif and Mono from one skeleton:
- A superfamily. Removes the pairing decision permanently and gives a rule that can be followed without judgement.
- Natively uniform digits. Verified from the font binary: every numeral is 600 units wide, and there is no tnum feature because none is needed. For work full of measurements, that removes a category of table bug.
- Institutional without being corporate. A humanist grotesque with enough irregularity to feel authored. The register of a working document rather than a pitch deck.
- Engineered without costume. Confident and unfussy rather than decorated.
- Open licence, eight weights with italics, actively maintained, and a condensed cut for dashboards.
What the other sets give you
Inter and Atkinson Hyperlegible are also available above. Atkinson is drawn for low vision and is the strongest choice if accessibility is a stated requirement.
Settings
Set as attributes on any container. The export at the end reflects the current settings.
A vibe reassigns families and nudges the scale. It never changes a role name, a lockup or a class, so a page can move from interface to reading without any markup changing.
Roles
Fourteen roles, each a locked bundle. The table is read from the live CSS, so it cannot drift from the files.
Lockups
Fourteen lockups, each a class in hope-lockups.css. All obey the same four rules: internal gap smaller than external, one dominant element, exactly two axes of difference, one shared edge.
Greyscale
Three ink tiers and three surfaces. Every ink passes 4.5:1 against every surface in both themes. Starting greyscale makes colour an addition later rather than a repair, and forces hierarchy onto size, weight and position.
ink-1 is the content. ink-2 is support: decks, secondary copy, values you still read. ink-3 is chrome: labels, metadata, units, table headers. There is no fourth tier; a fourth tier is an unresolved hierarchy question.
Surfaces
The same roles and lockups arranged three ways. Nothing here uses a class outside the two CSS files.
Files and usage
Loading
Rules of use
- Put hope-root on the container that owns the type. It sets family, base size, colour and tabular figures.
- Apply a role class to every piece of text. If no role fits, add a role rather than setting a size inline.
- Use hope-prose for CMS or Markdown content, where you cannot put classes on individual elements.
- Set spacing with the hope-stack utilities or the --hope-space-* tokens. Choose by relationship, not by eye.
- Vibe and density can be set per section. A dashboard panel inside an essay carries data-vibe="data" on its own wrapper.
Governing rules
Tokens give the values. These give what they mean and what happens when they change.
- A role is a locked bundle. Never set size, weight, leading, tracking, colour or measure outside a role. If nothing fits, add a role.
- New job, new role. New screen, no new role. Two roles that always render identically are one role with two names.
- Hierarchy runs on one axis at a time. Size for level changes, weight for peer-level distinction, ink tier for de-emphasis. Never all three at once.
- Every visual difference must be a semantic difference. If two things look different and mean the same thing, one of them is wrong.
- Space belongs to the element below it, chosen by relationship strength from the ladder.
- Space above a heading is two to three times the space below it. The heading belongs to what follows.
- Density changes spacing only. Never scale type to fit more in; change the density token.
- Measure in ch, leading unitless, component padding in em. A size change then propagates instead of breaking three other decisions.
- Metric numerals sit on their own scale and may break the ratio. A metric is data, not a heading.
- Colour never carries meaning alone. Pair it with a glyph, a weight change or a word. The system is greyscale so this holds by default.
- Three ink tiers, no more. A fourth tier means the hierarchy is unresolved.
- Stress every role before shipping it: longest realistic string, empty, forced two-line wrap, and a translation 30% longer.