{"id":44655186,"url":"https://github.com/sebdesign/cap-height","last_synced_at":"2026-02-14T21:35:00.205Z","repository":{"id":6024848,"uuid":"54508888","full_name":"sebdesign/cap-height","owner":"sebdesign","description":"Calculate the cap height of fonts loaded with Web Font Loader","archived":false,"fork":false,"pushed_at":"2022-12-03T11:47:15.000Z","size":1114,"stargazers_count":88,"open_issues_count":7,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-09-29T15:46:46.939Z","etag":null,"topics":["font-metrics","height-calculation","typography","web-font-loader"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sebdesign.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-22T21:10:06.000Z","updated_at":"2025-04-05T20:10:41.000Z","dependencies_parsed_at":"2023-01-13T13:48:06.560Z","dependency_job_id":null,"html_url":"https://github.com/sebdesign/cap-height","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/sebdesign/cap-height","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebdesign%2Fcap-height","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebdesign%2Fcap-height/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebdesign%2Fcap-height/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebdesign%2Fcap-height/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sebdesign","download_url":"https://codeload.github.com/sebdesign/cap-height/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebdesign%2Fcap-height/sbom","scorecard":{"id":808766,"data":{"date":"2025-08-11","repo":{"name":"github.com/sebdesign/cap-height","commit":"65d8e8308a090490a651febbc8a29c044f1a7131"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/12 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 18 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"40 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp","Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T12:32:23.453Z","repository_id":6024848,"created_at":"2025-08-23T12:32:23.454Z","updated_at":"2025-08-23T12:32:23.454Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29456352,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T21:29:27.764Z","status":"ssl_error","status_checked_at":"2026-02-14T21:28:11.111Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["font-metrics","height-calculation","typography","web-font-loader"],"created_at":"2026-02-14T21:35:00.117Z","updated_at":"2026-02-14T21:35:00.197Z","avatar_url":"https://github.com/sebdesign.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cap height\n\nCalculate the **cap height** of any font loaded with [Web Font Loader](https://github.com/typekit/webfontloader). See the demo on [CodePen](http://codepen.io/sebdesign/pen/EKmbGL?editors=0011).\n\n**What is the cap height?**\n\nThe cap height is the height of a capital letter measured from the baseline.\n\n\u003e Read more on [Typography Deconstructed](http://www.typographydeconstructed.com/cap-height) and on [Wikipedia](https://en.wikipedia.org/wiki/Cap_height).\n\n**How is this useful?**\n\nThe web lacks *exquisite* typography. Of course, its state is very good with the wide use of `@font-face` and the quality web font distribution services and foundries. However, setting type on the web still challenging. [Several](https://github.com/StudioThick/megatype) [attempts](http://compass-style.org/reference/compass/typography/vertical_rhythm) [and](https://gist.github.com/razwan/10662500) [tools](https://sassline.com) have risen in order to define a proper vertical rhythm and a baseline grid.\n\nBut most of them depend on a *cap height* ratio, which varies for every typeface and cannot be calculated with CSS. You have to rely on design software or font metrics from the foundries to find this out. This package addresses this issue by rendering loaded fonts on a canvas to measure the actual height of the glyphs, and thus calculating the cap-height/font-size ratio. Then you could easily apply this value to any tool you like.\n\n**Read more about the subject**\n\n- [Web typography is broken. Here’s how we can fix it](http://www.studiothick.com/essays/web-typography-is-broken)\n\n- [Aligning type to baseline the right way using SASS](https://medium.com/written-in-code/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b)\n\n## Demo\n\nSee the demo on [CodePen](http://codepen.io/sebdesign/pen/EKmbGL?editors=0011). Open the CodePen console to see the output.\n\nOr run `dist/index.html` in your browser and open the developer tools. In the output of the console you should see a JSON object for each loaded font, with its properties. An additional `--cap-height` CSS property contains the **holy grail** of the web typography.\n\nIn the browser window a canvas will be displayed for each loaded font with the letter *H*.\n\nThis example loads *Roboto Mono* through *Google Fonts*; but you can use any module available in the *Web Font Loader*, like *Typekit*, *Fondeck*, *Fonts.com* or your own web fonts.\n\n\u003e Check all the available modules: https://github.com/typekit/webfontloader#modules\n\n## How it works\n\nWhen a `@font-face` font is loaded with the *Web Font Loader*, it creates a HTML canvas and draws the letter *H* with the appropriate CSS properties extracted from the [Font Variation Description](http://typekit.github.io/fvd). Then it measures the actual pixel height of the drawn letter, and calculates the ratio between the height and the `font-size`.\n\n## WIP\n\nThis project is a work in progress. I’m planning to add more methods to calculate loaded fonts beyond the *Web Font Loader*, like the [Font Face API](https://developer.mozilla.org/el/docs/Web/API/FontFace), or simply by selecting a DOM element along with its CSS properties.\n\n## Installation\n\n### In a browser:\n\nInclude the `dist/cap-height.js` script in your document, then call the methods on the `capHeight` instance. **Don’t forget to include the Web Font Loader**.\n\n```html\n\u003cscript src=\"https://unpkg.com/lodash@4.17.4\"\u003e\u003c/script\u003e\n\u003cscript src=\"./cap-height.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  capHeight.calculate({});\n\u003c/script\u003e\n```\n\n### As a module:\n\n```shell\n$ npm install cap-height\n```\n\n```js\nimport capHeight from \"capHeight\";\n\ncapHeight.calculate({});\n```\n\n## API\n\n### calculate(properties, [text=H])\n\nThis is the main method which calculates the `cap-height`. The first argument is an object containing the `font-style`, `font-weight`, `font-size`, and `font-family` properties. If you omit any of these, the defaults in the example below will be used.\n\n**Warning**: The font-size **MUST** be in pixels. If any other unit of unit-less number is passed, it will be evaluated in pixels. E.g. `2em` or `2` will be computed to `2px`.\n\nThe second argument is optional. It defines the text that will be used to measure the cap-height. The default is *H*.\n\nThe method returns the passed object along with a `--cap-height` CSS property, and any other omitted property.\n\n```js\ncapHeight.calculate({\n  \"font-style\": \"normal\",\n  \"font-weight\": 400,\n  \"font-size\": \"100px\",\n  \"font-family\": \"serif\"\n}, \"HI\");\n\n// Output\n{\n  \"font-style\": \"normal\",\n  \"font-weight\": 400,\n  \"font-size\": \"100px\",\n  \"font-family\": \"serif\",\n  \"--cap-height\": 0.66\n}\n```\n\n### fontActive(callback, text)\n\nEvent handler for the `fontactive` or `active` events of the *Web Font Loader*.\n\nThis method accepts a `callback` function, in which the calculated properties will be passed. The callback is executed after the Web Font Loader has fired the appropriate events and the calculations are completed.\n\n\u003e Read about the Web Font Loader events: https://github.com/typekit/webfontloader#events\n\nYou can pass a string as an optional second argument after your callback, to define the text that will be used to calculate the cap-height. The default is *H*.\n\n```js\nWebFontConfig = {\n  {\n    // define your font modules here\n  },\n  fontactive: capHeight.fontActive(function(properties) {\n    console.log(properties);\n  }, \"HI\");\n};\n```\n\n### setContainer(element)\n\nIf you want to see/debug the process, define a DOM element in which a canvas(es) of each rendered font will be displayed.\n\n```js\nWebFontConfig = {\n  // set the container while the fonts are loading\n  loading: function() {\n    capHeight.setContainer(document.body);\n  }\n}\n```\n\n## Credits\n\n- [Thomas Bredin-Grey](https://github.com/tbredin) for the essay [Web typography is broken. Here’s how we can fix it](http://www.studiothick.com/essays/web-typography-is-broken/), which was the main inspiration for this project.\n\n- [Sebastian Lasse](https://github.com/sebilasse) for the [font metrics for google fonts](http://codepen.io/sebilasse/pen/gPBQqm?editors=1010) on CodePen, which provided the main implementation the cap-height calculation.\n\n- [Percolate](https://github.com/percolate) for the [Font Variation Description for JavaScript](https://github.com/percolate/fvd) module.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebdesign%2Fcap-height","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsebdesign%2Fcap-height","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebdesign%2Fcap-height/lists"}