sunday-serif 0.2.0 → 0.2.1

package/README.md

@@ -1,20 +1,51 @@
-# sunday-serif
+<p align="center">
+  <a href="https://sunday-serif.kkratter.com/"><img src="https://raw.githubusercontent.com/kkratterf/sunday-serif/main/.github/readme/banner-light.png" alt="Sunday Serif. A soft serif for slow days, with print effects on variable axes." width="100%"></a>
+</p>
+
+<p align="center">
+  <a href="https://sunday-serif.kkratter.com/">Website</a>
+  &nbsp;·&nbsp;
+  <a href="https://github.com/kkratterf/sunday-serif">GitHub</a>
+  &nbsp;·&nbsp;
+  <a href="https://github.com/kkratterf/sunday-serif/releases/latest">Desktop fonts</a>
+  &nbsp;·&nbsp;
+  <a href="#license">OFL 1.1</a>
+</p>
 
 **A soft serif for slow days.** Free and open-source, with print effects on variable axes.
 
-Webfonts for [Sunday Serif](https://sunday-serif.kkratter.com): a weight axis (400–600) and three effects: Light Burn (`BURN`), Ink Bleed (`INKB`) and
-Worn Print (`WORN`). Desktop fonts (TTF, OTF) are on the
-[GitHub releases](https://github.com/kkratterf/sunday-serif/releases/latest).
+The webfonts of Sunday Serif, with ready `@font-face` rules and `next/font` objects. A text face in roman and italic, from Regular to SemiBold, with three axes borrowed from the print shop: exposure, ink and wear.
 
 ```bash
 pnpm add sunday-serif
 ```
 
-| Import | Family | What | Size |
+## Effects
+
+<img src="https://raw.githubusercontent.com/kkratterf/sunday-serif/main/.github/readme/effects-light.png" alt="Light Burn from 0 to 100 across the letters of its own name; Ink Bleed and Worn Print at 0 and at 100." width="100%">
+
+| Axis | Tag | Range | |
 | --- | --- | --- | --- |
-| `sunday-serif/text.css` | `Sunday Serif` | Weight only, effects at their default. For all text | ~45 KB per style |
-| `sunday-serif/fx.css` | `Sunday Serif FX` | Weight plus the three effect axes. Only where effects show | ~500 KB per style |
-| `sunday-serif/grain.css` | `Sunday Serif Grain` | Display cut with the Grain Blur axis (`GRAN`), Regular and Italic | ~1.5 MB per style |
+| Weight | `wght` | 400 to 600, default 400 | Regular, Medium, SemiBold and everything between. |
+| Light Burn | `BURN` | 0 to 100, default 0 | Overexposure. The ink spreads until the counters fill in. |
+| Ink Bleed | `INKB` | 0 to 100, default 0 | Ink spreading into the paper. Rounder forms, slightly tighter spacing. |
+| Worn Print | `WORN` | 0 to 100, default 0 | The wear of an old press: grain at the edges, dust, starved patches. |
+
+## Grain Blur
+
+<img src="https://raw.githubusercontent.com/kkratterf/sunday-serif/main/.github/readme/grain-light.png" alt="Grain Blur from 0 to 100 across the letters of its own name." width="100%">
+
+Sunday Serif Grain is a separate display family with one axis, `GRAN` (0 to 100): a blur made of grain, like a dithered photo. Spacing never changes.
+
+## What to import
+
+| Import | Family | Axes | Size per style | |
+| --- | --- | --- | --- | --- |
+| `sunday-serif/text.css` | `Sunday Serif` | `wght` | ~55 KB | Running text |
+| `sunday-serif/fx.css` | `Sunday Serif FX` | `wght` `BURN` `INKB` `WORN` | ~1.8 MB | Only where an effect shows |
+| `sunday-serif/grain.css` | `Sunday Serif Grain` | `GRAN` | ~1.5 MB | Display lines |
+
+A browser downloads a font only when some text uses its family, so the heavier cuts cost nothing on pages that do not use them.
 
 ## Next.js
 
@@ -42,53 +73,32 @@ body {
 }
 ```
 
-`SundaySerif` is preloaded; `SundaySerifFX` is not, so it only downloads
-on pages that use it.
+`SundaySerif` is preloaded. `SundaySerifFX` and `SundaySerifGrain` (`--font-sunday-serif-grain`) are not.
 
 ## Any bundler
 
 ```js
 import "sunday-serif/text.css";
-import "sunday-serif/fx.css"; // only if you use the effects
-import "sunday-serif/grain.css"; // only if you use Grain Blur
+import "sunday-serif/fx.css";    // where effects show
+import "sunday-serif/grain.css"; // for Grain Blur
 ```
 
-Then use `font-family: "Sunday Serif"`, `"Sunday Serif FX"` and `"Sunday Serif Grain"`.
+## Effects in CSS
 
-## Effects
-
-`font-variation-settings` replaces the whole list each time it is set, so set all three
-effects together, for example through custom properties:
+`font-variation-settings` replaces the whole list each time it is set. Keep each effect in a custom property and write them together:
 
 ```css
 .with-effects {
   font-family: "Sunday Serif FX", "Sunday Serif", serif;
   font-variation-settings: "BURN" var(--burn, 0), "INKB" var(--ink, 0), "WORN" var(--worn, 0);
+  transition: font-variation-settings 0.6s ease;
 }
-```
-
-| Axis | Tag | Range | Default |
-| --- | --- | --- | --- |
-| Weight | `wght` | 400–600 | 400 |
-| Light Burn | `BURN` | 0–100 | 0 |
-| Ink Bleed | `INKB` | 0–100 | 0 |
-| Worn Print | `WORN` | 0–100 | 0 |
-
-## Grain Blur
-
-Sunday Serif Grain is a separate display cut: a blur made of grain, like a dithered photo.
-At 0 the letters are plain; towards 100 a cloud of ink dots spreads out from every edge.
-Spacing never changes.
-
-```css
 .grainy {
   font-family: "Sunday Serif Grain", "Sunday Serif", serif;
   font-variation-settings: "GRAN" 80;
 }
 ```
 
-`SundaySerifGrain` in `sunday-serif/next` sets `--font-sunday-serif-grain`.
-
 ## License
 
-[SIL Open Font License 1.1](OFL.txt), with Reserved Font Name "Sunday Serif".
+[SIL Open Font License 1.1](OFL.txt), with Reserved Font Name "Sunday Serif". Designed by [Federico Kratter Thaler](https://kkratter.com) for [Sunday](https://joinsunday.co).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunday-serif",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A soft serif for slow days. Free and open-source, with print effects on variable axes: webfonts, CSS and next/font helpers.",
   "keywords": [
     "font",