Version Packages

[seek-oss-ci]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

Releases

@capsizecss/metrics@3.2.0

Minor Changes

• #202 452f2a3 Thanks @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:

  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:

  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%"
  //       }
  //     }
  //   ]
  // }