Package Exports

@capsizecss/metrics/appleSystem
@capsizecss/metrics/appleSystem.js
@capsizecss/metrics/barlow
@capsizecss/metrics/barlow.js
@capsizecss/metrics/cabin
@capsizecss/metrics/cabin.js
@capsizecss/metrics/inter
@capsizecss/metrics/inter.js
@capsizecss/metrics/karla
@capsizecss/metrics/karla.js
@capsizecss/metrics/openSans
@capsizecss/metrics/openSans.js
@capsizecss/metrics/roboto
@capsizecss/metrics/roboto.js
@capsizecss/metrics/texturina12pt
@capsizecss/metrics/texturina12pt.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	Font family name as authored by font creator
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 lower case letters above the baseline

Thanks

SEEK for giving us the space to do interesting work.

License

MIT.