typehaus / metropolis

Modern geometric typeface, now available as a package on NPM.

Minimalist, modern, geometric typeface by Chris M. Simpson. Revived as a webfont by typehaus.

pnpm
pnpm add @typehaus/metropolis

Getting Started

You can just import the whole family (if you're into that sort of thing).

import '@typehaus/metropolis'

This will import ./index.css, which itself imports each weight from 100.css to 900.css.

What do these CSS files contain?

Each stylesheet of the numeric naming convention contains two @font-face rules (one regular, one italic). In each of those rules is Metropolis in that weight + style, formatted as woff + woff2, and encoded in base64 + utf-8. All the other CSS files simply contain @import rules which reference their associated numeric weight's file.

Using a remote CDN

Some scenarios might preclude the ability to self-host your font assets. In those situations, you can always use a remote CDN service like unpkg.com or jsdelivr.net:

import 'https://unpkg.com/@typehaus/metropolis'

The shorthand format above is intended for rapid prototyping in development environments only. Since it's using a non-deterministic asset path, its content is not definitively known nor guaranteed to remain the same. Also, if a breaking change is published, your project could suddenly break and be stuck on Times New Roman without any warning 😰

For production, you always want to pin the package version (that means no ^ or ~ or * semver prefixes), and use the long-form URL for any assets. This implies including all file extensions.

To demonstrate, this URL will always resolve to the exact same data for 100.css from v12.0.0-next.7:

import 'https://cdn.jsdelivr.net/npm/@typehaus/metropolis@12.0.0-next.7/100.css'

"Tree-shaking" and Asset Aliases

You can even import individual weights - which is highly recommended, and helps cut down on your final bundle size.

Both the normal and italic style are included in each weight, and both the keyword or numeric filename work just fine. In the cases like ExtraLight and ExtraBold, I've included a few common aliases such as xlight.css and bolder.css.

100, Thin

import '@typehaus/metropolis/100.css'

import '@typehaus/metropolis/thin.css'

200, Extra·Light, X·Light

import '@typehaus/metropolis/200.css'

import '@typehaus/metropolis/xlight.css'

import '@typehaus/metropolis/extralight.css'

import '@typehaus/metropolis/lighter.css'

300, Light

import '@typehaus/metropolis/300.css'

import '@typehaus/metropolis/light.css'

400, Book, Regular

import '@typehaus/metropolis/400.css'

import '@typehaus/metropolis/book.css'

import '@typehaus/metropolis/regular.css'

500, Medium

import '@typehaus/metropolis/500.css'

import '@typehaus/metropolis/medium.css'

600, Semi·Bold

import '@typehaus/metropolis/600.css'

import '@typehaus/metropolis/semibold.css'

700, Bold

import '@typehaus/metropolis/700.css'

import '@typehaus/metropolis/bold.css'

800, Extra·Bold, X·Bold

import '@typehaus/metropolis/800.css'

import '@typehaus/metropolis/xbold.css'

import '@typehaus/metropolis/extrabold.css'

import '@typehaus/metropolis/bolder.css'

900, Black

import '@typehaus/metropolis/900.css'

import '@typehaus/metropolis/black.css'

Implement

Now you just need to add it to your actual CSS!

html, body {
  font-family: 'Metropolis', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
}

The additional font families are “emergency backups”... that way, in the terrible (and unheard-of) event that your fonts don't load, your users won't be stuck with Times New Roman.

---

Specimens

Contributing

Please refer to these contribution guidelines before proceeding with a PR:

Submitting a Pull Request

We will only review PRs that are small and isolated and can be easily described and understood within the context of the PR rather than even needing to open it.

When saving the file for your PR close all other open tabs and leave one remaining with the added/modified glyphs visible. This makes it much easier to review PRs.

Guidelines

Please do:

• Run the autospacing on your modified/created glyph before submitting as a PR
• Add relevant bubble kern to any modified/created glyph and set up as drescribed above
• Apply to all weights and both normal/italic where appropriate

Please do not:

• Modify any autospacing settings
• Modify any other kern bubbles
• Set manual kerns (or indeed run the kerning tool at all)
• Modify any glyphs not related to your changes

As a general rule, a small isolated commit should equal a small isolated PR.