Merge pull request #93 from github/mona-sans-opsz-and-mono

Mona Sans Display styles and Mona Sans Mono

Author: kylewaynebenson

.github/workflows/release.yml

@@ -0,0 +1,137 @@
+name: Create Release
+# Release workflow for Mona Sans
+
+on:
+  push:
+    tags:
+      - 'v*.*'  # Matches tags like v1.300, etc.
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version for testing (e.g., "test-1.4" or "dev-2024-01-01")'
+        required: true
+        default: 'test-1.4'
+        type: string
+
+permissions:
+  contents: write  # Required to create releases and upload assets
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0  # Full history for proper release notes
+      
+      - name: Extract version from tag or input
+        id: version
+        run: |
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            VERSION="${{ github.event.inputs.version }}"
+            if [[ "$VERSION" == v* ]]; then
+              TAG="$VERSION"
+            else
+              TAG="v$VERSION"
+            fi
+            echo "version=${VERSION}" >> $GITHUB_OUTPUT
+            echo "tag=${TAG}" >> $GITHUB_OUTPUT
+          else
+            VERSION=${GITHUB_REF#refs/tags/v}
+            echo "version=${VERSION}" >> $GITHUB_OUTPUT
+            echo "tag=${GITHUB_REF#refs/tags/}" >> $GITHUB_OUTPUT
+          fi
+      
+      - name: Build fonts
+        run: |
+          cd sources
+          bash build.sh
+          cd ..
+        env:
+          FB_CONTINUE_ON_ERROR: true
+      
+      - name: Prepare release artifacts
+        run: |
+          mkdir -p release-artifacts
+          
+          # Create static fonts package (OTF + TTF)
+          zip -r "release-artifacts/mona-sans-static-v${{ steps.version.outputs.version }}.zip" \
+            fonts/static/ OFL.txt README.md
+          
+          # Create variable fonts package  
+          zip -r "release-artifacts/mona-sans-variable-v${{ steps.version.outputs.version }}.zip" \
+            fonts/variable/ OFL.txt README.md
+          
+          # Create webfonts package
+          if [ -d "fonts/webfonts" ]; then
+            zip -r "release-artifacts/mona-sans-webfonts-v${{ steps.version.outputs.version }}.zip" \
+              fonts/webfonts/ OFL.txt README.md
+          fi
+          
+          # Create complete package with all formats
+          zip -r "release-artifacts/mona-sans-complete-v${{ steps.version.outputs.version }}.zip" \
+            fonts/ -x "fonts/googlefonts/*" -x "fonts/googlefonts/**" \
+            OFL.txt README.md
+      
+      - name: Create release notes
+        id: release_notes
+        run: |
+          cat > release_notes.md << 'EOF'
+          # Mona Sans ${{ steps.version.outputs.tag }}
+
+          A versatile typeface, designed by GitHub together with Degarism and inspired by industrial-era grotesques. Mona Sans works well across product, web, and print.
+
+          ## Font Packages
+          
+          - **Static Fonts** - Individual OTF and TTF files for each weight, width, and style
+          - **Variable Fonts** - Modern variable font files with adjustable weight and width
+          - **Web Fonts** - WOFF/WOFF2 files optimized for web use
+          - **Complete Package** - All font formats in one download
+          
+          See the [README](https://github.com/github/mona-sans#readme) for detailed installation instructions.
+          
+          ## Font Specifications
+          
+          - **Weight Range**: 200-900 (ExtraLight to Black)
+          - **Width Range**: 75-125 (Condensed to Expanded)
+          - **Styles**: Roman and Italic
+          - **Format Support**: OTF, TTF, Variable TTF, WOFF, WOFF2
+          EOF
+      
+      - name: Create draft release with assets
+        uses: softprops/action-gh-release@v2
+        with:
+          tag_name: ${{ steps.version.outputs.tag }}
+          name: Mona Sans ${{ steps.version.outputs.tag }}
+          body_path: release_notes.md
+          draft: true
+          prerelease: false
+          files: |
+            release-artifacts/mona-sans-static-v${{ steps.version.outputs.version }}.zip
+            release-artifacts/mona-sans-variable-v${{ steps.version.outputs.version }}.zip
+            release-artifacts/mona-sans-webfonts-v${{ steps.version.outputs.version }}.zip
+            release-artifacts/mona-sans-complete-v${{ steps.version.outputs.version }}.zip
+      
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: mona-sans-fonts-v${{ steps.version.outputs.version }}
+          path: fonts/
+      
+      - name: Summary
+        run: |
+          echo "## Release Summary" >> $GITHUB_STEP_SUMMARY
+          echo "Created draft release: **Mona Sans ${{ steps.version.outputs.tag }}**" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "### Uploaded Assets:" >> $GITHUB_STEP_SUMMARY
+          find release-artifacts -maxdepth 1 -name '*.zip' -print0 | while IFS= read -r -d '' file; do
+            filename=$(basename "$file")
+            size=$(stat -c %s "$file")
+            # Convert size in bytes to human-readable format
+            hr_size=$(numfmt --to=iec-i --suffix=B "$size")
+            echo "- $filename ($hr_size)" >> $GITHUB_STEP_SUMMARY
+          done
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "🔗 **[View Draft Release](https://github.com/${{ github.repository }}/releases/tag/${{ steps.version.outputs.tag }})**" >> $GITHUB_STEP_SUMMARY

.gitignore

@@ -1,2 +1,7 @@
 .DS_Store
-*).glyphs
+*).glyphs
+
+# Ignore ninja and ufo build files
+sources/instance_ufos
+sources/.ninja_log
+sources/build.ninja

README.md

@@ -6,98 +6,73 @@ A strong and versatile typeface, designed together with [Degarism](https://degar
 
 Mona Sans is a [variable font](https://web.dev/variable-fonts/). Variable fonts enable different variations of a typeface to be incorporated into one single file, and are supported by all major browsers, allowing for performance benefits and granular design control of the typeface's weight, width, and slant.
 
-![mona-sans](https://user-images.githubusercontent.com/99746865/200648883-dbd47e9a-9d95-483e-aef6-1bfa602eb942.png)
+![mona-sans](https://github.com/user-attachments/assets/3d9667f5-30ad-4b95-bc8a-58e38767187c)
 
-## Usage
+## Variable font usage
 
-For web, we recommend using `Mona Sans.woff2`. Define the font with a `@font-face` rule, set its **weight** and **stretch** ranges, and use it:
+The design space is large, so we've split the font up into a few variable fonts.
+
+If you want to access the whole design space, use `MonaSansVF[wdth,wght,opsz,ital]`. On the web, you can utilize points on that space like this:
 
 ```css
 @font-face {
-  font-family: 'Mona Sans';
+  font-family: 'Mona Sans VF';
   src:
-    url('Mona-Sans.woff2') format('woff2 supports variations'),
-    url('Mona-Sans.woff2') format('woff2-variations');
+    url('MonaSansVF[wdth,wght,opsz,ital].woff2') format('woff2 supports variations'),
+    url('MonaSansVF[wdth,wght,opsz,ital].woff2') format('woff2-variations');
   font-weight: 200 900;
   font-stretch: 75% 125%;
+  font-optical-sizing: auto;
 }
 
 html {
-  font-family: 'Mona Sans';
+  font-family: 'Mona Sans VF';
+}
+```
+
+Mona Sans includes an optical size axis (`opsz`) that automatically adjusts the font's design for optimal readability at different sizes. The optical size range spans from 1 to 100, where smaller values (1-20) are optimized for body text with improved readability, while larger values (21-100) are designed for display use with refined details and tighter spacing. When `font-optical-sizing: auto` is set, browsers will automatically select the appropriate optical size based on the font size, or you can manually control it using `font-variation-settings: "opsz" [value]`. That looks like this:
+
+```css
+.heading {
+  font-variation-settings: "wght" 700, "wdth" 125, "opsz" 72; /* Bold, Expanded, Display size */
+}
+
+.body-text {
+  font-variation-settings: "wght" 400, "wdth" 100, "opsz" 12; /* Regular, Normal width, Text size */
 }
 ```
 
 To reduce [CLS](https://web.dev/cls/), you can preload the font in the `head` of your document:
 
 ```html
-<link rel="preload" href="Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="MonaSansVF[wdth,wght,opsz,ital].woff2" as="font" type="font/woff2" crossorigin>
 ```
 
-## Styles
-| Style Name | Italic Name | Weight | Width |
-| --- | --- | --- | --- |
-| UltraLight Condensed | UltraLight Condensed Italic | 200 | 75 |
-| Light Condensed | Light Condensed Italic | 300 | 75 |
-| Regular Condensed | Regular Condensed Italic | 400 | 75 |
-| Medium Condensed | Medium Condensed Italic | 500 | 75 |
-| SemiBold Condensed | SemiBold Condensed Italic | 600 | 75 |
-| Bold Condensed | Bold Condensed Italic | 700 | 75 |
-| ExtraBold Condensed | ExtraBold Condensed Italic | 800 | 75 |
-| Black Condensed | Black Condensed Italic | 900 | 75 |
-| UltraLight SemiCondensed | UltraLight SemiCondensed Italic | 200 | 87.5 |
-| Light SemiCondensed | Light SemiCondensed Italic | 300 | 87.5 |
-| Regular SemiCondensed | Regular SemiCondensed Italic | 400 | 87.5 |
-| Medium SemiCondensed | Medium SemiCondensed Italic | 500 | 87.5 |
-| SemiBold SemiCondensed | SemiBold SemiCondensed Italic | 600 | 87.5 |
-| Bold SemiCondensed | Bold SemiCondensed Italic | 700 | 87.5 |
-| ExtraBold SemiCondensed | ExtraBold SemiCondensed Italic | 800 | 87.5 |
-| Black SemiCondensed | Black SemiCondensed Italic | 900 | 87.5 |
-| UltraLight | UltraLight Italic | 200 | 100 |
-| Light | Light Italic | 300 | 100 |
-| Regular | Regular Italic | 400 | 100 |
-| Medium | Medium Italic | 500 | 100 |
-| SemiBold | SemiBold Italic | 600 | 100 |
-| Bold | Bold Italic | 700 | 100 |
-| ExtraBold | ExtraBold Italic | 800 | 100 |
-| Black | Black Italic | 900 | 100 |
-| UltraLight SemiExpanded | UltraLight SemiExpanded Italic | 200 | 112.5 |
-| Light SemiExpanded | Light SemiExpanded Italic | 300 | 112.5 |
-| Regular SemiExpanded | Regular SemiExpanded Italic | 400 | 112.5 |
-| Medium SemiExpanded | Medium SemiExpanded Italic | 500 | 112.5 |
-| SemiBold SemiExpanded | SemiBold SemiExpanded Italic | 600 | 112.5 |
-| Bold SemiExpanded | Bold SemiExpanded Italic | 700 | 112.5 |
-| ExtraBold SemiExpanded | ExtraBold SemiExpanded Italic | 800 | 112.5 |
-| Black SemiExpanded | Black SemiExpanded Italic | 900 | 112.5 |
-| UltraLight Expanded | UltraLight Expanded Italic | 200 | 125 |
-| Light Expanded | Light Expanded Italic | 300 | 125 |
-| Regular Expanded | Regular Expanded Italic | 400 | 125 |
-| Medium Expanded | Medium Expanded Italic | 500 | 125 |
-| SemiBold Expanded | SemiBold Expanded Italic | 600 | 125 |
-| Bold Expanded | Bold Expanded Italic | 700 | 125 |
-| ExtraBold Expanded | ExtraBold Expanded Italic | 800 | 125 |
-| Black Expanded | Black Expanded Italic | 900 | 125 |
+Or you can use one of the other variable font files, which cover small portions of the design space. For example, if you're only using the regular width weights and the italic styles, you can use the `MonaSansVF[wght,opsz,ital]` file instead.
 
 ## Stylistic sets
 
-Mona Sans has eight stylistic sets:
+Mona Sans has ten stylistic sets:
 
 | Set | Description | Example |
 | --- | --- | --- | 
-| ss01 | Square diacritical marks | ![ss01](https://github.com/user-attachments/assets/18fa3132-6839-4ef9-afd9-c75a082899ef) |
-| ss02 | Wide uppercase I | ![ss02](https://github.com/user-attachments/assets/a0de7f9c-f9c0-4583-ac32-a10d25a54328) |
-| ss03 | Lowercase l with tail | ![ss03](https://github.com/user-attachments/assets/8594effd-0528-4af9-8c58-0dfba66b2b45) |
-| ss04 | Lowercase l with top serif | ![ss04](https://github.com/user-attachments/assets/7c7610a9-947e-45d5-80fc-71849a257d82) |
-| ss05 | Double-storey a | ![ss05](https://github.com/user-attachments/assets/d31a11b8-1809-4a34-bbcb-b8b7057ddef0) |
-| ss06 | Double-storey g | ![ss06](https://github.com/user-attachments/assets/ca8bef04-68d8-4c36-bfa6-8313d5642a9d) |
-| ss07 | Round G | ![ss07](https://github.com/user-attachments/assets/4d5fb045-df90-4dc7-8dbb-3f2a271477df) |
-| ss08 | Tabular zero with straight bar | ![ss08](https://github.com/user-attachments/assets/6c54f0eb-0054-4876-a366-1c00d955b89b) |
-
-When using Mona Sans on the web, you can control each stylistic set with the syntax `"ssXX" on/off`, e.g.:
+| ss01 | Square diacritical marks | <img src="https://github.com/user-attachments/assets/c8be9ca8-8d7a-46d5-843a-7dfc0ca9a171" width="400"> |
+| ss02 | Wide uppercase I | <img src="https://github.com/user-attachments/assets/f971d907-c8a5-4fbf-ac75-bf3411a00f57" width="400"> |
+| ss03 | Lowercase l with tail | <img src="https://github.com/user-attachments/assets/e20dd37c-f7ba-4964-8888-dd679ed7d3fc" width="400"> |
+| ss04 | Lowercase l with top serif | <img src="https://github.com/user-attachments/assets/6aa71393-642e-4989-843d-4c2b9d6b5a1c" width="400"> |
+| ss05 | Double-storey a | <img src="https://github.com/user-attachments/assets/c411d743-0bb8-4f15-ad30-769c6d5b83d5" width="400"> |
+| ss06 | Double-storey g | <img src="https://github.com/user-attachments/assets/cc640587-6505-49a9-836c-a4a091b0a4cb" width="400"> |
+| ss07 | Square G | <img src="https://github.com/user-attachments/assets/2c973b98-8398-4ab2-bb74-45980de799ea" width="400"> |
+| ss08 | Tabular zero with straight bar | <img src="https://github.com/user-attachments/assets/1efe404b-ca17-4dbb-877e-47a7080d2785" width="400"> |
+| ss09 | Q with diagonal arm | <img src="https://github.com/user-attachments/assets/5f7f28e7-d325-496a-8362-21d7a71b362a" width="400"> |
+| ss10 | J with bowl | <img src="https://github.com/user-attachments/assets/5a0776c8-8acf-41ad-ba23-e26515bc1f8e" width="400"> |
+
+When using Mona Sans on the web, you can control each stylistic set with the syntax `"ssXX" on/off`. If you wanted square diacritical marks, small letter L distinct from capital I, and alternative small letter g it would look like this:
 
 ```css
 html {
-  font-family: 'Mona Sans';
-  font-feature-settings: "ss01" on, "ss03" on, "ss05" on; /* Turns on square diacritical marks, small letter L distinct from capital I, and alternative small letter g */
+  font-family: 'Mona Sans VF';
+  font-feature-settings: "ss01" on, "ss03" on, "ss05" on;
 }
 ```
 
@@ -115,5 +90,44 @@ Mona Sans comes with seven ligatures:
 | ti | ![ti](https://github.com/user-attachments/assets/556aab9f-e8f5-40dd-b8d2-70903d0cab65) | 
 | tt | ![tt](https://github.com/user-attachments/assets/d0392c30-2b8c-4646-b578-0ae66a328505) | 
 
+## Mona Sans Styles
+
+With the newly added monospace and display styles, Mona Sans’ design space now spans 128 instances. Below is a map for the whole space. Style entries with a hyphen are elidable, meaning they are the default and have no name.
+
+| Axes | Mapping | Style name |
+| --- | --- | --- |
+| Weight (wght) | 200 | ExtraLight |
+|  | 300 | Light |
+| - | 400 | Regular |
+| - | 500 | Medium |
+| - | 600 | SemiBold |
+| - | 700 | Bold |
+| - | 800 | ExtraBold |
+| - | 900 | Black |
+| Width (wdth) | 75 | Condensed |
+| - | 87.5 | SemiCondensed |
+| - | 100 | - |
+| - | 112.5 | SemiExpanded |
+| - | 125 | Expanded |
+| Italic (ital) | 0 | Roman |
+| - | 1 | Italic |
+| Optical Size (opsz) | 20 | - |
+| - | 72 | Display |
+
+### Mona Sans Monospace Styles
+
+![mona-mono](https://github.com/user-attachments/assets/dd55d2ac-8ba4-4126-89e3-6b125b090fc7)
+
+| Family or Axes | Mapping | Styles |
+| --- | --- | --- |
+| Weight (wght) | 200 | ExtraLight |
+| - | 300 | Light |
+| - | 400 | Regular |
+| - | 500 | Medium |
+| - | 600 | SemiBold |
+| - | 700 | Bold |
+| - | 800 | ExtraBold |
+| - | 900 | Black |
+
 ## License
 Mona Sans is licensed under the [SIL Open Font License v1.1](https://scripts.sil.org/OFL).