Articles

Unifora: A User’s Manual

Unifora is a sans-serif superfamily released by Yep! Type Foundry in 2026. It starts where DIN leaves off—taking the constructed logic of technical lettering and pressing it through the demands of modern screens. Industrial in spirit, optimized in execution: calibrated vertical metrics, pixel-grid alignment, and punctuation that centers itself optically against figures.

Built around a uniwidth system where all five width variants—Condensed through Expanded—share identical character advance widths, so the same text fills the same column regardless of which width is active. Made for interfaces, data displays, and responsive layouts that need to hold together across sizes and contexts—nine weights, a ±18° slant axis running both italic and retalic, and 135 static styles alongside a full three-axis variable font.

At a glance

  • Superfamily: 135 static styles (5 widths × 9 weights × 3 styles: upright, italic, retalic) + 1 variable font with three axes (wght, wdth, slnt).
  • Per-width subfamily: 27 static styles (9 weights × 3 styles) + 1 variable font with two axes (wght, slnt).
  • Five named widths: Condensed (75%), Narrow (87.5%), Normal (100%), Semiexpanded (112.5%), Expanded (125%).
  • Nine weights: Thin (100) through Black (900).
  • Slant axis range: −18° (Italic) to +18° (Retalic)—both directions, fully continuous.
  • Uniwidth design: all five width variants share identical character advance widths. A Condensed and an Expanded paragraph set in the same point size occupy exactly the same column width—the letterforms look different, the metrics are the same.
  • x-height: 70% of cap height.
  • Language support: over 250 languages using the Latin script.
  • OpenType features: 3 stylistic sets, 11 character variants, tabular figures, slashed zero, case-sensitive forms, discretionary ligatures, and ordinals.
  • UI icons: comes with a set of essential UI icons.

Vertical metrics and rendering

Unifora’s vertical metrics are calibrated so cap heights land on the pixel grid in standard-resolution contexts. Text labels sit precisely centered against icon glyphs and button containers at calibrated sizes.

An industrial edge, architectural precision

Unifora starts where DIN leaves off. It takes the constructed logic of technical lettering—the geometry, the precision, the lack of ornament—and presses it through the demands of modern screens without softening the edges.

The corner cuts aren’t just decoration. Uniwidth spacing is tight by nature, so those cuts carve out breathing room where characters would otherwise collide.

The uniwidth idea

Most variable font families treat width as compression or expansion to taste. Unifora takes a different position: width is a design parameter, not a layout variable. All five widths share identical character advance widths. The characters change—they breathe in Expanded, they’re tight and efficient in Condensed—but every character takes up the same horizontal space across the whole family.

This means a responsive layout can swap between widths at breakpoints without triggering reflow. The letters adapt to their width variant; the column width, line breaks, and layout stay fixed. A brand using Narrow for tight UI labels and Semiexpanded for editorial headings can do so without maintaining two layout systems. For interfaces where text needs to animate or respond, it’s a structural solution.

The extended slant axis

Most italics stop at 12°. Unifora goes to 18°—and it goes both ways.

The slant axis (slnt) runs from −18° (Italic) to +18° (Retalic). Italic is the familiar left-leaning slant; Retalic is its mirror—a rightward slant, more technical in character, suited to motion contexts and certain display applications. Both are oblique-style: letterforms don’t change shape, only angle.

Intermediate values—−9°, 12°, anything in between—are fully valid via font-variation-settings. Custom slant angles as static fonts can be generated on request.

Diacritics

Diacritical marks above uppercase letters are drawn at a reduced height. This keeps line spacing comfortable in all-caps text without requiring manual leading adjustments.

The letters ī, ĩ, and ï use condensed mark forms—narrow enough to sit within the tight proportions of the dotless i without crowding its neighbors.

Recommended uses

Data-dense UI

Uniwidth stability, tnum figures, smart numeric punctuation, and the Condensed width combine to make Unifora unusually capable in dashboards and tables where content must hold stable across states.

Brand systems across multiple contexts

Outdoor (Expanded reads at distance), digital UI (Condensed is efficient), print (Normal is comfortable for body)—one family handles all of it coherently.

Technical and industrial contexts

IT, engineering, logistics, production, construction, transportation: the DIN starting point, refined for modern screens.

Wayfinding

With the high-legibility set (ss02) active, character disambiguation makes Unifora a strong choice for signage and information systems. The default closed-aperture forms aren’t ideal for road signage with strict legibility requirements; enabling the high-legibility set addresses most other wayfinding contexts.

Motion and kinetic typography

Three axes animating simultaneously—weight, width, and ±18° of slant—cover a wide range of expressive motion. The design space was built for it.

Not recommended for

Humanistic, organic, or playful design directions—hospitality, children’s products, soft luxury goods.

Web development

Important note: store font files on your own server or a CDN you control. Do not upload them to public repositories—font files in a public GitHub repo are effectively unprotected, regardless of licensing.

Loading the full variable font:

CSS

@font-face {
  font-family: "Unifora";
  font-display: swap;
  src: url('/fonts/Unifora-VF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: oblique -18deg 18deg;
  font-stretch: 75% 125%;
}

Loading per-width sub-variable fonts:

CSS

@font-face {
  font-family: "Unifora Condensed";
  font-display: swap;
  src: url('/fonts/UniforaCondensed-VF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: oblique -18deg 18deg;
}

Use font-variation-settings to address axes directly—it gives you precision that font-weight, font-stretch, and font-style can’t always provide:

CSS

body {
  font-family: "Unifora", sans-serif;
  font-variation-settings: "wght" 400, "wdth" 100, "slnt" 0;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.heading-condensed { font-variation-settings: "wght" 700, "wdth" 75, "slnt" 0; }

.italic-caption { font-variation-settings: "wght" 400, "wdth" 100, "slnt" -18; }

.retalic-label { font-variation-settings: "wght" 600, "wdth" 87.5, "slnt" 18; }

Always set text-rendering: geometricPrecision and -webkit-font-smoothing: antialiased on the root element—these make Unifora’s pixel-grid metric calibration visible in WebKit-based browsers.

OpenType features: stylistic sets

Square punctuation (ss01)

Replaces round punctuation dots (periods, colons, diacritics, exclamation and question marks) with square variants. Pairs with Unifora’s geometric character; useful for technical interfaces and signage where round dots feel out of place.

CSS

font-feature-settings: "ss01" 1;

High-legibility set (ss02)

Activates character alternates for disambiguation: serifed uppercase I, serifed J, dotted i and j with serifed stems, l with a tail, slashed zero, open-bowl 4, 6, and 9. Most visible in strings like “Exit 64: Illinois” or “Ljubljana, 49 km”—exactly where a misread character has real consequences.

Recommended for wayfinding, transportation UI, alphanumeric codes, and any display where I/l/1 or 0/O ambiguity is a concern.

CSS

font-feature-settings: "ss02" 1;

Open six and nine (ss03)

Open-counter 6 and 9. More informal, more legible at small sizes.

CSS

font-feature-settings: "ss03" 1;

OpenType features: character variants

Individual alternates, combinable freely with each other and with stylistic sets:

  • cv01—Serifed uppercase I
  • cv02—Serifed J
  • cv03—G without spur
  • cv04—a with tail
  • cv05—Single-storey a
  • cv06—Double-storey g
  • cv07—Serifed i
  • cv08—Serifed j
  • cv09—Lowercase l with tail
  • cv10—y without tail
  • cv11—Open 4

CSS

font-feature-settings: "cv01" 1, "cv06" 1;

Figures and symbols

Tabular figures (tnum)

Fixed-width numerals for vertical alignment in tables, dashboards, and timers. Activate globally for any interface displaying numeric data.

CSS

font-feature-settings: "tnum" 1;

Slashed zero (zero)

Diagonal stroke through 0 to distinguish it from O. Also included in ss02.

CSS

font-feature-settings: "zero" 1;

Typographic features

Case-sensitive forms (case)

Shifts punctuation (parentheses, brackets, dashes, operators) to optically center with capital letters in all-caps text.

CSS

.allcaps {
  text-transform: uppercase;
  font-feature-settings: "case" 1;
}

Discretionary ligatures (dlig)

Includes fi, ffi, fl, ffl, and other optional combinations. Off by default.

CSS

font-feature-settings: "dlig" 1;

Ordinals (ordn)

1a → 1ª, 2o → 2º. For legal text, Portuguese or Spanish content, numbered lists.

CSS

font-feature-settings: "ordn" 1;

Smart punctuation

All behaviors are automatic—no feature activation required.

  • Time notation. The colon in ‘10:09’ centers vertically at the optical midpoint of the figures, not at the text baseline.
  • Numeric punctuation. The hyphen, en dash, and em dash each vertically center themselves against surrounding figures—‘3-4’, ‘20–30’, ‘2024—2026’ all align without manual adjustment.
  • Equations. Operators and brackets in ‘(a+b)=c’ or ‘(2+3)=5’ position themselves to align across the full expression.
  • Units. ‘km/h’, ‘24/7’—the slash receives correct optical spacing in context.

These behaviors make Unifora particularly well-suited to interfaces mixing prose and numeric content: fintech dashboards, scientific tools, transportation displays.