@capsizecss/[email protected]

Minor Changes

• #217 4fb95bf Thanks @devjiwonchoi! - Update Google Fonts

@capsizecss/[email protected]

Minor Changes

• #213 46147a2 Thanks @michaeltaranto! - Update Google Fonts to latest

@capsizecss/[email protected]

Minor Changes

• #208 e3f73ea Thanks @michaeltaranto! - Add support for extracting from TrueType Collection by PostScript name

  Enable the extraction of font metrics for a specific font from TrueType Collection (TTC) file by providing the postscriptName option.

  For example:

  import { fromFile } from '@capsizecss/unpack';
  
  const metrics = await fromFile('AvenirNext.ttc', {
    postscriptName: 'AvenirNext-Bold',
  });

@capsizecss/[email protected]

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

@capsizecss/[email protected]

Patch Changes

• #200 6238501 Thanks @michaeltaranto! - createFontStack: Prefer postscriptName or fullName for fallback source

  The @font-face declaration aliases generated by createFontStack now favour postscriptName and fullName over familyName from the provided metrics when selecting a local font face as a fallback.

  MDN recommends using either fullName and postscriptName when accessing local fonts to ensure the best matching across platforms, while also enabling selection of a single font face within a larger family, e.g. Arial Bold or Arial-BoldMT within Arial.
  For details see MDN.

  ⚠️ Note: Falling back to familyName (original behaviour) makes this work backwards compatible with older versions of font metrics.

@capsizecss/[email protected]

Minor Changes

• #195 aa77cb2 Thanks @michaeltaranto! - Extract and expose postscriptName and fullName from font metrics

  The font metrics returned now include the postscriptName and fullName properties as authored by the font creator.

  For example:

  // Arial Regular metrics
  {
    "familyName": "Arial",
    "fullName": "Arial",
    "postscriptName": "ArialMT",
    ...
  }
  
  // Arial Bold metrics
  {
    "familyName": "Arial",
    "fullName": "Arial Bold",
    "postscriptName": "Arial-BoldMT",
    ...
  }

  These values are particularly useful when constructing CSS @font-face declarations, as they can be used to specify local(<font-face-name>) sources.
  MDN recommends using both “to assure proper matching across platforms”.

  @font-face {
    font-family: 'Web Font Fallback';
    src: local('Arial Bold'), local('Arial-BoldMT');
    font-weight: 700;
    ascent-override: 89.3502%;
    descent-override: 23.1683%;
    size-adjust: 108.3377%;
  }

@capsizecss/[email protected]

Minor Changes

• #195 aa77cb2 Thanks @michaeltaranto! - Extract and expose postscriptName and fullName from font metrics

  The font metrics returned now include the postscriptName and fullName properties as authored by the font creator.

  For example:

  // Arial Regular metrics
  {
    "familyName": "Arial",
    "fullName": "Arial",
    "postscriptName": "ArialMT",
    ...
  }
  
  // Arial Bold metrics
  {
    "familyName": "Arial",
    "fullName": "Arial Bold",
    "postscriptName": "Arial-BoldMT",
    ...
  }

  These values are particularly useful when constructing CSS @font-face declarations, as they can be used to specify local(<font-face-name>) sources.
  MDN recommends using both “to assure proper matching across platforms”.

  @font-face {
    font-family: 'Web Font Fallback';
    src: local('Arial Bold'), local('Arial-BoldMT');
    font-weight: 700;
    ascent-override: 89.3502%;
    descent-override: 23.1683%;
    size-adjust: 108.3377%;
  }

@capsizecss/[email protected]

Patch Changes

• #198 f55acae Thanks @michaeltaranto! - createFontStack: Apply line-gap-override with no lineGap in preferred font

  Ensure that the line-gap-override property is applied correctly when overriding a fallback font with a web font that has no lineGap.
  Previously if the override was zero it would be omitted from the declaration, rather than the correct behaviour of overriding the fallback metric to zero.

• #199 630a5fe Thanks @michaeltaranto! - createFontStack: Ensure provided `size-adjust` is factored into metric overrides

  Ensures a custom size-adjust value provided via the fontFaceProperties option is factored into the calculations for the metric overrides.

  Example

  If a custom size-adjust value is provided:

  createFontStack([merriweatherSans, arial], {
    fontFaceProperties: {
      sizeAdjust: '300%',
    },
  });

  The resulting metric overrides are now adjusted accordingly:

   @font-face {
     font-family: "Merriweather Sans Fallback";
     src: local('Arial');
  -  ascent-override: 92.3409%;
  +  ascent-override: 32.8%;
  -  descent-override: 25.619%;
  +  descent-override: 9.1%;
     line-gap-override: 0%;
     size-adjust: 300%;
   }

@capsizecss/[email protected]

Major Changes

• #191 d0086a6 Thanks @michaeltaranto! - metrics: Prefer public family name to internal familyName metrics

  Ensure metrics are available using the public family name as seen on Google Fonts as opposed to the internal family name metric.
  This makes sense as consumers are looking to import the metrics relevant to a specific system font or from Google Fonts (also aligns with the names Google use in their font declarations generated in the hosted stylesheets).

  BREAKING CHANGES:

  Google Fonts

  Previously, the metrics were imported with a path that used the internal family name, now they align with the font as seen on Google Fonts.

  -import metrics from '@capsizecss/metrics/roundedMplus1c';
  +import metrics from '@capsizecss/metrics/mPLUSRounded1c';

  With only a small number of Google Fonts affected, this is only a break for the following fonts:

  • Ballet
  • Bodoni Moda
  • Buda
  • Bungee Spice
  • Fjord One
  • Geologica
  • Imbue
  • M PLUS Rounded 1c
  • Material Symbols Outlined
  • Material Symbols Rounded
  • Material Symbols Sharp
  • Montagu Slab
  • Nanum Pen Script
  • Newsreader
  • Nunito Sans
  • Pathway Extreme
  • Sono
  • Sunflower
  • Supermercado One
  • Texturina

  System fonts

  The system fonts only had one example where the names diverged:

  -import metrics from '@capsizecss/metrics/brushScriptMT';
  +import metrics from '@capsizecss/metrics/brushScript';

  This now aligns with the name consumers use to reference the font on their system.

Minor Changes

• #190 75233b1 Thanks @michaeltaranto! - Update Google Fonts to latest

Patch Changes

• #193 121eb42 Thanks @michaeltaranto! - metrics: Update apple system font metrics

  Previously the metrics provided for -apple-system and BlinkMacSystemFont were extracted from the SF Pro font, with a custom override to correct the descent metric.

  Through work to support metrics for different font weights and styles, it was identified that MacOS uses the SFNS font.
  Extracting the metrics from this font means no more custom overrides, and will now enable using this font as a fallback via postscript name soon too.

@capsizecss/[email protected]

Minor Changes

• #177 879208b Thanks @michaeltaranto! - xWidthAvg: Add subset support for non-latin character sets

  Previously the xWidthAvg metric was calculated based on the character frequency as measured from English text only.
  This resulted in the xWidthAvg metric being incorrect for languages that use a different unicode subset range, e.g. Thai.

  Supporting Thai now enables adding support for other unicode ranges in the future.

  What's changed?

  @capsizecss/metrics

  The subsets field has been added to the metrics object, providing the xWidthAvg metric for each subset — calculated against the relevant character frequency data.

   {
     "familyName": "Abril Fatface",
     ...
  +  "subsets": {
  +    "latin": {
  +      "xWidthAvg": 512
  +    },
  +    "thai": {
  +      "xWidthAvg": 200
  +    }
  +  }
   }

  There are no changes to any of the other existing metrics.

  @capsizecss/core

  Fallback font stacks can now be generated per subset, allowing the correct xWidthAvg metric to be used for the relevant subset.

  The createFontStack API now accepts subset as an option:

  const { fontFamily, fontFaces } = createFontStack([lobster, arial], {
    subset: 'thai',
  });