A modern, geometric typeface. Influenced by other popular geometric, minimalist sans-serif typefaces of the new millenium. Designed for optimal readability at small point sizes while beautiful at large point sizes.

Metropolis has just been published by typehaus on the NPM registry! While still in experimental stages, this makes it easier than ever to include it in your projects.

pnpm add @typehaus/metropolis

Don't have PNPM? Click here to find out why you should dump NPM.

The following methods work in most of the popular frontend frameworks.

• Next.js — add it to _app.tsx or _app.jsx
• SvelteKit: add it to __layout.svelte file.
• Nuxt.js: ...consult their documentation, because I'm not quite sure 😅

You can just import the whole family, if you're into that sort of thing:

import '@typehaus/metropolis'

You can also import individual weights (recommended). Both the normal and italic style are included in each weight, and (for compatibility) both the keyword or numeric filename work just fine.

import '@typehaus/metropolis/thin.css'

import '@typehaus/metropolis/100.css'

import '@typehaus/metropolis/extralight.css'

import '@typehaus/metropolis/xlight.css'

import '@typehaus/metropolis/200.css'

import '@typehaus/metropolis/light.css'

import '@typehaus/metropolis/300.css'

import '@typehaus/metropolis/regular.css'

import '@typehaus/metropolis/book.css'

import '@typehaus/metropolis/400.css'

import '@typehaus/metropolis/medium.css'

import '@typehaus/metropolis/500.css'

import '@typehaus/metropolis/semibold.css'

import '@typehaus/metropolis/600.css'

import '@typehaus/metropolis/bold.css'

import '@typehaus/metropolis/700.css'

import '@typehaus/metropolis/extrabold.css'

import '@typehaus/metropolis/xbold.css'

import '@typehaus/metropolis/800.css'

import '@typehaus/metropolis/black..css'

import '@typehaus/metropolis/900.css'

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

With some backups, so nobody is stuck with Times New Roman:

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

Contributions welcome.