Version Packages

packages/metrics/CHANGELOG.md

@@ -1,5 +1,76 @@
 # @capsizecss/metrics
 
+## 3.2.0
+
+### Minor Changes
+
+- [#202](https://github.com/seek-oss/capsize/pull/202) [`452f2a3`](https://github.com/seek-oss/capsize/commit/452f2a3a167b2a9a49205a5842596aaf2ed34df9) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - metrics: Add weight and italic support
+
+  Add support for importing metrics for specific weights and italics.
+  While internal font metrics typically do not differ between variants, the `xWidthAvg` metric is calculated based on the average character width, and this will differ between variants.
+
+  Available variants will differ by font, and follow the same variant naming as Google Fonts:
+
+  ```ts
+  import arial from '@capsizecss/metrics/arial';
+  import arialItalic from '@capsizecss/metrics/arial/italic';
+  import arialBold from '@capsizecss/metrics/arial/700';
+  import arialBoldItalic from '@capsizecss/metrics/arial/700italic';
+  ```
+
+  Having metrics for different variants improves visual alignment of fallback fonts when using the `createFontStack` API from the `@capsizecss/core` package.
+
+  Example usage:
+
+  ```ts
+  import { createFontStack } from '@capsizecss/core';
+  import montserrat from '@capsizecss/metrics/montserrat';
+  import montserrat600 from '@capsizecss/metrics/montserrat/600';
+  import arial from '@capsizecss/metrics/arial';
+  import arialBold from '@capsizecss/metrics/arial/700';
+
+  const regular = createFontStack([montserrat, arial]);
+
+  // => {
+  //   "fontFamily": "Montserrat, \"Montserrat Fallback\", Arial",
+  //   "fontFaces": [
+  //     {
+  //       "@font-face": {
+  //         "fontFamily": "\"Montserrat Fallback\"",
+  //         "src": "local('Arial'), local('ArialMT')",
+  //         "ascentOverride": "85.7923%",
+  //         "descentOverride": "22.2457%",
+  //         "lineGapOverride": "0%",
+  //         "sizeAdjust": "112.8307%"
+  //       }
+  //     }
+  //   ]
+  // }
+
+  const bold = createFontStack([montserrat600, arialBold], {
+    fontFaceProperties: {
+      fontWeight: 700,
+    },
+  });
+
+  // => {
+  //   "fontFamily": "Montserrat, \"Montserrat Fallback\", Arial",
+  //   "fontFaces": [
+  //     {
+  //       "@font-face": {
+  //         "fontWeight": 700,
+  //         "fontFamily": "\"Montserrat Fallback\"",
+  //         "src": "local('Arial Bold'), local('Arial-BoldMT')",
+  //         "ascentOverride": "89.3502%",
+  //         "descentOverride": "23.1683%",
+  //         "lineGapOverride": "0%",
+  //         "sizeAdjust": "108.3377%"
+  //       }
+  //     }
+  //   ]
+  // }
+  ```
+
 ## 3.1.0
 
 ### Minor Changes

packages/metrics/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capsizecss/metrics",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Font metrics library for system and Google fonts",
   "keywords": [
     "capsize",

site/package.json

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@capsizecss/core": "^4.1.2",
-    "@capsizecss/metrics": "^3.1.0",
+    "@capsizecss/metrics": "^3.2.0",
     "@capsizecss/unpack": "^2.2.0",
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",