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.
## Getting Started
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.
### 1. Install
```bash
pnpm add @typehaus/metropolis
```
> ***Don't have PNPM?*** [Click here to find out why you should dump NPM.](https://get.pnpm.io)
### 2. Import
The following methods work in most of the popular frontend frameworks.
- [Next.js](https://nextjs.org) — add it to `_app.tsx` or `_app.jsx`
- [SvelteKit](https://kit.svelte.dev): add it to `__layout.svelte` file.
- [Nuxt.js](https://nuxtjs.org): ...[consult their documentation](https://nuxtjs.org), because I'm not quite sure 😅
You can just import the whole family, if you're into that sort of thing:
```js
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.
100 · Thin
```js
import '@typehaus/metropolis/thin.css'
```
```js
import '@typehaus/metropolis/100.css'
```
200 · ExtraLight
```js
import '@typehaus/metropolis/extralight.css'
```
```js
import '@typehaus/metropolis/xlight.css'
```
```js
import '@typehaus/metropolis/200.css'
```
300 · Light
```js
import '@typehaus/metropolis/light.css'
```
```js
import '@typehaus/metropolis/300.css'
```
400 · Regular
```js
import '@typehaus/metropolis/regular.css'
```
```js
import '@typehaus/metropolis/book.css'
```
```js
import '@typehaus/metropolis/400.css'
```
500 · Medium
```js
import '@typehaus/metropolis/medium.css'
```
```js
import '@typehaus/metropolis/500.css'
```
600 · SemiBold
```js
import '@typehaus/metropolis/semibold.css'
```
```js
import '@typehaus/metropolis/600.css'
```
700 · Bold
```js
import '@typehaus/metropolis/bold.css'
```
```js
import '@typehaus/metropolis/700.css'
```
800 · ExtraBold
```js
import '@typehaus/metropolis/extrabold.css'
```
```js
import '@typehaus/metropolis/xbold.css'
```
```js
import '@typehaus/metropolis/800.css'
```
900 · Black
```js
import '@typehaus/metropolis/black..css'
```
```js
import '@typehaus/metropolis/900.css'
```
### 3. Implement
Now you just need to add it to your actual CSS!
With some backups, so nobody is stuck with `Times New Roman`:
```css
html, body {
font-family: 'Metropolis', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
}
```
---
## Specimens
---
### The Unlicense
Contributions welcome.