Articles

Innovator Grotesk: A User’s Manual

Innovator Grotesk is the debut typeface from Yep! Type Foundry, released in 2024. It’s a neo-grotesque, neutral yet distinctive, carefully crafted for a broad range of applications—from user interfaces to brand identity and outdoor design. It’s especially optimized for on-screen use.

At a glance

  • 18 font styles: 9 weights with 9 corresponding obliques.
  • Font weights range from Thin (100) to Black (900).
  • Includes a single variable font encompassing all 18 styles.
  • Obliques have a 12° slant angle.
  • Lowercase letters are 75% as tall as uppercase ones.
  • Supports over 250 languages that use the Latin script.
  • Includes 3 stylistic sets and 15 character alternates.
  • OpenType features include tabular figures, case-sensitive forms, ordinals, ligatures, and short-tail alternates.
  • Comes with a set of UI icons.

Character and purpose

Innovator Grotesk leans toward a formal, contemporary, and technical vibe, with geometric, mechanical, and industrial qualities. It’s less suited for fun, historical, humanistic, organic, or natural designs. This makes it a great fit for IT companies, as well as brands in production, design, construction, and similar industries.

UI DESIGN

Innovator Grotesk shines in user interfaces for web, mobile, and desktop apps. With vertical metrics that ensure text labels appear vertically centered on buttons and alongside icons, a tall x-height (75% of cap height), extra optimization for the pixel grid, and precise hinting, this typeface is the perfect on-screen workhorse.

BRAND IDENTITY

It’s neutral enough for plain text, yet it offers subtle, distinct details that make it both recognizable and memorable—key qualities for strong branding.

WAYFINDING

Due to its relatively close apertures, I wouldn’t recommend it for designs with strict requirements for character distinctiveness, like road signage. However, thanks to the high-legibility set, I’d definitely give it a shot in wayfinding systems and designs where the requirements aren’t as strict.

Font formats

By default, choose the variable font over static font files. For desktop use, go with InnovatorGrotesk-VF.ttf. For web development, the best option is InnovatorGrotesk-VF.woff2 (refer to the relevant section below).

If you’re using static font files, prefer ‘ttf’ for Windows and ‘otf’ for Mac.

Web development

Important note: Store font files securely on your server or CDN, ensuring they’re not freely accessible. For example, avoid uploading them to GitHub.

@font-face {
  font-family: "Innovator Grotesk";
  font-display: swap;
  src: url('https://your-cdn.dev/InnovatorGrotesk-VF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
}

When using the variable version of Innovator Grotesk, it’s better to adjust the font’s weight and slant angle using the font-variation-settings property rather than font-weight or font-style.

body {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "wght" 400, "ital" 0;
}

You can specify any value between 100 and 900 for the weight axis and between 0 and 1 for the italic axis. Here are a few examples:

font-variation-settings: "wght" 700, "ital" 1; /* Bold Italic */
font-variation-settings: "wght" 100, "ital" 0.5; /* Thin and half-slanted */

Additionally, I recommend setting the text-rendering property to geometricPrecision and -webkit-font-smoothing to antialiased. This configuration enhances text rendering quality, making it look sharper and more precise.

body {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  /* ... */
}

Stylistic sets and character variants

Innovator Grotesk offers 3 stylistic sets and 15 character variants, allowing you to customize the typeface’s look and feel.

Explore more about these alternates in the Update: Innovator Grotesk v1.1.

Stylistic sets:

  1. Round punctuation
  2. High-legibility set
  3. Regular numerals

Character variants:

  1. Serifed uppercase I
  2. Serifed J
  3. Straight terminal J
  4. G without a spur
  5. Curved leg R
  6. a with a tail
  7. Single-storey a
  8. Double-storey g
  9. Serifed i
  10. Serifed j
  11. Lowercase l with a tail
  12. Regular 1
  13. Open 4
  14. Regular 6
  15. Regular 9
You can also experiment with all possible combinations—even if you don’t own the font—using the Innovator Grotesk feature guide.