seek-oss/capsize (@capsizecss/metrics)
### [`v3.3.0`](https://redirect.github.com/seek-oss/capsize/blob/HEAD/packages/metrics/CHANGELOG.md#330)
[Compare Source](https://redirect.github.com/seek-oss/capsize/compare/@capsizecss/metrics@3.2.0...@capsizecss/metrics@3.3.0)
##### Minor Changes
- [#213](https://redirect.github.com/seek-oss/capsize/pull/213) [`46147a2`](https://redirect.github.com/seek-oss/capsize/commit/46147a2d5ae66356df8aae91c687d8eb36fc4120) Thanks [@michaeltaranto](https://redirect.github.com/michaeltaranto)! - Update Google Fonts to latest
### [`v3.2.0`](https://redirect.github.com/seek-oss/capsize/blob/HEAD/packages/metrics/CHANGELOG.md#320)
[Compare Source](https://redirect.github.com/seek-oss/capsize/compare/@capsizecss/metrics@3.1.0...@capsizecss/metrics@3.2.0)
##### Minor Changes
- [#202](https://redirect.github.com/seek-oss/capsize/pull/202) [`452f2a3`](https://redirect.github.com/seek-oss/capsize/commit/452f2a3a167b2a9a49205a5842596aaf2ed34df9) Thanks [@michaeltaranto](https://redirect.github.com/michaeltaranto)! - metrics: Add weight and italic support
Add support for importing metrics for specific weights and italics.
While internal font metrics typically do not differ between variants, the `xWidthAvg` metric is calculated based on the average character width, and this will differ between variants.
Available variants will differ by font, and follow the same variant naming as Google Fonts:
```ts
import arial from '@capsizecss/metrics/arial';
import arialItalic from '@capsizecss/metrics/arial/italic';
import arialBold from '@capsizecss/metrics/arial/700';
import arialBoldItalic from '@capsizecss/metrics/arial/700italic';
```
Having metrics for different variants improves visual alignment of fallback fonts when using the `createFontStack` API from the `@capsizecss/core` package.
Example usage:
```ts
import { createFontStack } from '@capsizecss/core';
import montserrat from '@capsizecss/metrics/montserrat';
import montserrat600 from '@capsizecss/metrics/montserrat/600';
import arial from '@capsizecss/metrics/arial';
import arialBold from '@capsizecss/metrics/arial/700';
const regular = createFontStack([montserrat, arial]);
// => {
// "fontFamily": "Montserrat, \"Montserrat Fallback\", Arial",
// "fontFaces": [
// {
// "@font-face": {
// "fontFamily": "\"Montserrat Fallback\"",
// "src": "local('Arial'), local('ArialMT')",
// "ascentOverride": "85.7923%",
// "descentOverride": "22.2457%",
// "lineGapOverride": "0%",
// "sizeAdjust": "112.8307%"
// }
// }
// ]
// }
const bold = createFontStack([montserrat600, arialBold], {
fontFaceProperties: {
fontWeight: 700,
},
});
// => {
// "fontFamily": "Montserrat, \"Montserrat Fallback\", Arial",
// "fontFaces": [
// {
// "@font-face": {
// "fontWeight": 700,
// "fontFamily": "\"Montserrat Fallback\"",
// "src": "local('Arial Bold'), local('Arial-BoldMT')",
// "ascentOverride": "89.3502%",
// "descentOverride": "23.1683%",
// "lineGapOverride": "0%",
// "sizeAdjust": "108.3377%"
// }
// }
// ]
// }
```
### [`v3.1.0`](https://redirect.github.com/seek-oss/capsize/blob/HEAD/packages/metrics/CHANGELOG.md#310)
[Compare Source](https://redirect.github.com/seek-oss/capsize/compare/@capsizecss/metrics@3.0.0...@capsizecss/metrics@3.1.0)
##### Minor Changes
- [#195](https://redirect.github.com/seek-oss/capsize/pull/195) [`aa77cb2`](https://redirect.github.com/seek-oss/capsize/commit/aa77cb2b58f1fa9de9bd01e6933b6ad838ba325c) Thanks [@michaeltaranto](https://redirect.github.com/michaeltaranto)! - 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(\)][local()] 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()]: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src#localfont-face-name
### [`v3.0.0`](https://redirect.github.com/seek-oss/capsize/blob/HEAD/packages/metrics/CHANGELOG.md#300)
[Compare Source](https://redirect.github.com/seek-oss/capsize/compare/@capsizecss/metrics@2.2.0...@capsizecss/metrics@3.0.0)
##### Major Changes
- [#191](https://redirect.github.com/seek-oss/capsize/pull/191) [`d0086a6`](https://redirect.github.com/seek-oss/capsize/commit/d0086a6006272f7b7f1e488883d1cf7863642300) Thanks [@michaeltaranto](https://redirect.github.com/michaeltaranto)! - metrics: Prefer public family name to internal `familyName` metrics
Ensure metrics are available using the public family name as seen on Google Fonts as opposed to the internal family name metric.
This makes sense as consumers are looking to import the metrics relevant to a specific system font or from Google Fonts (also aligns with the names Google use in their font declarations generated in the hosted stylesheets).
##### BREAKING CHANGES:
##### Google Fonts
Previously, the metrics were imported with a path that used the internal family name, now they align with the font as seen on Google Fonts.
```diff
-import metrics from '@capsizecss/metrics/roundedMplus1c';
+import metrics from '@capsizecss/metrics/mPLUSRounded1c';
```
With only a small number of Google Fonts affected, this is only a break for the following fonts:
- Ballet
- Bodoni Moda
- Buda
- Bungee Spice
- Fjord One
- Geologica
- Imbue
- M PLUS Rounded 1c
- Material Symbols Outlined
- Material Symbols Rounded
- Material Symbols Sharp
- Montagu Slab
- Nanum Pen Script
- Newsreader
- Nunito Sans
- Pathway Extreme
- Sono
- Sunflower
- Supermercado One
- Texturina
##### System fonts
The system fonts only had one example where the names diverged:
```diff
-import metrics from '@capsizecss/metrics/brushScriptMT';
+import metrics from '@capsizecss/metrics/brushScript';
```
This now aligns with the name consumers use to reference the font on their system.
##### Minor Changes
- [#190](https://redirect.github.com/seek-oss/capsize/pull/190) [`75233b1`](https://redirect.github.com/seek-oss/capsize/commit/75233b16c613525420b1383698bcf114fa41b70f) Thanks [@michaeltaranto](https://redirect.github.com/michaeltaranto)! - Update Google Fonts to latest
##### Patch Changes
- [#193](https://redirect.github.com/seek-oss/capsize/pull/193) [`121eb42`](https://redirect.github.com/seek-oss/capsize/commit/121eb4201598c09793ff741a51baf85869c7e5c1) Thanks [@michaeltaranto](https://redirect.github.com/michaeltaranto)! - metrics: Update apple system font metrics
Previously the metrics provided for `-apple-system` and `BlinkMacSystemFont` were extracted from the `SF Pro` font, with a custom override to correct the `descent` metric.
Through work to support metrics for different font weights and styles, it was identified that MacOS uses the `SFNS` font.
Extracting the metrics from this font means no more custom overrides, and will now enable using this font as a fallback via postscript name soon too.
Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - "before 4am on Monday" (UTC).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
[ ] If you want to rebase/retry this PR, check this box
This PR contains the following updates:
^2.1.1->^3.0.0Release Notes
seek-oss/capsize (@capsizecss/metrics)
### [`v3.3.0`](https://redirect.github.com/seek-oss/capsize/blob/HEAD/packages/metrics/CHANGELOG.md#330) [Compare Source](https://redirect.github.com/seek-oss/capsize/compare/@capsizecss/metrics@3.2.0...@capsizecss/metrics@3.3.0) ##### Minor Changes - [#213](https://redirect.github.com/seek-oss/capsize/pull/213) [`46147a2`](https://redirect.github.com/seek-oss/capsize/commit/46147a2d5ae66356df8aae91c687d8eb36fc4120) Thanks [@michaeltaranto](https://redirect.github.com/michaeltaranto)! - Update Google Fonts to latest ### [`v3.2.0`](https://redirect.github.com/seek-oss/capsize/blob/HEAD/packages/metrics/CHANGELOG.md#320) [Compare Source](https://redirect.github.com/seek-oss/capsize/compare/@capsizecss/metrics@3.1.0...@capsizecss/metrics@3.2.0) ##### Minor Changes - [#202](https://redirect.github.com/seek-oss/capsize/pull/202) [`452f2a3`](https://redirect.github.com/seek-oss/capsize/commit/452f2a3a167b2a9a49205a5842596aaf2ed34df9) Thanks [@michaeltaranto](https://redirect.github.com/michaeltaranto)! - metrics: Add weight and italic support Add support for importing metrics for specific weights and italics. While internal font metrics typically do not differ between variants, the `xWidthAvg` metric is calculated based on the average character width, and this will differ between variants. Available variants will differ by font, and follow the same variant naming as Google Fonts: ```ts import arial from '@capsizecss/metrics/arial'; import arialItalic from '@capsizecss/metrics/arial/italic'; import arialBold from '@capsizecss/metrics/arial/700'; import arialBoldItalic from '@capsizecss/metrics/arial/700italic'; ``` Having metrics for different variants improves visual alignment of fallback fonts when using the `createFontStack` API from the `@capsizecss/core` package. Example usage: ```ts import { createFontStack } from '@capsizecss/core'; import montserrat from '@capsizecss/metrics/montserrat'; import montserrat600 from '@capsizecss/metrics/montserrat/600'; import arial from '@capsizecss/metrics/arial'; import arialBold from '@capsizecss/metrics/arial/700'; const regular = createFontStack([montserrat, arial]); // => { // "fontFamily": "Montserrat, \"Montserrat Fallback\", Arial", // "fontFaces": [ // { // "@font-face": { // "fontFamily": "\"Montserrat Fallback\"", // "src": "local('Arial'), local('ArialMT')", // "ascentOverride": "85.7923%", // "descentOverride": "22.2457%", // "lineGapOverride": "0%", // "sizeAdjust": "112.8307%" // } // } // ] // } const bold = createFontStack([montserrat600, arialBold], { fontFaceProperties: { fontWeight: 700, }, }); // => { // "fontFamily": "Montserrat, \"Montserrat Fallback\", Arial", // "fontFaces": [ // { // "@font-face": { // "fontWeight": 700, // "fontFamily": "\"Montserrat Fallback\"", // "src": "local('Arial Bold'), local('Arial-BoldMT')", // "ascentOverride": "89.3502%", // "descentOverride": "23.1683%", // "lineGapOverride": "0%", // "sizeAdjust": "108.3377%" // } // } // ] // } ``` ### [`v3.1.0`](https://redirect.github.com/seek-oss/capsize/blob/HEAD/packages/metrics/CHANGELOG.md#310) [Compare Source](https://redirect.github.com/seek-oss/capsize/compare/@capsizecss/metrics@3.0.0...@capsizecss/metrics@3.1.0) ##### Minor Changes - [#195](https://redirect.github.com/seek-oss/capsize/pull/195) [`aa77cb2`](https://redirect.github.com/seek-oss/capsize/commit/aa77cb2b58f1fa9de9bd01e6933b6ad838ba325c) Thanks [@michaeltaranto](https://redirect.github.com/michaeltaranto)! - 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(\Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - "before 4am on Monday" (UTC).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
This PR was generated by Mend Renovate. View the repository job log.