{ "name": "@typehaus/metropolis", "version": "12.0.0-next.7", "license": "Unlicense", "author": { "name": "Nicholas Berlette", "email": "nick@typehaus.org", "url": "https://typehaus.org" }, "private": false, "contributors": [ { "name": "Nicholas Berlette", "email": "nick@berlette.com", "url": "https://typehaus.org" }, { "name": "Chris M. Simpson", "email": "chris.m.simpson@icloud.com", "url": "https://github.com/chrismsimpson" } ], "repository": "typehaus/metropolis", "bugs": "https://github.com/typehaus/metropolis/issues", "homepage": "https://typehaus.org/metropolis", "packageManager": "pnpm@6.23.6", "main": "./index.css", "types": "./index.d.ts", "description": "Modern, geometric typeface. Designed by Chris M. Simpson, updated and maintained by @typehaus.", "keywords": [ "font", "type", "typeface", "metropolis", "geometric", "modern", "typehaus", "typography", "sans-serif", "glyphs", "woff", "woff2" ], "exports": { ".": { "types": "./index.d.ts", "import": "./index.css", "require": "./index.css", "default": "./index.css" }, "./index.d.ts": "./index.d.ts", "./package.json": "./package.json", "./100.css": "./100.css", "./200.css": "./200.css", "./300.css": "./300.css", "./400.css": "./400.css", "./500.css": "./500.css", "./600.css": "./600.css", "./700.css": "./700.css", "./800.css": "./800.css", "./900.css": "./900.css", "./black.css": "./black.css", "./bold.css": "./bold.css", "./bolder.css": "./bolder.css", "./book.css": "./book.css", "./extrabold.css": "./extrabold.css", "./extralight.css": "./extralight.css", "./index.css": "./index.css", "./light.css": "./light.css", "./lighter.css": "./lighter.css", "./medium.css": "./medium.css", "./regular.css": "./regular.css", "./semibold.css": "./semibold.css", "./thin.css": "./thin.css", "./xbold.css": "./xbold.css", "./xlight.css": "./xlight.css" }, "files": [ "100.css", "200.css", "300.css", "400.css", "500.css", "600.css", "700.css", "800.css", "900.css", "black.css", "bold.css", "bolder.css", "book.css", "extrabold.css", "extralight.css", "index.css", "light.css", "lighter.css", "medium.css", "regular.css", "semibold.css", "thin.css", "xbold.css", "xlight.css" ], "publishConfig": { "access": "public", "tag": "latest" }, "readme": "

\n\"Metropolis\n

\n

\n

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.

\n

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