4.9 KiB

Исходник Постоянная ссылка Ответственный История

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.

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:

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

<link rel="preload" href="Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>

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.:

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 */
}