Gathering detailed insights and metrics for @capsizecss/metrics
Gathering detailed insights and metrics for @capsizecss/metrics
Installations
npm install @capsizecss/metricsDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Node Version
20.11.0
NPM Version
10.2.4
Releases
45
@capsizecss/unpack@3.0.0
@capsizecss/unpack@3.0.0
Updated on Jul 01, 2025
@capsizecss/vanilla-extract@2.0.1
@capsizecss/vanilla-extract@2.0.1
Updated on May 29, 2025
@capsizecss/unpack@2.4.0
@capsizecss/unpack@2.4.0
Updated on Mar 31, 2025
@capsizecss/metrics@3.5.0
@capsizecss/metrics@3.5.0
Updated on Mar 31, 2025
@capsizecss/metrics@3.4.0
@capsizecss/metrics@3.4.0
Updated on Nov 13, 2024
@capsizecss/metrics@3.3.0
@capsizecss/metrics@3.3.0
Updated on Sep 15, 2024
Languages
5
TypeScript
CSS
JavaScript
HTML
Shell
TypeScript (92.21%)
CSS (5.96%)
JavaScript (1.76%)
HTML (0.05%)
Shell (0.03%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
1,618 Stars
232 Commits
43 Forks
10 Watchers
11 Branches
24 Contributors
Updated on Jul 15, 2025
Maintainers
2
Package Meta Information
Latest Version
3.5.0
Package Id
@capsizecss/metrics@3.5.0
Unpacked Size
21.42 MB
Size
1.38 MB
File Count
26,169
NPM Version
10.2.4
Node Version
20.11.0
Published on
Mar 31, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
@capsizecss/metrics
Font metrics library for system and Google fonts.
1npm install @capsizecss/metrics
Usage
Import the metrics for your chosen font to pass them directly into capsize.
1import { createStyleObject } from '@capsizecss/core'; 2import arialMetrics from '@capsizecss/metrics/arial'; 3 4const capsizeStyles = createStyleObject({ 5 fontSize: 16, 6 leading: 24, 7 fontMetrics: arialMetrics, 8});
In addition to common system fonts, Google fonts are also supported.
1import { createStyleObject } from '@capsizecss/core'; 2import lobsterMetrics from '@capsizecss/metrics/lobster'; 3 4const capsizeStyles = createStyleObject({ 5 fontSize: 16, 6 leading: 24, 7 fontMetrics: lobsterMetrics, 8});
Variants
Metrics for the available variants of a font can be imported by weight and font style.
1import metrics from '@capsizecss/metrics/ {font-family} / {weight}{style}';
The format follows the convention used by Google Fonts for variant names: either a standalone weight or style (e.g. regular, italic), a specific weight (e.g. numeric 100 to 900), or a combination of both (e.g. 100italic-900italic).
[!NOTE] Each font only includes the variants that are available for that specific font.
1import arialRegular from '@capsizecss/metrics/arial/regular'; 2import arialItalic from '@capsizecss/metrics/arial/italic'; 3import arialBold from '@capsizecss/metrics/arial/700'; 4import arialBoldItalic from '@capsizecss/metrics/arial/700italic';
The top-most import path for a font family (e.g. without a variant: @capsizecss/metrics/arial) will return the regular variant.
In the case of a Google Font that has no regular variant, the first variant in the variants array is returned.
Font metrics
The font metrics object returned contains the following properties if available:
| Property | Type | Description |
|---|---|---|
| familyName | string | The font’s family name as authored by font creator |
| fullName | string | The font’s full name as authored by font creator |
| postscriptName | string | The font’s unique PostScript name as authored by font creator |
| category | string | The style of the font: serif, sans-serif, monospace, display, or handwriting. |
| capHeight | number | The height of capital letters above the baseline |
| ascent | number | The height of the ascenders above baseline |
| descent | number | The descent of the descenders below baseline |
| lineGap | number | The amount of space included between lines |
| unitsPerEm | number | The size of the font’s internal coordinate grid |
| xHeight | number | The height of the main body of lower case letters above baseline |
| xWidthAvg | number | The average width of character glyphs in the font for the selected unicode subset. Calculated based on character frequencies in written text (see below), falling back to the built in xAvgCharWidth from the OS/2 table. |
| subsets | { [subset]: { xWidthAvg: number } } | A lookup of the xWidthAvg metric by subset (see supported subsets below) |
How xWidthAvg is calculated
The xWidthAvg metric is derived from character frequencies in written language.
The value takes a weighted average of character glyph widths in the font, falling back to the built in xAvgCharWidth from the OS/2 table if the glyph width is not available.
The purpose of this metric is to support generating CSS metric overrides (e.g. ascent-override, size-adjust, etc) for fallback fonts, enabling inference of average line lengths so that a fallback font can be scaled to better align with a web font. This can be done either manually or using createFontStack.
For this technique to be effective, the metric factors in a character frequency weightings as observed in written language, using “abstracts” from Wikinews articles as a data source. Below is the source analysed for each supported subset:
| Subset | Language |
|---|---|
latin | English (source) |
thai | Thai (source) |
[!TIP] Need support for a different unicode subset? Either create an issue or follow the steps outlined in the
generate-weightingsscript in theunpackpackage and open a PR.
For more information on how to access the metrics for different subsets, see the subsets section below.
Subsets
The top level xWidthAvg metric represents the average character width for the latin subset. However, the xWidthAvg for each supported subset is available explicitly within the subsets field.
For example:
1import arial from '@capsizecss/metrics/arial'; 2 3const xWidthAvgDefault = arial.xWidthAvg; 4const xWidthAvgLatin = arial.subsets.latin.xWidthAvg; // Same as above 5const xWidthAvgThai = arial.subsets.thai.xWidthAvg;
Supporting APIs
fontFamilyToCamelCase
A helper function to support tooling that needs to convert the font family name to the correct casing for the relevant metrics import.
1import { fontFamilyToCamelCase } from '@capsizecss/metrics'; 2 3const familyName = fontFamilyToCamelCase('--apple-system'); // => `appleSystem` 4const metrics = await import(`@capsizecss/metrics/${familyName}`);
entireMetricsCollection
Provides the entire metrics collection as a JSON object, keyed by font family name.
⚠️ CAUTION: Importing this will result in a large JSON structure being pulled into your project!
It is not recommended to use this client side.
1import { entireMetricsCollection } from '@capsizecss/metrics/entireMetricsCollection'; 2 3const metrics = entireMetricsCollection['arial'];
or for a specific variant:
1import { entireMetricsCollection } from '@capsizecss/metrics/entireMetricsCollection'; 2 3const arialBoldItalic = entireMetricsCollection['arial'].variants['700italic'];
Thanks
- SEEK for giving us the space to do interesting work.
License
MIT.
No vulnerabilities found.
Reason
all changesets reviewed
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
5 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 4
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/chromatic.yml:1
- Warn: no topLevel permission defined: .github/workflows/preview-site.yml:1
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
- Warn: no topLevel permission defined: .github/workflows/snapshot.yml:1
- Warn: no topLevel permission defined: .github/workflows/test.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
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
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/chromatic.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/capsize/chromatic.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/chromatic.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/capsize/chromatic.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/chromatic.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/capsize/chromatic.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/chromatic.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/capsize/chromatic.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview-site.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/capsize/preview-site.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview-site.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/capsize/preview-site.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/capsize/release.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/capsize/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/capsize/release.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/capsize/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/snapshot.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/capsize/snapshot.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/snapshot.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/capsize/snapshot.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/snapshot.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/capsize/snapshot.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/snapshot.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/capsize/snapshot.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/capsize/test.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/capsize/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/capsize/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/seek-oss/capsize/test.yml/master?enable=pin
- Info: 0 out of 11 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 7 third-party GitHubAction dependencies pinned
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 30 are checked with a SAST tool
Reason
54 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
- Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
- Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- 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-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- 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-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986 / GHSA-64vr-g452-qvp3
- Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
- Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
- Warn: Project is vulnerable to: GHSA-x574-m823-4x7w
- Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8
- Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x
- Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4
- Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
4.2
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More