Mona Sans

Download Mona Sans • Typeface microsite ↗️

A strong and versatile typeface, designed together with Degarism 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.

Mona Sans is a variable font. 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.

Variable font usage

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:

@font-face {
  font-family: 'Mona Sans VF';
  src:
    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 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:

.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, you can preload the font in the head of your document:

<link rel="preload" href="MonaSansVF[wdth,wght,opsz,ital].woff2" as="font" type="font/woff2" crossorigin>

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 ten 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	Square G
ss08	Tabular zero with straight bar
ss09	Q with diagonal arm
ss10	J with bowl

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:

html {
  font-family: 'Mona Sans VF';
  font-feature-settings: "ss01" on, "ss03" on, "ss05" on;
}

Ligatures

Mona Sans comes with seven ligatures:

Ligature	Example
ff
ffi
fy
fi
fl
ti
tt

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

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.