@capsizecss/[email protected]

Minor Changes

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

@capsizecss/[email protected]

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).

@capsizecss/[email protected]

Patch Changes

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

@capsizecss/[email protected]

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'];

@capsizecss/[email protected]

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.

@capsizecss/[email protected]

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.

@capsizecss/[email protected]

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.

@capsizecss/[email protected]

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.

@capsizecss/[email protected]

Patch Changes

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

@capsizecss/[email protected]

Minor Changes

• #112 0066a20 Thanks @michaeltaranto! - Update Google Fonts to latest

• #110 404de74 Thanks @michaeltaranto! - Add timesNewRoman metrics

  Provides metrics for the built in system font Times New Roman.
  Can be used by importing as @capsizecss/metrics/timesNewRoman.