Noi Grotesk
Noi Grotesk is a neo-grotesk family inspired by the swiss traditions of typography with a more contemporary and friendly touch. Thanks to its many features and alternates Noi is surprisingly versatile. 

OpenType Alternates

OpenType Features

Variable Settings

Languages Supported:
Afrikaans, Albanian, Asu, Basque, Bemba, Bena, Breton, Catalan, Chiga, Colognian, Cornish, Croatian, Czech, Danish, Dutch, Embu, English, Esperanto, Estonian, Faroese, Filipino, Finnish, French, Friulian, Galician, Ganda, German, Gusii, Hungarian, Inari, Sami, Indonesian, Irish, Italian, Jola–Fonyi, Kabuverdianu, Kalaallisut, Kalenjin, Kamba, Kikuyu, Kinyarwanda, Latvian, Lithuanian, Lower, Sorbian, Luo, Luxembourgish, Luyia, Machame, Makhuwa, Meetto, Makonde, Malagasy, Maltese, Manx, Meru, Morisyen, Northern, Sami, North, Ndebele, Norwegian, Bokmål, Nynorsk, Nyankole, Oromo, Polish, Portuguese, Quechua, Romanian, Romansh, Rombo, Rundi, Rwa, Samburu, Sango, Sangu, Scottish, Gaelic, Sena, Serbian, Shambala, Shona, Slovak, Soga, Somali, Spanish, Swahili, Swedish, Swiss-German, Taita, Teso, Turkish, Upper, Sorbian, Uzbek (Latin), Volapük, Vunjo, Walser, Welsh, Western, Frisian, Zulu.

Stylistic sets or Stylistic Alternates
A stylistic set may consist of a single glyph or dozens of related characters, making it quick and easy to select alternate variants of letters, numbers, punctuation marks, and symbols.

Desktop

Web

font-feature-settings: "ss01","ss02";

Below you can find a cheat sheet of the stylistic sets that our font Noi Grotesk has in store for you.

Contextual Alternates
The Contextual alternates feature is basically a search-and-replace routine that is applied to individual characters based on the letters around them (their context). At the heart of the feature’s code is a process of glyph substitution, e.g.

sub a b’ by b.alt ;

This means, «When a is followed by b, don’t set the default glyph for b, substitute an alternate (b.alt)».

Desktop

Web

font-feature-settings: "calt";

OpenType at Work typenetwork.com
Engaging Contextuality ilovetypography.com

Case Sensitive Forms
By default, glyphs in a font are designed to work with lowercase characters. This feature shifts various punctuation marks up to a position that works better with all-capital sequences.

Desktop

Web

font-feature-settings: "case";

OpenType Ligatures
Standard ligatures solve the problem of character pairs and triplets that collide or combine unattractively.

Desktop

Web

font-feature-settings: "liga" 0;
/* How to deactivate ligatures (enabled by default) */

Ligatures wikipedia.org
font-feature-settings css-tricks.com

Discretionary Ligatures
Ligatures that nobody needs but are fun, useful or look cool.

Desktop

Web

font-feature-settings: "dlig";

Discretionary Ligatures creativepro.com

OpenType Figures
OpenType fonts generally contain different numeral styles within one font. Please note that not all applications support OpenType features. Software which cannot access these advanced options, (such as Microsoft Word 2008 and earlier), will only display the default figures.

Oldstyle Figures
These figures are designed with ascenders and descenders and have features and proportions compatible with the lowercase characters of the typeface. Oldstyle figures are typically used for text settings because they blend in well with the optical flow and rhythm of the lowercase alphabet.

Tabular Figures
Tabular figures all have the same width so they align vertically. Therefore they are especially useful when setting columns of numbers, such as in financial reports.

Tabular Oldstyle Figures
Same as Tabular Figures but Oldschool. Surely you can stand out with these.

Caps Figures (or Lining Figures)
These figures are designed in same alignment compatible with the uppercase characters of the typeface, they are preferred when setting certain texts, such as an all-capital headline and generally don’t fit well in lowercase text settings.

Fractions
OpenType uses numerators and denominators (also known as true-drawn superscript and subscript glyphs), separating them with the fraction bar from the font’s character set. Simply put: Just type 123/456 and you’ll see.

Desktop

Web

Option 1 (Old School):

font-variant-numeric: normal;
font-variant-numeric: slashed-zero;
font-variant-numeric: oldstyle-nums;
font-variant-numeric: tabular-nums;
font-variant-numeric: oldstyle-nums tabular-nums;

Option 2 (New School):

font-feature-settings: "lnum"; /* Lining */
font-feature-settings: "zero"; /* Slashed Zero */
font-feature-settings: "onum"; /* Oldstyle */
font-feature-settings: "tnum"; /* Tabular */
font-feature-settings: "onum", "tnum"; /* Tabular Oldstyle */

OpenType – Figure Styles typenetwork.com
font-variant-numeric CSS-Tricks

Finding Glyphs
Can’t find a specific Glpyh? The following tools give you access to glyphs you cannot access from your keyboard.

copychar.cc
A simple webiste that allows you to find and copy special characters to your clipboard. Click or tap on a character and it will be copied to your clipboard. Visit: copychar.cc

Copy and Paste
Here are some useful Glyphs of the Studio Feixen Sans.

Finding Glyphs online copychar.cc

• Upload all the fonts to your webs server’s public directory.
  
  For example:
  www.yourdomain.com/css/webfont/
  
  
• Copy paste the code below to your .css file. Make sure you adjust the paths in code to reflect the relative path on your server. For this example you need to prepend /css/webfont/ to all src url definitions.

@font-face {
	font-family: 'NoiGrotesk-SemiBold';
	src: url('NoiGrotesk-SemiBold.eot'); 
	src: url('NoiGrotesk-SemiBold.eot') format('embedded-opentype'), 
         url('NoiGrotesk-SemiBold.woff2') format('woff2'), 
         url('NoiGrotesk-SemiBold') format('woff'), 
         url('NoiGrotesk-SemiBold.ttf') format('truetype'); 
}

html {
	font-family: 'NoiGrotesk-SemiBold', Helvetica, Arial, sans-serif; 
}

Using @font-face CSS-Trick

• Upload all the fonts to your webs server’s public directory.
  
  For example:
  www.yourdomain.com/css/webfont/
  
  
• Copy paste the code below to your .css file. Make sure you adjust the paths in code to reflect the relative path on your server. For this example you need to prepend /css/webfont/ to all src url definitions.

@font-face {
  font-family: 'NoiGrotesk-Variable';
  src: url(NoiVariableFlexGX.ttf) format("woff2-variations"); 
       /* for older browsers */
       font-weight: 500; 
       font-style: normal;
}

html {
	font-family: 'NoiGrotesk-Variable', Helvetica, Arial, sans-serif; 
	font-variation-settings: 'wght' 500, 'ital' 0;
}

1. Below you can find the values of our predefined font-weights.

Embeding Variable Fonts CSS-Trick

Letter-Spacing
«Letter-spacing is about adding and removing space between letters. Some people confuse it with kerning, but these two are different; letter-spacing affects the whole line of text, whereas kerning adjusts the space between two individual letters at the time.

The main purpose of letter-spacing is to improve the legibility and readability of the text. Words act differently depending on their size, color, and the background they are on. By adjusting letter-spacing to the environment you will help readers consume your information faster, and more efficiently.»

We recommend to use letter-spacing and word-spacing depending on the font-size to improve readability and style.

p {
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.25px;
	word-spacing: 0.1px;  
	font-feature-settings: "calt" on; /* prevents deactivation */
}

letter-spacing Webdesignerdepot.com
letter-spacing and more css-tricks.com
The Type System material.io

.variable-button {
	font-family: 'noi-grotesk-fix';
	transition: font-variation-settings 0.5s ease;
	font-variation-settings: 'wght' 100;
}

.variable-button:hover {
	font-variation-settings: 'wght' 900;
}

<a class="variable-button">Button</a>

.variable-animation {
	font-family: 'noi-grotesk-fix';
	font-variation-settings: 'wght' 100, 'ital' 0;;
	animation: example 4s infinite;
}

@keyframes example {
	0%   {font-variation-settings: 'wght' 100, 'ital' 0;}
	50%  {font-variation-settings: 'wght' 900 'ital' 10;}
	100% {font-variation-settings: 'wght' 100, 'ital' 0;}
}

<div class="variable-animation">Animation</div>

.variable-animation {
	font-family: 'noi-grotesk-fix';
	font-variation-settings: 'wght' 900, 'ital' 0;;
	animation: example 0.5s ease infinite; /* choose easing */
}

@keyframes example {
	0%   {font-variation-settings: 'wght' 900, 'ital' 0;}
	50%  {font-variation-settings: 'wght' 100 'ital' 0;}
	100% {font-variation-settings: 'wght' 900, 'ital' 0;}
}

<div class="variable-animation">Blink</div>

• Uninstall all Studio Feixen Fonts.
• Open up your Terminal.app (you can find it in /Applications/Utilities/)
• Type (or copy and paste) the following commands: If you type them, each line must be finished by pressing the Return key; if you paste them, you may need to press Return to confirm the entry of the third line. The first code line will prompt you for your password. Attention: you will not see ‘passphrase bullets’ (•••) indicating the password length. Type it anyway and confirm by pressing the Return key.

sudo atsutil databases -remove
atsutil server -shutdown
atsutil server -ping

1. Restart your Mac.
   No, really, open the Apple menu in the top left corner and choose Restart. Don’t think you can get away without a restart, otherwise the trouble will reappear. And you really do not want that, do you? OK, restart your Mac.

Font Cache Problemsolving glyphsapp.com

Here we keep you updated about all changes, bug fixes, new features, etc. All updates of our fonts are free for all our customers no matter when you bought our fonts. Sign in your account to find the most recent version of your purchases.