@springernature/brand-context - npm Package Compare versions

Comparing version 13.2.1 to 14.0.0

HISTORY.md

 # History
 
+## 14.0.0 (2021-08-31)
+    * BREAKING:
+        * Switch springernature context fonts to Variable fonts
+        * Swap Daytona with Merriweather Sans
+        * Remove all springernature context fonts from the fonts folder
+    * Add the 2 new variable fonts into springernature context fonts folder
+    * Add documentation about fonts in springernature context README
+
 ## 13.2.1 (2021-08-23)
@@ -4,0 +12,0 @@ * Add will-change: tranform reflow on focus mixin

package.json

 {
   "name": "@springernature/brand-context",
-  "version": "13.2.1",
+  "version": "14.0.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "Bootstrapping for all components and products",

springernature/README.md

@@ -0,1 +1,87 @@
+## Fonts
+
+We are using Merriweather as a variable font for both `serif` and `sans-serif`.
+
+Browsers that support variable fonts also support the `woff2` format. We therefore
+do not need to serve other formats.
+
+Browsers that do not support variable fonts will fallback to the system fonts
+specified in the `$context--font-family-serif` and `$context--font-family-sans`
+SASS variable, respectively `'Merriweather'` and `'Merriweather Sans'`.
+
+So far our `Merriweather` font instance only includes the [Weight variation
+axis](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#weight).  
+At the time of writing, `Merriweather` supports the additional [Width
+variation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#width) and [Optical Size variation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#optical_size) as well.  
+If at any point in the future there is a need for these variations, you will
+need to start over the font generation process as described below, leaving in
+the variations you need. **Beware** though, the font file weight will increase
+with the amount of variations you add.
+At the time of writing `Merriweather Sans` only supports the [Weight variation
+axis](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#weight).  
+It is worth noting that we also optimised the available `font-weight` range at
+the font generation step to only span from `300` to `700`.  
+If at any point in the future there is a need for a different range, you will
+need to start over the font generation process as described below, specifying
+the new range. **Beware** though, the font file weight will increase the broader
+the range is.
+
+### Font generation process
+
+#### Original fonts download
+
+- [Download Merriweather](https://github.com/SorkinType/Merriweather/blob/master/fonts/variable/Merriweather%5Bopsz%2Cwdth%2Cwght%5D.ttf)
+- [Download Merriweather Sans](https://github.com/SorkinType/Merriweather-Sans/blob/master/fonts/variable/MerriweatherSans%5Bwght%5D.ttf)
+
+#### Tools needed
+
+- fonttools ([Install fonttools](https://pypi.org/project/fonttools/))
+- varLib instancer ([varLib instancer documentation](https://fonttools.readthedocs.io/en/latest/varLib/instancer.html))
+- woff2 library ([How To Convert Variable TTF Font Files to WOFF2](https://henry.codes/writing/how-to-convert-variable-ttf-font-files-to-woff2/))
+
+#### Generating Merriweather-Variable.woff2
+
+In the following commands, it is assumed that CLI tools are included in your
+`PATH`, if not you should use the absolute path to their binaries.
+
+1. Download Merriweather font under the name of `Merriweather-Variable.ttf`
+2. In the Terminal navigate to the folder you have just downloaded the font to
+3. Run `fonttools varLib.instancer ./Merriweather-Variable.ttf wdth=drop opsz=drop wght=300:700`
+4. Run `woff2_compress ./Merriweather-Variable-partial.ttf`
+5. Run `mv ./Merriweather-Variable-partial.woff2 ./Merriweather-Variable.woff2`
+6. Copy `Merriweather-Variable.woff2` to your app's font folder
+
+#### Generating MerriweatherSans-Variable.woff2
+
+In the below commands, it is considered the CLI tools are in the `PATH`, if not
+you should use the absolute path to their binaries.
+
+1. Download Merriweather Sans font under the name of `MerriweatherSans-Variable.ttf`
+2. In the Terminal navigate to the folder you have just downloaded the font to
+3. Run `fonttools varLib.instancer ./MerriweatherSans-Variable.ttf wght=300:700`
+4. Run `woff2_compress ./MerriweatherSans-Variable-partial.ttf`
+5. Run `mv ./MerriweatherSans-Variable-partial.woff2 ./MerriweatherSans-Variable.woff2`
+6. Copy `MerriweatherSans-Variable.woff2` to your app's font folder
+
+#### Declaring the fonts in the CSS
+
+```javascript
+@font-face {
+	font-family: 'Merriweather';
+	src: url('/PUBLIC-PATH-TO-FONTS-FOLDER/Merriweather-Variable.woff2') format('woff2 supports variations'),
+	url('/PUBLIC-PATH-TO-FONTS-FOLDER/Merriweather-Variable.woff2') format('woff2-variations');
+	font-weight: 300 700;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Merriweather Sans';
+	src: url('/PUBLIC-PATH-TO-FONTS-FOLDER/MerriweatherSans-Variable.woff2') format('woff2 supports variations'),
+	url('/PUBLIC-PATH-TO-FONTS-FOLDER/MerriweatherSans-Variable.woff2') format('woff2-variations');
+	font-weight: 300 700;
+	font-display: swap;
+}
+```
+
+
 ## Icons
@@ -2,0 +88,0 @@

New alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

3764800

decreased by-22.96%

Number of package files

252

decreased by-3.45%

Lines of code

0

decreased by-100%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes