In this session, we were joined by Roch Modrzejewski a designer and artist who founded the ROHH Foundry, an independent web design and type design studio that delivers complete, professional and multi-language typefaces of diverse styles which are, in our humble opinion, exceptional.
With the flexibility of brand design an interesting and topical conversation, we had a really fascinating session as Roch showed us how to build a brand identity using variable fonts.
To help you follow along, you can use the written tutorial below.
Enhance your technical skills through learning how to use variable fonts to design a brand identity. It's not until you use it in a project, you really see how valuable it can be. So, let dive in!
How are Lutshine Variable Fonts effective?
It is effortless.
It transforms in a way that makes you have more joy and ease.
It is a seamless feel when working with type.
Difference between using generally the high-end professional typeface in your work and Lutshine Variable Fonts?
You can change the quality of the fonts an infinite number of times with Variable Fonts in comparison to normal fonts.
With normal open-type fonts, you choose from a predefined style whereas, with a Variable Font, you can go between the styles and adjust freely.
You can adjust the widths with Variable Fonts whereas, with normal open-fonts, it’s not as adjustable.
Design with Big Possibilities
You’re open to more complex types of graphical layouts and they work very fast and fluently with Variable Fonts. And because of its ease and accessibility, you tend to have more fun with it while working along.
Axis - There are multiple axises that let you adjust the width and height as well of the variable font. This gives a complete character by manipulating the letters as per your needs and is extremely playful all within the same font.
Play with Variable Fonts
You can change its optical, that’s great for both big posters as well as text type-face.
You can change the proportions.
You can use it as a text typeface or as a variable or as a display typeface.
It works in Adobe and in Coral so you can choose wherever you’re comfortable designing.
It's playful and you can do art deco proportions.
You can adjust the style of the letters in their internal proportions.
It changes the character to what you want to define it to.
Tired of being controlled as creatives?
This is like having a thousand fonts in one because whatever you need, whether it's a brand design or a logo or a website text, you can find something that works for you all-in-one. For designers, it’s like working on hundreds of fonts in one.
Let’s try a logotype! (Example 1):
Start by writing in uppercase and big letters TUNND. You can change the proportions as per your need.
In sketch, select View and open the Phone's panel. You’ll see a cog icon. Click on it and choose typography.
And here’s the typography panel where you can see opentype features of the font.
In sketch choose text before applying any opentype features.
After choosing it you can see we have some letters that are merged together.
You need to get to know what it offers so you can open your glyphs panel for managing fonts.
Now choose two ends, and then the ligature. It'll start to look different.
Now choose T. Half the T and now choose D and do lean capital.
Now adjust the proportions of the font by using variable fonts.
Choose a little bit narrower and apply the ligatures. Make it smaller and you have your logo pipe.
Choose Parentheses and it automatically changes into the registered trademark.
It's because this font has so-called contextual alternates and they are usually turned on by default in apps and when it's changed you can change the proportions and play with it.
This is how the typeface can help you fast with its working and end in a great result.
Applying the logo:
Apply the logotype on the headphones by copy-pasting. Make sure the size is much smaller.
Add another color to fit to the headphones (making it look embossed)
You can also buy some symbols on the sides of the on-off sides of the headphones.
And that's how The Branding is applied to the product, effortlessly and extremely fast.
Designing an archetype for a lighting company: (Example 2)
Start by typing the name - Helio
Add a tagline under the logotype - Illumination Systems
Make the size much smaller like 100. No ligatures, and no tipping capitals.
Play with proportions a little bit just to make Helio wider and more powerful and with illumination systems, a little wider but not so heavy in weight.
Reduce the size of the tagline smaller.
It doesn't matter with what exhale, what size, what boldness it all goes together. It’ll feel balanced and the kerning will be perfect.
Pro-tip to Manage Weights: Cut some weights. If you have another idea at the beginning and at the end you see that thin weights are not working so well, it's a good idea to cut some weights proportionately. Have a more consistent family instead.
With one color palette and one actor, you can make it work in a completely different environment.
That's how versatile Variable Fonts can be. With every approach that you change, it changes its character as well. These particular examples show the variation in terms of character as well as readability and legibility.
And that's all! Are you willing to try this out?
This font has 126 opentype fonts in the set with upright font and italic fonts. This also features lowercase letters, and it has ligatures.