Working With Type

Slab-Serif Typeface Salou
  • About
  • Gylphs
  • Variable Font

Salou, coming soun! A slab-serif typeface with a warm and charming tone, ready to tell stories, and ready to brand your products, this is Salou. The typeface is a homage to Roger Excoffon and his sans-serif classic Antique Olive from the 60s. It is the serif companion of this French humanist icon. Salou comes with a very large x-height, soft shapes, and headlining weight proportions. The weight range goes from an ultra-thin to an extreme black, sliced in 9 steps. The typeface is designed as a variable font, which gives countless more options. Beside the weight axis, on a second axis comes a slant style that goes to a strong angle of 16.7°.

From Thin to Black,

countless variable options,

with a strong italic angle,

and nice typographic features,

extra language support,

in nine weights and two styles!

Glyphs

Salou is available as a Variable Font! Here are some examples showing the usage of variable fonts and Salou Variable in particular, including the needed CSS and JS code.


Basic Variable Font CSS Settings

By embedding Salou as one (variable webfont) file you get access to countless typographic options. Salou comes with two axis, one for Weight (‘wght’) and one for Slant (‘slnt’). The Weight axes ranges from 100 to 900, and the Slant axis from 0 to -16.

YOUR CHOICE
0 1 2 3 4 5 6 7 8 9

With the @font-face declaration variable webfonts can be embeded as simple as every static webfont. Note that the font-weight property is showing the range of the weight axis.

@font-face {
  font-family: "SalouVAR";
  src: url("/webfonts/Salou-VF.woff2") format("woff2-variations"),
       url("/webfonts/Salou-VF.woff") format("woff-variations");
       font-weight: 100 900;
} 

Now you can choose: using the font as usual by picking one of the predefined weights or styles (in variable fonts this is called an instance) using font-weight and font-style or create your own weight and style via the font-variation-settings by entering a number.

// HTML
<p class="VARtext">YOUR CHOICE<br>
    <span>0</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
</p>

// CSS
p.VARtext { 
    font-family: "SalouVAR"; 
    font-weight: bold;
    font-style: italic;
}
p.VARtext span:nth-of-type(1) { 
    font-variation-settings: "wght" 100, "slnt" 0; 
}
p.VARtext span:nth-of-type(2) { 
    font-variation-settings: "wght" 150, "slnt" -1; 
}
p.VARtext span:nth-of-type(2) { 
    font-variation-settings: "wght" 210, "slnt" -2; 
}
p.VARtext span:nth-of-type(2) { 
    font-variation-settings: "wght" 315, "slnt" -3; 
}
...

In this example we’ve picked a little bit different values for every number in a <span> and for the text we just used the classic font-weight and font-style properties.


Button Effects

And now by adding some transition and :hover we easily create some dynamic button. Look it even bounces!

.variable-button { 
       font-family: "SalouVAR"; 
       font-variation-settings: "wght" 500, "slnt" 0;
       transition: font-variation-settings 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.variable-button:hover { 
       color: #fff; font-variation-settings: "wght" 800, "slnt" -16; 
}

Mouse Move

Adding some lines of Javascript allows us to bind the variable font axis to the movements of the mouse. Move your mouse..

Move It!

// JS
window.addEventListener("mousemove", e => {
  minFontWeight = 100
  maxFontWeight = 900
  fontWeightPercent = (maxFontWeight - minFontWeight) / 100;
  minFontSlant = 0
  maxFontSlant = -16
  fontSlantPercent = (maxFontSlant - minFontSlant) / 100;

  const widthPercent = e.clientX / window.innerWidth * 100;
  const heightPercent = e.clientY / window.innerHeight * 100;
  const newWeight = minFontWeight + ( Math.round(fontWeightPercent * widthPercent) );
  const newSlant = minFontSlant + ( Math.round(fontSlantPercent * heightPercent) );
  const varText = document.querySelector(".VARtext-mouse");   
  varText.style.fontVariationSettings = "\"wght\" " + newWeight + ", \"slnt\" " + newSlant;; 

}); 

Keyframe Animation

And finally here is a simple animation using CSS @keyframes.

Moving Type

// CSS
@keyframes salou-animation { 
  from { font-variation-settings: "wght" 100, "slnt" 0; }
  to { font-variation-settings: "wght" 900, "slnt" -16; }
}
.storycontent p.VARtext-animation { 
  font-family: "SalouVAR"; 
  font-variation-settings: "wght" 100, "slnt" 0; 
  transition: font-variation-settings 0.3s ease;
  animation-name: salou-animation; 
  animation-duration: 2s;
  animation-direction: alternate; 
  animation-iteration-count: infinite; 
  animation-timing-function: ease; 
}