sebdesign / cap-height

Calculate the cap height of fonts loaded with Web Font Loader

Cap height

Calculate the cap height of any font loaded with Web Font Loader. See the demo on CodePen.

What is the cap height?

The cap height is the height of a capital letter measured from the baseline.

Read more on Typography Deconstructed and on Wikipedia.

How is this useful?

The web lacks exquisite typography. Of course, its state is very good with the wide use of @font-face and the quality web font distribution services and foundries. However, setting type on the web still challenging. Several attempts and tools have risen in order to define a proper vertical rhythm and a baseline grid.

But most of them depend on a cap height ratio, which varies for every typeface and cannot be calculated with CSS. You have to rely on design software or font metrics from the foundries to find this out. This package addresses this issue by rendering loaded fonts on a canvas to measure the actual height of the glyphs, and thus calculating the cap-height/font-size ratio. Then you could easily apply this value to any tool you like.

Read more about the subject

• Web typography is broken. Here’s how we can fix it

• Aligning type to baseline the right way using SASS

Demo

See the demo on CodePen. Open the CodePen console to see the output.

Or run dist/index.html in your browser and open the developer tools. In the output of the console you should see a JSON object for each loaded font, with its properties. An additional --cap-height CSS property contains the holy grail of the web typography.

In the browser window a canvas will be displayed for each loaded font with the letter H.

This example loads Roboto Mono through Google Fonts; but you can use any module available in the Web Font Loader, like Typekit, Fondeck, Fonts.com or your own web fonts.

Check all the available modules: https://github.com/typekit/webfontloader#modules

How it works

When a @font-face font is loaded with the Web Font Loader, it creates a HTML canvas and draws the letter H with the appropriate CSS properties extracted from the Font Variation Description. Then it measures the actual pixel height of the drawn letter, and calculates the ratio between the height and the font-size.

WIP

This project is a work in progress. I’m planning to add more methods to calculate loaded fonts beyond the Web Font Loader, like the Font Face API, or simply by selecting a DOM element along with its CSS properties.

Installation

In a browser:

Include the dist/cap-height.js script in your document, then call the methods on the capHeight instance. Don’t forget to include the Web Font Loader.

<script src="https://unpkg.com/[email protected]"></script>
<script src="./cap-height.js"></script>

<script>
  capHeight.calculate({});
</script>

As a module:

$ npm install cap-height

import capHeight from "capHeight";

capHeight.calculate({});

API

calculate(properties, [text=H])

This is the main method which calculates the cap-height. The first argument is an object containing the font-style, font-weight, font-size, and font-family properties. If you omit any of these, the defaults in the example below will be used.

Warning: The font-size MUST be in pixels. If any other unit of unit-less number is passed, it will be evaluated in pixels. E.g. 2em or 2 will be computed to 2px.

The second argument is optional. It defines the text that will be used to measure the cap-height. The default is H.

The method returns the passed object along with a --cap-height CSS property, and any other omitted property.

capHeight.calculate({
  "font-style": "normal",
  "font-weight": 400,
  "font-size": "100px",
  "font-family": "serif"
}, "HI");

// Output
{
  "font-style": "normal",
  "font-weight": 400,
  "font-size": "100px",
  "font-family": "serif",
  "--cap-height": 0.66
}

fontActive(callback, text)

Event handler for the fontactive or active events of the Web Font Loader.

This method accepts a callback function, in which the calculated properties will be passed. The callback is executed after the Web Font Loader has fired the appropriate events and the calculations are completed.

Read about the Web Font Loader events: https://github.com/typekit/webfontloader#events

You can pass a string as an optional second argument after your callback, to define the text that will be used to calculate the cap-height. The default is H.

WebFontConfig = {
  {
    // define your font modules here
  },
  fontactive: capHeight.fontActive(function(properties) {
    console.log(properties);
  }, "HI");
};

setContainer(element)

If you want to see/debug the process, define a DOM element in which a canvas(es) of each rendered font will be displayed.

WebFontConfig = {
  // set the container while the fonts are loading
  loading: function() {
    capHeight.setContainer(document.body);
  }
}

Credits

• Thomas Bredin-Grey for the essay Web typography is broken. Here’s how we can fix it, which was the main inspiration for this project.

• Sebastian Lasse for the font metrics for google fonts on CodePen, which provided the main implementation the cap-height calculation.

• Percolate for the Font Variation Description for JavaScript module.

cap-height's Issues

Uncaught RangeError: Cannot calculate the height of whitespace.

Hello,

I'm getting the following error in the console:

  | g | @ | cap-height.js:1
-- | -- | -- | --
  | apply | @ | lodash.js:496
  | wrapper | @ | lodash.js:5356
  | thru | @ | lodash.js:8812
  | (anonymous) | @ | lodash.js:4379
  | arrayReduce | @ | lodash.js:704
  | baseWrapperValue | @ | lodash.js:4378
  | wrapperValue | @ | lodash.js:9067
  | h | @ | cap-height.js:1
  | (anonymous) | @ | (index):550

I've included cap-height.js manually right at the bottom of my project:

<script src="https://unpkg.com/[email protected]"></script>
<script src="src/scripts/uncompiled/cap-height.js"></script>
<script>
    capHeight.calculate({});
</script>

And using TypeKit in the <head>. Any ideas?

Many thanks!

Cap-Width

Hey @sebdesign, is there a way to get the character width for a font using your cap-height JS?

I am wanting to easily calculate the max-width of a paragraph/line-of-text should be based on characters per line, font-size, and character width.

Thank you for this awesome tool!