Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/github/mona-sans
Mona Sans, a variable font from GitHub
https://github.com/github/mona-sans
font variable-fonts
Last synced: 27 days ago
JSON representation
Mona Sans, a variable font from GitHub
- Host: GitHub
- URL: https://github.com/github/mona-sans
- Owner: github
- License: ofl-1.1
- Created: 2022-08-15T19:10:38.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-17T12:11:23.000Z (4 months ago)
- Last Synced: 2024-10-01T22:22:14.930Z (about 1 month ago)
- Topics: font, variable-fonts
- Homepage: http://github.com/mona-sans
- Size: 51.5 MB
- Stars: 3,658
- Watchers: 166
- Forks: 86
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
- Support: SUPPORT.md
- Authors: AUTHORS.txt
Awesome Lists containing this project
- my-awesome-list - mona-sans
README
# Mona Sans
[Download Mona Sans](https://github.com/github/mona-sans/releases/latest) • [Typeface microsite](https://github.com/mona-sans) ↗️
A strong and versatile typeface, designed together with [Degarism](https://degarism.com/) and inspired by industrial-era grotesques. Mona Sans works well across product, web, and print. Made to work well together with Mona Sans's sidekick, [Hubot Sans](https://github.com/github/hubot-sans).
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.
## 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:
```css
@font-face {
font-family: 'Mona Sans';
src:
url('Mona-Sans.woff2') format('woff2 supports variations'),
url('Mona-Sans.woff2') format('woff2-variations');
font-weight: 200 900;
font-stretch: 75% 125%;
}
html {
font-family: 'Mona Sans';
}
```
To reduce [CLS](https://web.dev/cls/), you can preload the font in the `head` of your document:
```html
```
## Styles
| Style Name | Italic Name | Weight | Width |
| --- | --- | --- | --- |
| UltraLight Narrow | UltraLight Narrow Italic | 200 | 75 |
| Light Narrow | Light Narrow Italic | 300 | 75 |
| Regular Narrow | Regular Narrow Italic | 400 | 75 |
| Medium Narrow | Medium Narrow Italic | 500 | 75 |
| SemiBold Narrow | SemiBold Narrow Italic | 600 | 75 |
| Bold Narrow | Bold Narrow Italic | 700 | 75 |
| ExtraBold Narrow | ExtraBold Narrow Italic | 800 | 75 |
| Black Narrow | Black Narrow Italic | 900 | 75 |
| 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 Wide | UltraLight Wide Italic | 200 | 125 |
| Light Wide | Light Wide Italic | 300 | 125 |
| Regular Wide | Regular Wide Italic | 400 | 125 |
| Medium Wide | Medium Wide Italic | 500 | 125 |
| SemiBold Wide | SemiBold Wide Italic | 600 | 125 |
| Bold Wide | Bold Wide Italic | 700 | 125 |
| ExtraBold Wide | ExtraBold Wide Italic | 800 | 125 |
| Black Wide | Black Wide Italic | 900 | 125 |
## Stylistic sets
Mona Sans has eight stylistic sets:
| Set | Description | Example |
| --- | --- | --- |
| ss01 | Square diacritical marks |  |
| ss02 | Wide uppercase I |  |
| ss03 | Lowercase l with tail |  |
| ss04 | Lowercase l with top serif |  |
| ss05 | Double-storey a |  |
| ss06 | Double-storey g |  |
| ss07 | Round G |  |
| ss08 | Tabular zero with straight bar |  |
When using Mona Sans on the web, you can control each stylistic set with the syntax `"ssXX" on/off`, e.g.:
```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 */
}
```
## Ligatures
Mona Sans comes with seven ligatures:
| Ligature | Example |
| --- | --- |
| ff |  |
| ffi |  |
| fy |  |
| fi |  |
| fl |  |
| ti |  |
| tt |  |
## License
Mona Sans is licensed under the [SIL Open Font License v1.1](https://scripts.sil.org/OFL).