{"id":9524568,"url":"https://github.com/typehaus/metropolis","last_synced_at":"2025-08-23T04:32:09.792Z","repository":{"id":57684475,"uuid":"477168434","full_name":"typehaus/metropolis","owner":"typehaus","description":"Modern geometric typeface, now available as a package on NPM.","archived":false,"fork":false,"pushed_at":"2022-04-24T06:59:16.000Z","size":12042,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-11-30T01:09:08.880Z","etag":null,"topics":["css","font","fonts","metropolis","typeface","typehaus","typography","webfont","webfonts","woff2"],"latest_commit_sha":null,"homepage":"https://metropolis.typehaus.org","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/typehaus.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":".github/contributing.md","funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-02T20:50:39.000Z","updated_at":"2024-09-18T14:49:44.000Z","dependencies_parsed_at":"2022-09-13T20:51:11.377Z","dependency_job_id":null,"html_url":"https://github.com/typehaus/metropolis","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typehaus%2Fmetropolis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typehaus%2Fmetropolis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typehaus%2Fmetropolis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typehaus%2Fmetropolis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/typehaus","download_url":"https://codeload.github.com/typehaus/metropolis/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230665286,"owners_count":18261494,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","font","fonts","metropolis","typeface","typehaus","typography","webfont","webfonts","woff2"],"created_at":"2024-05-12T22:12:04.551Z","updated_at":"2024-12-21T01:31:34.508Z","avatar_url":"https://github.com/typehaus.png","language":"Python","readme":"\u003ch1 align=center\u003e\n\u003ca href=\"https://typehaus.org/metropolis\" title=\"View the Metropolis docs at typehaus.org\"\u003e\u003cimg src=\"https://cdn.jsdelivr.net/gh/typehaus/metropolis/.github/assets/logo.png\" alt=\"@typehaus/metropolis\" align=\"center\" title=\"typehaus.org/metropolis\" width=\"500\"\u003e\u003c/a\u003e\n\u003c/h1\u003e\n\n\u003cdiv align=center\u003e\n\u003ch5\u003eMinimalist, modern, geometric typeface by \u003ca href=\"https://github.com/chrismsimpson\"\u003eChris M. Simpson\u003c/a\u003e. Revived as a webfont by \u003ca href=\"https://github.com/typehaus\"\u003e\u003cstrong\u003e\u003ccode\u003etypehaus\u003c/code\u003e\u003c/strong\u003e\u003c/a\u003e.\u003c/h5\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003cdiv align=center\u003e\n\u003cimg src=\"https://badgen.net/npm/v/@typehaus/metropolis?icon=npm\u0026label=\u0026color=red\u0026labelColor=red\" alt=\"Latest Version\"\u003e\n\u003cimg src=\"https://badgen.net/packagephobia/install/@typehaus/metropolis?icon=packagephobia\u0026label=\u0026color=8cc055\u0026labelColor=8cc055\" alt=\"Size\"\u003e\n\u003cimg src=\"https://badgen.net/npm/types/@typehaus/metropolis?icon=typescript\u0026color=cyan\u0026labelColor=cyan\u0026label=\"\u003e\n\u003cbr\u003e\u003cbr\u003e\n\n| \t\t\t**pnpm** \t\t\t|\n|:-----------------------------------------------------:|\n| \u003cpre\u003e\u003ccode\u003epnpm add @typehaus/metropolis\u003c/code\u003e\u003c/pre\u003e |\n\n\u003c/div\u003e\u003cbr\u003e\n\n## Getting Started\n\nYou can just import the whole family (if you're into that sort of thing).\n\n```js\nimport '@typehaus/metropolis'\n```\n\nThis will import `./index.css`, which itself imports each weight from `100.css` to `900.css`.\n\n### What do these CSS files contain?\n\nEach stylesheet of the numeric naming convention contains **two** `@font-face` rules (one `regular`, one `italic`).\nIn each of those rules is Metropolis in that weight + style, formatted as `woff` + `woff2`, and encoded in `base64` + `utf-8`.\nAll the other CSS files simply contain `@import` rules which reference their associated numeric weight's file.\n\n\n### Using a remote CDN\n\nSome 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**](https://cdn.jsdelivr.net/npm/@typehaus/metropolis@latest) or [**jsdelivr.net**](https://jsdelivr.net/npm/@typehaus/metropolis):\n\n```js\nimport 'https://unpkg.com/@typehaus/metropolis'\n```\n\nThe shorthand format above is intended for rapid prototyping in **development** environments only. Since it's using\na *non-deterministic* asset path, its content is not definitively known nor guaranteed to remain the same. Also, if a breaking\nchange is published, your project could suddenly break and be stuck on Times New Roman without any warning 😰\n\nFor production, you always want to pin the package version (that means no `^ or ~ or *` semver prefixes), and use the long-form \nURL for any assets. This implies including **all** file extensions.  \n\nTo demonstrate, this URL will **always** resolve to the exact same data for `100.css` from `v12.0.0-next.7`:\n\n```js\nimport 'https://cdn.jsdelivr.net/npm/@typehaus/metropolis@12.0.0-next.7/100.css'\n```\n\n\u003cbr\u003e\n\n### \"Tree-shaking\" and Asset Aliases\n\nYou can even import individual weights - which is **highly recommended**, and helps cut down on your final bundle size.  \n\nBoth 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`.\n\n\u003cdetails open\u003e\u003csummary\u003e100, Thin\u003c/summary\u003e\n\n```js\nimport '@typehaus/metropolis/100.css'\n```\n\t\n```js\nimport '@typehaus/metropolis/thin.css'\n```\n\n\u003c/details\u003e\u003cdetails\u003e\u003csummary\u003e200, Extra·Light, X·Light\u003c/summary\u003e\n\n\n```js\nimport '@typehaus/metropolis/200.css'\n```\n\n```js\nimport '@typehaus/metropolis/xlight.css'\n```\n\n```js\nimport '@typehaus/metropolis/extralight.css'\n```\n\n```js\nimport '@typehaus/metropolis/lighter.css'\n```\n\n\u003c/details\u003e\u003cdetails\u003e\u003csummary\u003e300, Light\u003c/summary\u003e\n\n\n```js\nimport '@typehaus/metropolis/300.css'\n```\n\n```js\nimport '@typehaus/metropolis/light.css'\n```\n\n\u003c/details\u003e\u003cdetails\u003e\u003csummary\u003e400, Book, Regular\u003c/summary\u003e\n\n```js\nimport '@typehaus/metropolis/400.css'\n```\n\n```js\nimport '@typehaus/metropolis/book.css'\n```\n\n```js\nimport '@typehaus/metropolis/regular.css'\n```\n\n\u003c/details\u003e\u003cdetails\u003e\u003csummary\u003e500, Medium\u003c/summary\u003e\n\n```js\nimport '@typehaus/metropolis/500.css'\n```\n\n```js\nimport '@typehaus/metropolis/medium.css'\n```\n\n\u003c/details\u003e\u003cdetails\u003e\u003csummary\u003e600, Semi·Bold\u003c/summary\u003e\n\n```js\nimport '@typehaus/metropolis/600.css'\n```\n\n```js\nimport '@typehaus/metropolis/semibold.css'\n```\n\n\u003c/details\u003e\u003cdetails\u003e\u003csummary\u003e700, Bold\u003c/summary\u003e\n\n```js\nimport '@typehaus/metropolis/700.css'\n```\n\n```js\nimport '@typehaus/metropolis/bold.css'\n```\n\n\u003c/details\u003e\u003cdetails\u003e\u003csummary\u003e800, Extra·Bold, X·Bold\u003c/summary\u003e\n\n```js\nimport '@typehaus/metropolis/800.css'\n```\n\n```js\nimport '@typehaus/metropolis/xbold.css'\n```\n\n```js\nimport '@typehaus/metropolis/extrabold.css'\n```\n\n```js\nimport '@typehaus/metropolis/bolder.css'\n```\n\n\u003c/details\u003e\u003cdetails\u003e\u003csummary\u003e900, Black\u003c/summary\u003e\n\n```js\nimport '@typehaus/metropolis/900.css'\n```\n\n```js\nimport '@typehaus/metropolis/black.css'\n```\n\n\u003c/details\u003e\n\n### Implement\n\nNow you just need to add it to your actual CSS!\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\u003e *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`*.\n\n\u003cbr\u003e\u003chr\u003e\u003cbr\u003e\n\n## Specimens\n\n![Metropolis](https://cdn.jsdelivr.net/gh/typehaus/metropolis/docs/specimens/Metro-1.png)\n\n![Metropolis](https://cdn.jsdelivr.net/gh/typehaus/metropolis/docs/specimens/Metro-2.png)\n\n## Contributing\n\nPlease refer to these contribution guidelines before proceeding with a PR:\n\n### Submitting a Pull Request\n\nWe 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.\n\nWhen 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.\n\n### Guidelines\n\nPlease **do**:\n\n- Run the autospacing on your modified/created glyph before submitting as a PR\n- Add relevant bubble kern to any modified/created glyph and set up as drescribed above\n- Apply to all weights and both normal/italic where appropriate\n\nPlease **do not**:\n\n- Modify any autospacing settings\n- Modify any other kern bubbles\n- Set manual kerns (or indeed run the kerning tool at all)\n- Modify any glyphs not related to your changes\n\nAs a general rule, a small isolated commit should equal a small isolated PR. \n\n","funding_links":[],"categories":["Fonts on GitHub (Excluding Google Fonts)"],"sub_categories":["Eras of Printing Technology"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftypehaus%2Fmetropolis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftypehaus%2Fmetropolis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftypehaus%2Fmetropolis/lists"}