Skip to content

Commit

Permalink
Extract and expose postscriptName & fullName from font metrics (#195
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@michaeltaranto
michaeltaranto authored Apr 16, 2024
1 parent c046e74 commit aa77cb2
Show file tree
Hide file tree
Showing 9 changed files with 6,674 additions and 29 deletions.
43 changes: 43 additions & 0 deletions .changeset/hip-pumas-dream.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
---
'@capsizecss/metrics': minor
'@capsizecss/unpack': minor
---

Extract and expose `postscriptName` and `fullName` from font metrics

The font metrics returned now include the `postscriptName` and `fullName` properties as authored by the font creator.

For example:
```ts
// Arial Regular metrics
{
"familyName": "Arial",
"fullName": "Arial",
"postscriptName": "ArialMT",
...
}

// Arial Bold metrics
{
"familyName": "Arial",
"fullName": "Arial Bold",
"postscriptName": "Arial-BoldMT",
...
}
```

These values are particularly useful when constructing CSS `@font-face` declarations, as they can be used to specify [local(\<font-face-name\>)] sources.
MDN recommends using both “to assure proper matching across platforms”.

```css
@font-face {
font-family: "Web Font Fallback";
src: local('Arial Bold'), local('Arial-BoldMT');
font-weight: 700;
ascent-override: 89.3502%;
descent-override: 23.1683%;
size-adjust: 108.3377%;
}
```

[local(\<font-face-name\>)]: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src#localfont-face-name
6 changes: 5 additions & 1 deletion packages/core/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,12 @@ import type weightings from '../../unpack/src/weightings';
export type SupportedSubset = keyof typeof weightings;

export interface FontMetrics {
/** The font family name as authored by font creator */
/** The font’s family name as authored by font creator */
familyName: string;
/** The font’s full name as authored by font creator */
fullName: string;
/** The font’s unique PostScript name as authored by font creator */
postscriptName: string;
/**
* The style of the font: serif, sans-serif, monospace, display, or handwriting.
*
Expand Down
26 changes: 14 additions & 12 deletions packages/metrics/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,18 +41,20 @@ const capsizeStyles = createStyleObject({

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 character glyphs in the font for the selected unicode subset. Calculated based on character frequencies in written text ([see below]), falling back to the built in [xAvgCharWidth] from the OS/2 table. |
| subsets | {<br/>[subset]: { xWidthAvg: number }<br/>} | A lookup of the `xWidthAvg` metric by subset (see [supported subsets below]) |
| Property | Type | Description |
| -------------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| familyName | string | The font’s family name as authored by font creator |
| fullName | string | The font’s full name as authored by font creator |
| postscriptName | string | The font’s unique PostScript 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 character glyphs in the font for the selected unicode subset. Calculated based on character frequencies in written text ([see below]), falling back to the built in [xAvgCharWidth] from the OS/2 table. |
| subsets | {<br/>[subset]: { xWidthAvg: number }<br/>} | A lookup of the `xWidthAvg` metric by subset (see [supported subsets below]) |

[supported subsets below]: #subsets

Expand Down
6 changes: 6 additions & 0 deletions packages/metrics/scripts/generate.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ const allMetrics: Record<string, MetricsFont> = {};

const buildFiles = async ({
familyName,
fullName,
postscriptName,
category,
capHeight,
ascent,
Expand All @@ -38,6 +40,8 @@ const buildFiles = async ({
const camelCaseFamilyName = fontFamilyToCamelCase(familyName);
const data = {
familyName,
fullName,
postscriptName,
category,
capHeight,
ascent,
Expand Down Expand Up @@ -66,6 +70,8 @@ const buildFiles = async ({
declare module '@capsizecss/metrics/${camelCaseFamilyName}' {
interface ${typeName} {
familyName: string;
fullName: string;
postscriptName: string;
category: string;${
typeof capHeight === 'number' && capHeight > 0
? `
Expand Down
Loading

0 comments on commit aa77cb2

Please sign in to comment.