{"id":15980680,"url":"https://github.com/drwpow/google-font-metrics","last_synced_at":"2025-04-04T18:44:49.293Z","repository":{"id":66331287,"uuid":"202906291","full_name":"drwpow/google-font-metrics","owner":"drwpow","description":"Database of CSS font values","archived":false,"fork":false,"pushed_at":"2019-08-19T13:43:28.000Z","size":111,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-10T04:17:34.941Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://google-font-metrics.powers.now.sh/","language":"JavaScript","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/drwpow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-17T16:33:56.000Z","updated_at":"2023-12-31T10:10:44.000Z","dependencies_parsed_at":"2023-02-20T22:46:21.807Z","dependency_job_id":null,"html_url":"https://github.com/drwpow/google-font-metrics","commit_stats":{"total_commits":2,"total_committers":1,"mean_commits":2.0,"dds":0.0,"last_synced_commit":"ff525d8b057ae15fe801937dac3e403812d0e29e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drwpow%2Fgoogle-font-metrics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drwpow%2Fgoogle-font-metrics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drwpow%2Fgoogle-font-metrics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drwpow%2Fgoogle-font-metrics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drwpow","download_url":"https://codeload.github.com/drwpow/google-font-metrics/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247234850,"owners_count":20905852,"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":[],"created_at":"2024-10-08T00:21:41.394Z","updated_at":"2025-04-04T18:44:49.265Z","avatar_url":"https://github.com/drwpow.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Google Font Metrics\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./screenshot.png\" alt=\"screenshot of CLI\" width=\"640\" /\u003e\n\u003c/p\u003e\n\nEver wonder exactly how big `1ex` is in an actual browser, based on the\n[Google Font][google-fonts]you picked? What about `1ch`? Well, wonder no more!\n\n**Metrics Measured for all Google Fonts**\n\n- `cap`\n- `ch`\n- `ex`\n- `em`\n- `ic`\n- `lh`\n\n[view site][site]\n\n## 🔧 Setup\n\n```bash\nnpm i\n```\n\n## 💻 Commands\n\n| Command           | Description                                                                                                                                         |\n| :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `npm run measure` | Runs Puppeteer tests on all fonts in `fonts.yml`                                                                                                    |\n| `npm run update`  | Adds any missing fonts from Google Fonts to `fonts.yml` (keeps existing data, but it will remove any fonts that have disappeared from Google Fonts) |\n\n## 💁 FAQ\n\n### How are these metrics generated?\n\nIn Puppeteer, we’ll load all the font files for a given Google Font family in\na headless Chromium browser. For each style (`400`, `400 italic`, `700`, `700 italic`, etc.), we’ll then generate a `\u003cdiv\u003e` on the page and set the width\nto `1ex` and measure it with `element.getBoundingClientRect()`. Then we’ll\ncreate a div below that and set its width to `1ch` and mesure that, then\n`1em` and measure that, etc.\n\nThe neat part is that these aren’t mere estimations or font metadata; they’re\nactual metrics generated (programatically) from a browser.\n\n### Is it accurate?\n\nManually measuring the same method in my actual Chrome browser actually\nproduced the same numbers (no one’s more surprised than me). Granted, I\nhaven’t tested all the fonts, but IBM Plex Sans was dead-on.\n\n### Why don’t `cap`, `ch`, `ic`, and `lh` work?\n\nAccording to the spec, these units are supposed to work “if the metric data\nis in the typeface,” whatever that means. Part of this experiment was finding\nout what these values _really_ are. Even though it’s disappointing to see\n`ch` literally always being ½ of `em`, it’s still valuable to see\ncomprehensive data on it in the table.\n\n### Can you test non-Google font files?\n\nObviously for licensing reasons, no proprietary web fonts are part of this\nrepo. If you’d like for me to set it up for local webfonts, [open an\nissue][issue]!\n\nMy next goal is trying to see if Puppeteer can measure the true cap height,\nx-height, and baseline for fonts more accurately.\n\n### What about baseline?\n\nMy next goal for the project is to test baseline. That’s outside the scope of\nCSS, and gets into image recognition. But it seems helpful!\n\n[fonts]: ./fonts.yaml\n[google-fonts]: fonts.google.com\n[issue]: https://github.com/dangodev/google-font-metrics/issues\n[site]: https://google-font-metrics.powers.now.sh\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrwpow%2Fgoogle-font-metrics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrwpow%2Fgoogle-font-metrics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrwpow%2Fgoogle-font-metrics/lists"}