In 2016 Microsoft, Google, Apple and Adobe announced the release of a new version of the OpenType font format. Long story short now we can control widths, heights, slant, optical adjustments and basically anything that a font offers with sliders – if you dig details read John Hudson’s article.
The main reason behind Variable Fonts, as this update is known, is file size and the web, so it was no surprise the initial support was found only in browsers. But Adobe provided a relatively fast response and implemented support for Variable Fonts in Photoshop and Illustrator CC 2018 – again, if you are in for more info check the TypeKit blog.
We were eager to make our first Variable Font and as it happens we were about to publish the inline style of our recently released dT Jakob. So we went back to development and made the weight of inline adjustable and also the distance of the shadow.
Layer & Variable Font
dT Jakob Variable Concept is free for you to use both in personal and commercial projects – have a look at the end user license agreement (EULA) when you download the file to better understand what you can and can't do. Ah, almost forgot to mention, dT Jakob Variable Concept is a layer font too! If you have never played with one because it is a bit corky to setup follow along our micro-tutorial.
We hope you love it and put it to the test on your next project. Also, visit our library for great companions and the full dT Jakob family. Have fun!
Adobe Illustrator CC - 2018
Follow the steps and pump the volume of your next project using Illustrator
Step - 1
In the Character Set Panel select the dT Jakob Variable Concept and type your text.
You will see the default letters like an example below.
Step - 2
Now you can use the OpenType Features* to change the letter forms.
• Turn on Standard Ligatures to set the letters as Inline.
• Turn on Contextual Alternates to set the letters as the Main Shape.
• Turn on Discretionary Ligatures to set the letters as Shadow.
* Remember to set only one feature a time
Step - 3
To easily edit the color and weight we recommend you place each text box in a different layer.
• Create a text box with a word or a sentence.
• Create the number of layers you want to use.
• Copy and Paste at the same place using the shortcuts below:
Mac: Copy (Command + C) and Paste in Place (Shift + Command + V)
PC: Copy (Ctrl + C) and Paste in Place (Shift + Ctrl + V)
• Now change the letterforms using OpenType Features - Step 2
• Choose the color for each layer
• Lock the layer you are not working in
• Your result should looks like the image below
Step - 4
Click on the Variable Font button and you are able to set any value between 10 and 40.
Adobe Photoshop CC 2018
And here is how it works in Photoshop \o/
Step - 1
In the Character Set Panel select the dT Jakob Variable Concept font and type your text.
You will see the default letters like an example below.
Step - 2
Now you can use the OpenType Features* to change the letter forms.
• Turn on Standard Ligatures to set the letters as Inline.
• Turn on Contextual Alternates to set the letters as the Main Shape.
• Turn on Discretionary Ligatures to set the letters as Shadow.
Step - 3
To easily edit the color and weight we recommend you place each text box in a different layer.
• Create a text box with a word or a sentence.
• Duplicate it and change the letterforms using OpenType Features - Step 2
• Choose the color for each layer.
• Your result should looks like the image below.
Step - 4
Use the Properties Panel to set any value between 10 and 40 or use the preset weights.
dT Jakob Variable Concept is free for you to use both in personal and commercial projects. Enjoy!
Known issues - 01/17/2018