capsize

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',
  });
  

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',
  });
  

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',
  });
  

Patch Changes

• #181 c2091af Thanks @michaeltaranto! - xWidthAvg: Improve metric by factoring in space to weightings

  Analyzing the xWidthAvg metrics for latin character sets, we have seen further improvement in the accuracy by factoring in the space character to the weightings.

Patch Changes

• #181 c2091af Thanks @michaeltaranto! - xWidthAvg: Improve metric by factoring in space to weightings

  Analyzing the xWidthAvg metrics for latin character sets, we have seen further improvement in the accuracy by factoring in the space character to the weightings.

Minor Changes

• #175 f2e1c2f Thanks @michaeltaranto! - metrics: Provide ESM entrypoints for individual font metrics

  Build an ESM version of individual font metrics in preparation for adding named exports as part of the upcoming support for non-latin unicode subsets.

Major Changes

• #168 8819ff1 Thanks @mrm007! - Precompile Capsize packages with Crackle

  Migrating Capsize packages to be precompiled with Crackle, with a key change being Crackle now handles entry points instead of Preconstruct.

  Other benefits include:

  • Modern module entry point syntax using the "exports" field with better tooling compatibility.
  • Improved types and better ESM and CJS compatibility
  • Better alignment between compiled code and module entry points

  BREAKING CHANGES:

  API changes

  While technically a breaking change, consumers of Capsize's public APIs are not affected by this change.
  If you are affected due to reaching into package internals, please get in touch and see if we can find a more maintainable approach.

  TypeScript

  TypeScript consumers should ensure they are using a compatible moduleResolution strategy in TSConfig — either node16, nodenext or bundler. This will ensure types are correctly resolved across the different module specifications.

• #171 e73da2d Thanks @michaeltaranto! - Drop support for Vanilla Extract below v1.4

  Upgrading to use Vanilla Extract's style composition API in favour of the long time deprecated composeStyles function.
  There is no API change for Capsize consumers, but this change will require a peer dependency of [email protected] or greater.

Patch Changes

• #168 8819ff1 Thanks @mrm007! - Fix ESM compatibility of generated CSS module

  When consumed via ESM, the generated CSS module had a bug which could result in missing Vanilla Extract file scopes.

• Updated dependencies [8819ff1, a308885, a308885]:

  • @capsizecss/[email protected]

Major Changes

• #168 8819ff1 Thanks @mrm007! - Precompile Capsize packages with Crackle

  Migrating Capsize packages to be precompiled with Crackle, with a key change being Crackle now handles entry points instead of Preconstruct.

  Other benefits include:

  • Modern module entry point syntax using the "exports" field with better tooling compatibility.
  • Improved types and better ESM and CJS compatibility
  • Better alignment between compiled code and module entry points

  BREAKING CHANGES:

  API changes

  While technically a breaking change, consumers of Capsize's public APIs are not affected by this change.
  If you are affected due to reaching into package internals, please get in touch and see if we can find a more maintainable approach.

  TypeScript

  TypeScript consumers should ensure they are using a compatible moduleResolution strategy in TSConfig — either node16, nodenext or bundler. This will ensure types are correctly resolved across the different module specifications.

Minor Changes

• #167 193d5ec Thanks @michaeltaranto! - xWidthAvg: Update character frequency weightings data source

  The character frequency weightings used to calculate the xWidthAvg metrics were previously hard coded internally, and were an adaption from a frequency table from Wikipedia.

  We now generate these weightings based on the abstracts from WikiNews articles.
  This makes it possible to add support for languages that use non-latin unicode subsets, e.g. Thai, by adding the relevant abstract and generating the xAvgWidth based on the corresponding unicode subset range.

  Will this change anything for consumers?

  Given the updated xWidthAvg metrics are very close to the original hard coded values, we do not forsee any impact on consumers.
  Even our CSS snapshot tests were unchanged, and they contain values rounded to 4 decimal places!

  The result is either no or extremely minor changes to the generated fallback font CSS, with the benefit being this lays the ground work to support additional language subsets in the near future.

Major Changes

• #168 8819ff1 Thanks @mrm007! - Precompile Capsize packages with Crackle

  Migrating Capsize packages to be precompiled with Crackle, with a key change being Crackle now handles entry points instead of Preconstruct.

  Other benefits include:

  • Modern module entry point syntax using the "exports" field with better tooling compatibility.
  • Improved types and better ESM and CJS compatibility
  • Better alignment between compiled code and module entry points

  BREAKING CHANGES:

  API changes

  While technically a breaking change, consumers of Capsize's public APIs are not affected by this change.
  If you are affected due to reaching into package internals, please get in touch and see if we can find a more maintainable approach.

  TypeScript

  TypeScript consumers should ensure they are using a compatible moduleResolution strategy in TSConfig — either node16, nodenext or bundler. This will ensure types are correctly resolved across the different module specifications.

Major Changes

• #168 8819ff1 Thanks @mrm007! - Precompile Capsize packages with Crackle

  Migrating Capsize packages to be precompiled with Crackle, with a key change being Crackle now handles entry points instead of Preconstruct.

  Other benefits include:

  • Modern module entry point syntax using the "exports" field with better tooling compatibility.
  • Improved types and better ESM and CJS compatibility
  • Better alignment between compiled code and module entry points

  BREAKING CHANGES:

  API changes

  While technically a breaking change, consumers of Capsize's public APIs are not affected by this change.
  If you are affected due to reaching into package internals, please get in touch and see if we can find a more maintainable approach.

  TypeScript

  TypeScript consumers should ensure they are using a compatible moduleResolution strategy in TSConfig — either node16, nodenext or bundler. This will ensure types are correctly resolved across the different module specifications.

Patch Changes

• #164 a308885 Thanks @michaeltaranto! - createFontStack: Append original fallback font name to the font stack

  The fontFamily returned from createFontStack now includes the original fallback font name(s). These are appended to the end of the font stack in the case the preferred font and generated fallbacks are not available.

  import lobster from '@capsizecss/metrics/lobster';
  import arial from '@capsizecss/metrics/arial';
  
  const { fontFamily } = createFontStack([lobster, arial]);
  

  Where fontFamily is now:

  - `Lobster, 'Lobster Fallback: Arial'`
  + `Lobster, 'Lobster Fallback: Arial', Arial`
  

• #164 a308885 Thanks @michaeltaranto! - createFontStack: Quote font-family in @font-face declaration if needed

  Previously, when using fontFaceFormat: 'styleObject', the generated fallback name was not quoted as necessary within the @font-face declaration.
  This could cause issues if the font family name contained spaces or other characters that required quoting.

Patch Changes

• #157 151e940 Thanks @mrm007! - Add missing Vanilla Extract file scopes

Minor Changes

• #138 7e875dc Thanks @michaeltaranto! - Update Google Fonts to latest

Patch Changes

• #137 79437c8 Thanks @michaeltaranto! - createFontStack: Apply metric overrides conditionally

  Addresses an issue where metric overrides would be applied for fonts with the same metric values.
  The ascent-override, descent-override and line-gap-override properties are now all conditional, only returned when the metrics differ between the preferred font and its fallback(s).

Patch Changes

• #133 87286bb Thanks @michaeltaranto! - Ensure metrics files are published to npm

Minor Changes

• #129 9507530 Thanks @michaeltaranto! - fontFamilyToCamelCase: Expose utility to convert family name to import name

  A helper function to support tooling that needs to convert the font family name to the correct casing for the relevant metrics import.

  import { fontFamilyToCamelCase } from '@capsizecss/metrics';
  
  const familyName = fontFamilyToCamelCase('--apple-system'); // => `appleSystem`
  const metrics = await import(`@capsizecss/metrics/${familyName}`);
  

• #129 9507530 Thanks @michaeltaranto! - entireMetricsCollection: Expose all metrics indexed by family name

  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.

  ---

  import { entireMetricsCollection } from '@capsizecss/metrics/entireMetricsCollection';
  
  const metrics = entireMetricsCollection['arial'];
  

Patch Changes

• #126 eb59cde Thanks @michaeltaranto! - oxygen: Refine missing metrics

  Refines the missing capHeight and xHeight metrics to align with anchor co-ordinates of relevant glyphs — H for capHeight and x for xHeight. Previously these values where subjectively observed using the Capsize website.

• #126 eb59cde Thanks @michaeltaranto! - Add more system fonts

  Expands the metrics library to include more system fonts. Fonts added are:

  • Tahoma
  • Lucida Grande
  • Verdana
  • Trebuchet MS
  • Georgia
  • Courier New
  • Brush Script

  The library now support all the Best Web Safe Fonts.

Major Changes

• #125 5d77f47 Thanks @michaeltaranto! - metrics, unpack: Cut v1 release

  No actual breaking change here, but cutting the v1 release to mark the packages moving out of experimental phase.

Minor Changes

• #122 8a15c86 Thanks @michaeltaranto! - Calculate and expose xWidthAvg, the average width of lowercase characters.

Minor Changes

• #117 0e969d8 Thanks @michaeltaranto! - Add createFontStack for metrics-based font family fallbacks.

  Creates metrics-based @font-face declarations to improve the alignment of font family fallbacks, which can dramatically improve the Cumulative Layout Shift metric for sites that depend on a web font.

  Example usage

  import { createFontStack } from '@capsizecss/core';
  import lobster from '@capsizecss/metrics/lobster';
  import helveticaNeue from '@capsizecss/metrics/helveticaNeue';
  import arial from '@capsizecss/metrics/arial';
  
  const { fontFamily, fontFaces } = createFontStack([
    lobster,
    helveticaNeue,
    arial,
  ]);
  

  The returned values are the computed font family and the generated font face declarations:

  // `fontFamily`
  "Lobster, 'Lobster Fallback: Helvetica Neue', 'Lobster Fallback: Arial'";
  

  /* `fontFaces` */
  @font-face {
    font-family: 'Lobster Fallback: Helvetica Neue';
    src: local('Helvetica Neue');
    ascent-override: 115.1741%;
    descent-override: 28.7935%;
    size-adjust: 86.8251%;
  }
  @font-face {
    font-family: 'Lobster Fallback: Arial';
    src: local('Arial');
    ascent-override: 113.5679%;
    descent-override: 28.392%;
    size-adjust: 88.053%;
  }
  

Patch Changes

• #122 8a15c86 Thanks @michaeltaranto! - Add additional properties to FontMetrics type definition.

  Previously the FontMetrics type captured only the metrics required by the options for the createStyleObject and createStyleString APIs.
  With additional APIs coming that require a different subset of metrics, the type now reflects the structure of the data from the metrics package.

  The additional properties are: familyName, category, xHeight and xWidthAvg.
  See documentation for more details.

Major Changes

• #125 5d77f47 Thanks @michaeltaranto! - metrics, unpack: Cut v1 release

  No actual breaking change here, but cutting the v1 release to mark the packages moving out of experimental phase.

Minor Changes

• #122 8a15c86 Thanks @michaeltaranto! - Update Google Fonts

• #122 8a15c86 Thanks @michaeltaranto! - Calculate and expose xWidthAvg, the average width of lowercase characters.

• #122 8a15c86 Thanks @michaeltaranto! - Add category field to describe the style of the font, e.g. “serif”, “sans-serif” etc.

  Exposes the category field captured by Google Fonts, manually populating it for system fonts.

Patch Changes

• #109 aafab43 Thanks @michaeltaranto! - Upgrade to fontkit to v2