Package Exports

@capsizecss/metrics
@capsizecss/metrics/dist/capsizecss-metrics.browser.cjs.js
@capsizecss/metrics/dist/capsizecss-metrics.browser.esm.js
@capsizecss/metrics/dist/capsizecss-metrics.cjs.js
@capsizecss/metrics/dist/capsizecss-metrics.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@capsizecss/metrics) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@capsizecss/metrics

Font metrics library for system and Google fonts.

npm install @capsizecss/metrics

Usage

Import the metrics for your chosen font to pass them directly into capsize.

import { createStyleObject } from '@capsizecss/core';
import arialMetrics from '@capsizecss/metrics/arial';

const capsizeStyles = createStyleObject({
  fontSize: 16,
  leading: 24,
  fontMetrics: arialMetrics,
});

In addition to common system fonts, Google fonts are also supported.

import { createStyleObject } from '@capsizecss/core';
import lobsterMetrics from '@capsizecss/metrics/lobster';

const capsizeStyles = createStyleObject({
  fontSize: 16,
  leading: 24,
  fontMetrics: lobsterMetrics,
});

Font metrics

The font metrics object returned contains the following properties if available:

Property	Type	Description
familyName	string	The font family name as authored by font creator
category	string	The style of the font: serif, sans-serif, monospace, display, or handwriting.
capHeight	number	The height of capital letters above the baseline
ascent	number	The height of the ascenders above baseline
descent	number	The descent of the descenders below baseline
lineGap	number	The amount of space included between lines
unitsPerEm	number	The size of the font’s internal coordinate grid
xHeight	number	The height of the main body of lower case letters above baseline
xWidthAvg	number	The average width of lowercase characters. Currently derived from latin character frequencies in English language, falling back to the built in xAvgCharWidth from the OS/2 table.

Supporting APIs

`fontFamilyToCamelCase`

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}`);

`entireMetricsCollection`

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

Thanks

SEEK for giving us the space to do interesting work.

License

MIT.