@capsizecss/metrics 0.4.0 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @capsizecss/metrics
 
+## 1.0.1
+
+### Patch Changes
+
+- [#126](https://github.com/seek-oss/capsize/pull/126) [`eb59cde`](https://github.com/seek-oss/capsize/commit/eb59cde65705913ab83abd929ab956403efc881b) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - oxygen: Refine missing metrics
+
+  Refines the missing `capHeight` and `xHeight` metrics to align with anchor co-ordinates of relevant glyphs — `H` for capHeight and `x` for xHeight. Previously these values where subjectively observed using the Capsize website.
+
+- [#126](https://github.com/seek-oss/capsize/pull/126) [`eb59cde`](https://github.com/seek-oss/capsize/commit/eb59cde65705913ab83abd929ab956403efc881b) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Add more system fonts
+
+  Expands the metrics library to include more system fonts. Fonts added are:
+
+  - `Tahoma`
+  - `Lucida Grande`
+  - `Verdana`
+  - `Trebuchet MS`
+  - `Georgia`
+  - `Courier New`
+  - `Brush Script`
+
+  The library now support all the [Best Web Safe Fonts](https://www.w3schools.com/cssref/css_websafe_fonts.php).
+
+## 1.0.0
+
+### Major Changes
+
+- [#125](https://github.com/seek-oss/capsize/pull/125) [`5d77f47`](https://github.com/seek-oss/capsize/commit/5d77f4758c32de8703f4869ff7b10cbf0b97af51) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - metrics, unpack: Cut v1 release
+
+  No actual breaking change here, but cutting the v1 release to mark the packages moving out of experimental phase.
+
+### Minor Changes
+
+- [#122](https://github.com/seek-oss/capsize/pull/122) [`8a15c86`](https://github.com/seek-oss/capsize/commit/8a15c8647bb12c85853c6807c1edc9d82a79e6dc) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Update Google Fonts
+
+- [#122](https://github.com/seek-oss/capsize/pull/122) [`8a15c86`](https://github.com/seek-oss/capsize/commit/8a15c8647bb12c85853c6807c1edc9d82a79e6dc) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Calculate and expose `xWidthAvg`, the average width of lowercase characters.
+
+- [#122](https://github.com/seek-oss/capsize/pull/122) [`8a15c86`](https://github.com/seek-oss/capsize/commit/8a15c8647bb12c85853c6807c1edc9d82a79e6dc) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Add `category` field to describe the style of the font, e.g. “serif”, “sans-serif” etc.
+
+  Exposes the `category` field captured by Google Fonts, manually populating it for system fonts.
+
 ## 0.4.0
 
 ### Minor Changes

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 SEEK
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -41,15 +41,20 @@ const capsizeStyles = createStyleObject({
 
 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 |
+| 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 lowercase characters.<br/><br/>Currently derived from latin [character frequencies] in English language, falling back to the built in [xAvgCharWidth] from the OS/2 table. |
+
+[character frequencies]: https://en.wikipedia.org/wiki/Letter_frequency#Relative_frequencies_of_letters_in_other_languages
+[xavgcharwidth]: https://learn.microsoft.com/en-us/typography/opentype/spec/os2#xavgcharwidth
 
 ## Thanks
 

package/aBeeZee.d.ts

@@ -1,12 +1,14 @@
 declare module '@capsizecss/metrics/aBeeZee' {
   interface ABeeZeeMetrics {
     familyName: string;
+    category: string;
     capHeight: number;
     ascent: number;
     descent: number;
     lineGap: number;
     unitsPerEm: number;
     xHeight: number;
+    xWidthAvg: number;
   }
   export const fontMetrics: ABeeZeeMetrics;
   export default fontMetrics;

package/aBeeZee.js

@@ -1,9 +1,11 @@
 module.exports = {
   familyName: 'ABeeZee',
+  category: 'sans-serif',
   capHeight: 700,
   ascent: 920,
   descent: -262,
   lineGap: 0,
   unitsPerEm: 1000,
-  xHeight: 520
+  xHeight: 520,
+  xWidthAvg: 480
 };

package/abel.d.ts

@@ -1,12 +1,14 @@
 declare module '@capsizecss/metrics/abel' {
   interface AbelMetrics {
     familyName: string;
+    category: string;
     capHeight: number;
     ascent: number;
     descent: number;
     lineGap: number;
     unitsPerEm: number;
     xHeight: number;
+    xWidthAvg: number;
   }
   export const fontMetrics: AbelMetrics;
   export default fontMetrics;

package/abel.js

@@ -1,9 +1,11 @@
 module.exports = {
   familyName: 'Abel',
+  category: 'sans-serif',
   capHeight: 1434,
   ascent: 2006,
   descent: -604,
   lineGap: 0,
   unitsPerEm: 2048,
-  xHeight: 1044
+  xHeight: 1044,
+  xWidthAvg: 780
 };

package/abhayaLibre.d.ts

@@ -1,10 +1,12 @@
 declare module '@capsizecss/metrics/abhayaLibre' {
   interface AbhayaLibreMetrics {
     familyName: string;
+    category: string;
     ascent: number;
     descent: number;
     lineGap: number;
     unitsPerEm: number;
+    xWidthAvg: number;
   }
   export const fontMetrics: AbhayaLibreMetrics;
   export default fontMetrics;

package/abhayaLibre.js

@@ -1,7 +1,9 @@
 module.exports = {
   familyName: 'Abhaya Libre',
+  category: 'serif',
   ascent: 860,
   descent: -348,
   lineGap: 0,
-  unitsPerEm: 1024
+  unitsPerEm: 1024,
+  xWidthAvg: 414
 };

package/aboreto.d.ts

@@ -1,12 +1,14 @@
 declare module '@capsizecss/metrics/aboreto' {
   interface AboretoMetrics {
     familyName: string;
+    category: string;
     capHeight: number;
     ascent: number;
     descent: number;
     lineGap: number;
     unitsPerEm: number;
     xHeight: number;
+    xWidthAvg: number;
   }
   export const fontMetrics: AboretoMetrics;
   export default fontMetrics;

package/aboreto.js

@@ -1,9 +1,11 @@
 module.exports = {
   familyName: 'Aboreto',
+  category: 'display',
   capHeight: 700,
   ascent: 930,
   descent: -230,
   lineGap: 0,
   unitsPerEm: 1000,
-  xHeight: 700
+  xHeight: 700,
+  xWidthAvg: 592
 };

package/abrilFatface.d.ts

@@ -1,12 +1,14 @@
 declare module '@capsizecss/metrics/abrilFatface' {
   interface AbrilFatfaceMetrics {
     familyName: string;
+    category: string;
     capHeight: number;
     ascent: number;
     descent: number;
     lineGap: number;
     unitsPerEm: number;
     xHeight: number;
+    xWidthAvg: number;
   }
   export const fontMetrics: AbrilFatfaceMetrics;
   export default fontMetrics;

package/abrilFatface.js

@@ -1,9 +1,11 @@
 module.exports = {
   familyName: 'Abril Fatface',
+  category: 'display',
   capHeight: 700,
   ascent: 1058,
   descent: -291,
   lineGap: 0,
   unitsPerEm: 1000,
-  xHeight: 476
+  xHeight: 476,
+  xWidthAvg: 455
 };

package/abyssinicaSIL.d.ts

@@ -1,12 +1,14 @@
 declare module '@capsizecss/metrics/abyssinicaSIL' {
   interface AbyssinicaSILMetrics {
     familyName: string;
+    category: string;
     capHeight: number;
     ascent: number;
     descent: number;
     lineGap: number;
     unitsPerEm: number;
     xHeight: number;
+    xWidthAvg: number;
   }
   export const fontMetrics: AbyssinicaSILMetrics;
   export default fontMetrics;

package/abyssinicaSIL.js

@@ -1,9 +1,11 @@
 module.exports = {
   familyName: 'Abyssinica SIL',
+  category: 'serif',
   capHeight: 1108,
   ascent: 2034,
   descent: -682,
   lineGap: 0,
   unitsPerEm: 2048,
-  xHeight: 983
+  xHeight: 983,
+  xWidthAvg: 973
 };

package/aclonica.d.ts

@@ -1,12 +1,14 @@
 declare module '@capsizecss/metrics/aclonica' {
   interface AclonicaMetrics {
     familyName: string;
+    category: string;
     capHeight: number;
     ascent: number;
     descent: number;
     lineGap: number;
     unitsPerEm: number;
     xHeight: number;
+    xWidthAvg: number;
   }
   export const fontMetrics: AclonicaMetrics;
   export default fontMetrics;

package/aclonica.js

@@ -1,9 +1,11 @@
 module.exports = {
   familyName: 'Aclonica',
+  category: 'sans-serif',
   capHeight: 1440,
   ascent: 1687,
   descent: -533,
   lineGap: 101,
   unitsPerEm: 2048,
-  xHeight: 1155
+  xHeight: 1155,
+  xWidthAvg: 1125
 };

package/acme.d.ts

@@ -1,12 +1,14 @@
 declare module '@capsizecss/metrics/acme' {
   interface AcmeMetrics {
     familyName: string;
+    category: string;
     capHeight: number;
     ascent: number;
     descent: number;
     lineGap: number;
     unitsPerEm: number;
     xHeight: number;
+    xWidthAvg: number;
   }
   export const fontMetrics: AcmeMetrics;
   export default fontMetrics;

package/acme.js

@@ -1,9 +1,11 @@
 module.exports = {
   familyName: 'Acme',
+  category: 'sans-serif',
   capHeight: 695,
   ascent: 959,
   descent: -307,
   lineGap: 0,
   unitsPerEm: 1000,
-  xHeight: 107
+  xHeight: 107,
+  xWidthAvg: 388
 };

package/actor.d.ts

@@ -1,12 +1,14 @@
 declare module '@capsizecss/metrics/actor' {
   interface ActorMetrics {
     familyName: string;
+    category: string;
     capHeight: number;
     ascent: number;
     descent: number;
     lineGap: number;
     unitsPerEm: number;
     xHeight: number;
+    xWidthAvg: number;
   }
   export const fontMetrics: ActorMetrics;
   export default fontMetrics;

package/actor.js

@@ -1,9 +1,11 @@
 module.exports = {
   familyName: 'Actor',
+  category: 'sans-serif',
   capHeight: 682,
   ascent: 941,
   descent: -262,
   lineGap: 0,
   unitsPerEm: 1000,
-  xHeight: 503
+  xHeight: 503,
+  xWidthAvg: 424
 };

package/adamina.d.ts

@@ -1,12 +1,14 @@
 declare module '@capsizecss/metrics/adamina' {
   interface AdaminaMetrics {
     familyName: string;
+    category: string;
     capHeight: number;
     ascent: number;
     descent: number;
     lineGap: number;
     unitsPerEm: number;
     xHeight: number;
+    xWidthAvg: number;
   }
   export const fontMetrics: AdaminaMetrics;
   export default fontMetrics;

package/adamina.js

@@ -1,9 +1,11 @@
 module.exports = {
   familyName: 'Adamina',
+  category: 'serif',
   capHeight: 796,
   ascent: 1072,
   descent: -290,
   lineGap: 0,
   unitsPerEm: 1000,
-  xHeight: 534
+  xHeight: 534,
+  xWidthAvg: 471
 };

package/adventPro.d.ts

@@ -1,12 +1,14 @@
 declare module '@capsizecss/metrics/adventPro' {
   interface AdventProMetrics {
     familyName: string;
+    category: string;
     capHeight: number;
     ascent: number;
     descent: number;
     lineGap: number;
     unitsPerEm: number;
     xHeight: number;
+    xWidthAvg: number;
   }
   export const fontMetrics: AdventProMetrics;
   export default fontMetrics;

package/adventPro.js

@@ -1,9 +1,11 @@
 module.exports = {
   familyName: 'Advent Pro',
+  category: 'sans-serif',
   capHeight: 700,
   ascent: 964,
   descent: -232,
   lineGap: 0,
   unitsPerEm: 1000,
-  xHeight: 501
+  xHeight: 501,
+  xWidthAvg: 368
 };

package/aguafinaScript.d.ts

@@ -1,12 +1,14 @@
 declare module '@capsizecss/metrics/aguafinaScript' {
   interface AguafinaScriptMetrics {
     familyName: string;
+    category: string;
     capHeight: number;
     ascent: number;
     descent: number;
     lineGap: number;
     unitsPerEm: number;
     xHeight: number;
+    xWidthAvg: number;
   }
   export const fontMetrics: AguafinaScriptMetrics;
   export default fontMetrics;

package/aguafinaScript.js

@@ -1,9 +1,11 @@
 module.exports = {
   familyName: 'Aguafina Script',
+  category: 'handwriting',
   capHeight: 780,
   ascent: 966,
   descent: -581,
   lineGap: 0,
   unitsPerEm: 1000,
-  xHeight: 356
+  xHeight: 356,
+  xWidthAvg: 287
 };

package/akayaKanadaka.d.ts

@@ -1,12 +1,14 @@
 declare module '@capsizecss/metrics/akayaKanadaka' {
   interface AkayaKanadakaMetrics {
     familyName: string;
+    category: string;
     capHeight: number;
     ascent: number;
     descent: number;
     lineGap: number;
     unitsPerEm: number;
     xHeight: number;
+    xWidthAvg: number;
   }
   export const fontMetrics: AkayaKanadakaMetrics;
   export default fontMetrics;

package/akayaKanadaka.js

@@ -1,9 +1,11 @@
 module.exports = {
   familyName: 'Akaya Kanadaka',
+  category: 'display',
   capHeight: 634,
   ascent: 920,
   descent: -276,
   lineGap: 0,
   unitsPerEm: 1000,
-  xHeight: 396
+  xHeight: 396,
+  xWidthAvg: 406
 };

package/akayaTelivigala.d.ts

@@ -1,12 +1,14 @@
 declare module '@capsizecss/metrics/akayaTelivigala' {
   interface AkayaTelivigalaMetrics {
     familyName: string;
+    category: string;
     capHeight: number;
     ascent: number;
     descent: number;
     lineGap: number;
     unitsPerEm: number;
     xHeight: number;
+    xWidthAvg: number;
   }
   export const fontMetrics: AkayaTelivigalaMetrics;
   export default fontMetrics;

package/akayaTelivigala.js

@@ -1,9 +1,11 @@
 module.exports = {
   familyName: 'Akaya Telivigala',
+  category: 'display',
   capHeight: 613,
   ascent: 920,
   descent: -276,
   lineGap: 0,
   unitsPerEm: 1000,
-  xHeight: 450
+  xHeight: 450,
+  xWidthAvg: 409
 };

package/akronim.d.ts

@@ -1,12 +1,14 @@
 declare module '@capsizecss/metrics/akronim' {
   interface AkronimMetrics {
     familyName: string;
+    category: string;
     capHeight: number;
     ascent: number;
     descent: number;
     lineGap: number;
     unitsPerEm: number;
     xHeight: number;
+    xWidthAvg: number;
   }
   export const fontMetrics: AkronimMetrics;
   export default fontMetrics;

package/akronim.js

@@ -1,9 +1,11 @@
 module.exports = {
   familyName: 'Akronim',
+  category: 'display',
   capHeight: 730,
   ascent: 785,
   descent: -314,
   lineGap: 43,
   unitsPerEm: 1000,
-  xHeight: 486
+  xHeight: 486,
+  xWidthAvg: 327
 };

package/akshar.d.ts

@@ -1,12 +1,14 @@
 declare module '@capsizecss/metrics/akshar' {
   interface AksharMetrics {
     familyName: string;
+    category: string;
     capHeight: number;
     ascent: number;
     descent: number;
     lineGap: number;
     unitsPerEm: number;
     xHeight: number;
+    xWidthAvg: number;
   }
   export const fontMetrics: AksharMetrics;
   export default fontMetrics;

package/akshar.js

@@ -1,9 +1,11 @@
 module.exports = {
   familyName: 'Akshar',
+  category: 'sans-serif',
   capHeight: 700,
   ascent: 990,
   descent: -390,
   lineGap: 0,
   unitsPerEm: 1000,
-  xHeight: 500
+  xHeight: 500,
+  xWidthAvg: 382
 };

package/aladin.d.ts

@@ -1,12 +1,14 @@
 declare module '@capsizecss/metrics/aladin' {
   interface AladinMetrics {
     familyName: string;
+    category: string;
     capHeight: number;
     ascent: number;
     descent: number;
     lineGap: number;
     unitsPerEm: number;
     xHeight: number;
+    xWidthAvg: number;
   }
   export const fontMetrics: AladinMetrics;
   export default fontMetrics;

package/aladin.js

@@ -1,9 +1,11 @@
 module.exports = {
   familyName: 'Aladin',
+  category: 'handwriting',
   capHeight: 387,
   ascent: 905,
   descent: -321,
   lineGap: 0,
   unitsPerEm: 1000,
-  xHeight: 337
+  xHeight: 337,
+  xWidthAvg: 328
 };

package/alata.d.ts

@@ -1,12 +1,14 @@
 declare module '@capsizecss/metrics/alata' {
   interface AlataMetrics {
     familyName: string;
+    category: string;
     capHeight: number;
     ascent: number;
     descent: number;
     lineGap: number;
     unitsPerEm: number;
     xHeight: number;
+    xWidthAvg: number;
   }
   export const fontMetrics: AlataMetrics;
   export default fontMetrics;

package/alata.js

@@ -1,9 +1,11 @@
 module.exports = {
   familyName: 'Alata',
+  category: 'sans-serif',
   capHeight: 735,
   ascent: 1100,
   descent: -280,
   lineGap: 0,
   unitsPerEm: 1000,
-  xHeight: 459
+  xHeight: 459,
+  xWidthAvg: 453
 };

package/alatsi.d.ts

@@ -1,12 +1,14 @@
 declare module '@capsizecss/metrics/alatsi' {
   interface AlatsiMetrics {
     familyName: string;
+    category: string;
     capHeight: number;
     ascent: number;
     descent: number;
     lineGap: number;
     unitsPerEm: number;
     xHeight: number;
+    xWidthAvg: number;
   }
   export const fontMetrics: AlatsiMetrics;
   export default fontMetrics;

package/alatsi.js

@@ -1,9 +1,11 @@
 module.exports = {
   familyName: 'Alatsi',
+  category: 'sans-serif',
   capHeight: 1394,
   ascent: 2000,
   descent: -560,
   lineGap: 0,
   unitsPerEm: 2000,
-  xHeight: 996
+  xHeight: 996,
+  xWidthAvg: 860
 };