capsize

The xWidthAvg metric represents the average character width. While the top-level xWidthAvg property defaults to the latin subset, you can access specific language subsets via the subsets field.

Supported Subsets:

• latin: English (based on Wikinews data)
• thai: Thai (based on Wikinews data)

import arial from '@capsizecss/metrics/arial';

const xWidthAvgDefault = arial.xWidthAvg;
const xWidthAvgLatin = arial.subsets.latin.xWidthAvg; // Same as above
const xWidthAvgThai = arial.subsets.thai.xWidthAvg;

To use Capsize, you must provide fontMetrics. There are three primary ways to obtain them:

1. Pre-packaged metrics: Install @capsizecss/metrics and import the specific font (e.g., import arialMetrics from '@capsizecss/metrics/arial').
2. Extract from font files: Use @capsizecss/unpack to extract metrics directly from a font file using fromFile.
3. Manual lookup: Use the Capsize website to find metrics by selecting a font and referencing the Metrics tab.

import { fromFile } from '@capsizecss/unpack';

const metrics = await fromFile(filePath);

To use Capsize for text sizing and layout trimming, install the core package via npm:

npm install @capsizecss/core

To use Capsize with vanilla-extract, install the integration package via npm:

npm install @capsizecss/vanilla-extract

To use @capsizecss/unpack to extract font metrics directly from font files, install it via npm:

npm install @capsizecss/unpack

You can import specific font weights and styles using a path convention that follows Google Fonts. The format is @capsizecss/metrics/{font-family}/{weight}{style}.

Variant naming conventions:

• Standalone weight or style (e.g., regular, italic)
• Numeric weight (e.g., 100 to 900)
• Combination (e.g., 700italic)

Note:

• Importing the top-most path (e.g., @capsizecss/metrics/arial) returns the regular variant.
• For Google Fonts without a regular variant, the first available variant is returned.
• Only available variants for a specific font are included.

import arialRegular from '@capsizecss/metrics/arial/regular';
import arialItalic from '@capsizecss/metrics/arial/italic';
import arialBold from '@capsizecss/metrics/arial/700';
import arialBoldItalic from '@capsizecss/metrics/arial/700italic';

Install the font metrics library for system and Google fonts using npm:

npm install @capsizecss/metrics

If you are using a custom font or a font that is not included in the @capsizecss/metrics package, use @capsizecss/unpack. This package allows you to extract the necessary font metrics data either from a local file or via a URL.

npm install @capsizecss/unpack

You can create responsive typography by passing a vanilla-extract media query object as the second argument to createTextStyle. The first argument should be the base (mobile) typography definition.

// Text.css.ts
import { createTextStyle } from '@capsizecss/vanilla-extract';

const fontMetrics = {
  capHeight: 700,
  ascent: 1058,
  descent: -291,
  lineGap: 0,
  unitsPerEm: 1000,
};

const textDefinitions = {
  mobile: { fontSize: 18, leading: 24, fontMetrics },
  tablet: { fontSize: 16, leading: 22, fontMetrics },
  desktop: { fontSize: 14, leading: 18, fontMetrics },
};

export const text = createTextStyle(textDefinitions.mobile, {
  '@media': {
    'screen and (min-width: 768px)': textDefinitions.tablet,
    'screen and (min-width: 1024px)': textDefinitions.desktop,
  },
});

Capsize provides the @capsizecss/metrics package to simplify the retrieval of font metrics. It contains the required data for both system fonts and Google fonts, allowing you to use Capsize without manually extracting font metrics.

npm install @capsizecss/metrics