https://github.com/drwpow/google-font-metrics

Database of CSS font values
https://github.com/drwpow/google-font-metrics

Last synced: over 1 year ago
JSON representation

Database of CSS font values

• Host: GitHub
• URL: https://github.com/drwpow/google-font-metrics
• Owner: drwpow
• License: unlicense
• Created: 2019-08-17T16:33:56.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-08-19T13:43:28.000Z (almost 7 years ago)
• Last Synced: 2025-02-10T04:17:34.941Z (over 1 year ago)
• Language: JavaScript
• Homepage: https://google-font-metrics.powers.now.sh/
• Size: 108 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# Google Font Metrics



  



Ever wonder exactly how big `1ex` is in an actual browser, based on the

[Google Font][google-fonts]you picked? What about `1ch`? Well, wonder no more!

**Metrics Measured for all Google Fonts**

- `cap`

- `ch`

- `ex`

- `em`

- `ic`

- `lh`

[view site][site]

## 🔧 Setup

```bash

npm i

```

## 💻 Commands

| Command           | Description                                                                                                                                         |

| :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------- |

| `npm run measure` | Runs Puppeteer tests on all fonts in `fonts.yml`                                                                                                    |

| `npm run update`  | Adds any missing fonts from Google Fonts to `fonts.yml` (keeps existing data, but it will remove any fonts that have disappeared from Google Fonts) |

## 💁 FAQ

### How are these metrics generated?

In Puppeteer, we’ll load all the font files for a given Google Font family in

a headless Chromium browser. For each style (`400`, `400 italic`, `700`, `700 italic`, etc.), we’ll then generate a `
` on the page and set the width

to `1ex` and measure it with `element.getBoundingClientRect()`. Then we’ll

create a div below that and set its width to `1ch` and mesure that, then

`1em` and measure that, etc.


The neat part is that these aren’t mere estimations or font metadata; they’re

actual metrics generated (programatically) from a browser.

### Is it accurate?

Manually measuring the same method in my actual Chrome browser actually

produced the same numbers (no one’s more surprised than me). Granted, I

haven’t tested all the fonts, but IBM Plex Sans was dead-on.

### Why don’t `cap`, `ch`, `ic`, and `lh` work?

According to the spec, these units are supposed to work “if the metric data

is in the typeface,” whatever that means. Part of this experiment was finding

out what these values _really_ are. Even though it’s disappointing to see

`ch` literally always being ½ of `em`, it’s still valuable to see

comprehensive data on it in the table.

### Can you test non-Google font files?

Obviously for licensing reasons, no proprietary web fonts are part of this

repo. If you’d like for me to set it up for local webfonts, [open an

issue][issue]!

My next goal is trying to see if Puppeteer can measure the true cap height,

x-height, and baseline for fonts more accurately.

### What about baseline?

My next goal for the project is to test baseline. That’s outside the scope of

CSS, and gets into image recognition. But it seems helpful!

[fonts]: ./fonts.yaml

[google-fonts]: fonts.google.com

[issue]: https://github.com/dangodev/google-font-metrics/issues

[site]: https://google-font-metrics.powers.now.sh