@typehaus/metropolis
Version:
Modern, geometric typeface. Designed by Chris M. Simpson, updated and maintained by @typehaus.
109 lines • 6.51 kB
JSON
{
"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": "<h1 align=\"center\">\n<a href=\"https://typehaus.org/metropolis\" target=\"_blank\" rel=\"noopener external\"><img src=\"https://cdn.jsdelivr.net/gh/typehaus/metropolis/.github/assets/logo.png\" alt=\"Metropolis from TypeHaus\" align=\"center\" title=\"View the Metropolis Docs at typehaus.org\"></a>\n</h1>\n<h4 align=\"center\">\n<p>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.</p>\n</h4>\n<br>\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<br>\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<br>\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<br>\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<br>\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<details open><summary>100 · Thin</summary>\n\n```js\nimport '@typehaus/metropolis/thin.css'\n```\n\n```js\nimport '@typehaus/metropolis/100.css'\n```\n\n</details>\n<details><summary>200 · ExtraLight</summary>\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</details>\n<details><summary>300 · Light</summary>\n\n```js\nimport '@typehaus/metropolis/light.css'\n```\n\n```js\nimport '@typehaus/metropolis/300.css'\n```\n\n</details>\n<details><summary>400 · Regular</summary>\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</details>\n<details><summary>500 · Medium</summary>\n\n```js\nimport '@typehaus/metropolis/medium.css'\n```\n\n```js\nimport '@typehaus/metropolis/500.css'\n```\n\n</details>\n<details><summary>600 · SemiBold</summary>\n\n```js\nimport '@typehaus/metropolis/semibold.css'\n```\n\n```js\nimport '@typehaus/metropolis/600.css'\n```\n\n</details>\n<details><summary>700 · Bold</summary>\n\n```js\nimport '@typehaus/metropolis/bold.css'\n```\n\n```js\nimport '@typehaus/metropolis/700.css'\n```\n\n</details>\n<details><summary>800 · ExtraBold</summary>\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</details>\n<details><summary>900 · Black</summary>\n\n```js\nimport '@typehaus/metropolis/black..css'\n```\n\n```js\nimport '@typehaus/metropolis/900.css'\n```\n\n</details>\n\n<br>\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\n\n\n\n--- \n\n### The Unlicense\n\nContributions welcome.\n"
}