Welcome! This is the Studio Feixen Fonts Wiki. Here you can find everything about how to use alternates and ligatures or embeding and animating fonts. Discover the ⟮hidden⟯ features of our fonts and learn how to activate them.

Specific

Noi Grotesk

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

Stilistic Sets ?What?Why?
ss01Single Storey aMore childish Feeling
ss02No-Tail aMore serious Feeling
ss03Alternate yMore serious Feeling
ss04Creamy f,tExtra Style in Headlines
ss05Creamy G, QExtra Style in Headlines
ss06Small Size NumbersEnsure Readability
ss07Thinner PunctuationExtra Style in Headlines
ss08Square DotsMore serious Feeling
ss09Headline LettersReduce Vertical Space
ss10Spaghetti AlternatesFor F.U.N.
ss11Alternate &More normal Feeling
ss01 – Single Storey a, ss02 – No-Tail a, Default – Double Storey a with Tail
ss03 – Alternate y
ss04, ss05 – Creamy Alternates
ss06 – Small Size Numbers: Since for Example the numerals “6” and “9” can easily be confused for numerals such as “8” at small sizes, there are alternate versions available.
ss07 – Thinner Punctuation
ss08 – Square Dots
ss09 – Headline Letters
ss10 – Spaghetti Alternates
ss11 – Alternate Ampersand

OpenType Features

Figures ?Included?Why?
Oldstyle FiguresYesBlend in better in Text.
Tabular FiguresYesAlign Numbers vertically.
Tabular Oldstyle FiguresYesAlign Numbers vertically.
Caps FiguresYesFor All-capital Headlines
Slashed ZeroYesAvoid confusion with the letter «O»
OptenType Figures: Regular Figures, Oldstyle Figures, Tabular Figures etc.
Other FeaturesIncluded?Why?
FractionsYesAutomatic Fractions
SuperscriptYesAbove the Line
SubscriptYesBelow the Line
Contextual AlternatesYesVarious Reasons
Case Sensitive FormsYesFor All-capital Headlines
Contextual Alternates: If the letter “x” appears between two numbers, “x” will automatically become “multiply”
Contextual Alternates: If and t will be automatically adapted, if H,I,J,M,N,U,l,d,r occur before them.
Contextual Alternates: The colon will automatically adapt if it occurs between two numbers
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.

Variable Settings

Font Weight‘wght’ (Weight)‘ital’ (Italic = 10)
Black9000 – 10
Bold7500 – 10
Semibold6000 – 10
Medium5000 – 10
Regular4000 – 10
Light3000 – 10
Ultralight2000 – 10
Thin1000 – 10

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.

General

Stilistic Sets/Alternates

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.

Above: How-To Illustrator

Desktop

  • Open Illustrator
  • Window
    ↳ Type
    ↳ OpenType
  • Click ← bottom right
    ↳ Select Set(s)
Id
  • Open InDesign
  • Window
    ↳ Type & Tables
    ↳ Character
  • Click ☰ ← top right
    ↳ OpenType
    ↳ Sylistic Sets
    ↳ Select Set(s)
W
  • Open Word
  • Select Text
  • Press ⌘ + D
  • Advanced Tab
  • Stilistic Sets:
    ↳ Select Set(s)
    Attention: The Names of the Sets are not visible. But the numbers correlate with our lists.

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.

Noi GroteskWhat?Why?
ss01Single Storey aMore childish Feeling
ss02No-Tail aMore serious Feeling
ss03Alternate yMore serious Feeling
ss04Creamy f,tExtra Style in Headlines
ss05Creamy G, QExtra Style in Headlines
ss06Small Size NumbersEnsure Readability
ss07Thinner PunctuationExtra Style in Headlines
ss08Square DotsMore serious Feeling
ss09Headline LettersReduce Vertical Space
ss10Spaghetti AlternatesFor F.U.N.

Contextual Alternates

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)».

Example A: The colon will automatically adapt if it occurs between two numbers
Example B: If the letter “x” appears between two numbers, “x” will automatically become “multiply”
Example C: If and t will be automatically adapted, if H,I,J,M,N,U,l,d,r occur before them.

Desktop

  • Open Illustrator
  • Window
    ↳ Type
    ↳ OpenType
  • Click ← bottom left
Id
  • Open InDesign
  • Window
    ↳ Type & Tables
    ↳ Character
  • Click ☰ ← top right
    ↳ OpenType
    ↳ Contextual Alt.
W
  • Open Word
  • Select Text
  • Press ⌘ + D
  • Advanced Tab
  • Use Cont. Alt.

Web

font-feature-settings: "calt";

OpenType at Work typenetwork.com
Engaging Contextuality ilovetypography.com

Case Sensitive Forms

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.

Example A
Example B
Example C

Desktop

  • Open Illustrator
  • Window
    ↳ Type
    ↳ Character
  • Click ← All Caps
Id
  • Open InDesign
  • Window
    ↳ Control
  • Click ← All Caps
W
  • (Not Supported)

Web

font-feature-settings: "case";

OpenType Ligatures

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

Desktop

  • Open Illustrator
  • Window
    ↳ Type
    ↳ OpenType
  • Click ← bottom left
Id
  • Open InDesign
  • Window
    ↳ Type & Tables
    ↳ Character
  • Click ☰ ← top right
    ↳ Ligatures
W
  • Open Word
  • Select Text
  • Press ⌘ + D
  • Advanced Tab
  • Ligatures:
    ↳ Standard only

Web

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

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

Discretionary Ligatures

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

Desktop

  • Open Illustrator
  • Window
    ↳ Type
    ↳ OpenType
  • Click ← bottom center
Id
  • Open InDesign
  • Window
    ↳ Type & Tables
    ↳ Character
  • Click ☰ ← top right
    ↳ Discretionary Lig.
W
  • Open Word
  • Select Text
  • Press ⌘ + D
  • Advanced Tab
  • Ligatures:
    ↳ Discretionary

Web

font-feature-settings: "dlig";

Discretionary Ligatures creativepro.com

OpenType Figures

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

  • Open Illustrator
  • Window
    ↳ Type
    ↳ OpenType
  • Select Figures
Id
  • Open InDesign
  • Window
  • ↳ Type & Tables
  • ↳ Character
  • Click ☰ ← top right
  • ↳ OpenType
  • ↳ Select Figures
W
  • Open Word
  • Select Text
  • Press ⌘ + D
  • Advanced Tab
  • Number Spacing/Forms:
    ↳ Select Figures

Web

1234567890

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

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

  • Open Illustrator
  • Type
    ↳ Glyphs
Id
  • Open InDesign
  • Type
    ↳ Glyps
W
  • Open Word
  • Insert
    ↳ Advanced Symbol
Above: Glyphs Panel (Illustrator)

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

Code

Embeding Font

  • 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

Embeding Variable Font

  • 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.
Noi Grotesk‘wght’ (Weight)‘ital’ (Italic = 10)
Black9000 – 10
Bold7500 – 10
Semibold6000 – 10
Medium5000 – 10
Regular4000 – 10
Light3000 – 10
Ultralight2000 – 10
Thin1000 – 10

Embeding Variable Fonts CSS-Trick

letter-spacing

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.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and […]
font-size: 14px   line-height: 18px   letter-spacing: 0.25px   word-spacing: 0.1px
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem […]
font-size: 24px   line-height: 27px   letter-spacing: 0px   word-spacing: 0px
It is a long established fact that a reader will be distracted by the […]
font-size: 48px   line-height: 45px   letter-spacing: -0.15px   word-spacing: -1px
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

Animation: Hover Button

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

Animation: Keyframe

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

Animation: Easing

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

Problem-Solving

Cleaning Font Cache

  • 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

Updates

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.

Studio Feixen Sans
2021 MarchVersion 1.2– Polished Polish
– Tabular Numbers
2021 FebruaryVersion 1.1– Wor(l)d Problems fixed
2019 OctoberVersion 1.0– Font Release

Noi Grotesk
2021 MarchVersion 1.0– Font Release