13 leyva street, mabayuan
+63 9988517769

How to use Variable consepts and SVG fonts

Photoshop supports several different types of specialty fonts, including variable concept fonts and SVG fonts, which can include multi-colored fonts as well as emoji characters. So let’s start with variable fonts. Variable fonts are a new technology that support custom attributes like weight, width, slant, and optical size, which gives designers the opportunity to really modify the font according to the look that they’re after. Now because this is the beginning of a new technology, there are some important caveats that you need to know about using variable fonts. They are not available in versions of Photoshop before the 2019 version. So you would get a font substitution message in the older versions that might actually swap out a pretty different looking font. Adobe Fonts also don’t support variable fonts at the time of this recording, so you can’t use them as a web font, and they’re currently only available in Illustrator and Photoshop. But you really have a lot of control over them, so let’s take a look.

pick this image mate

I’ll tap the the t key in order to select them and then let’s just add some text here. I’m going to change the size up to maybe 300,. and just type in A, B, C for now. I’ll position my cursor away from it so we can go ahead and move it around in the canvas area and then commit to it using Command+ Return on Mac or Control + Enter on Windows. Now in the properties panel, let’s take a look at some of the different fonts that I’ve recently used. You’ll notice that some of the type faces have these disclosure triangles and some of them don’t. So for example, if I choose Impact, there’s not a lot of different options for that type face. If I select something like Futura, well, now I’m going to see a number of different options. If we look at Acumin variable concept or any of the variable concept fonts, you can see that we have a lot more options. In fact, there are 90 different named instances just for this font. So we can select any of these, but we can also scroll down on the properties panel and use the weight, width, and slant options, so I’m going to take the slant off of this and now we can bring the weight down and the width up, or we can bring the width down and we can increase the weight. So as you can see, you really have a lot of control over the different characters. Now let’s talk a little bit about SVG fonts. So the unique attributes of an SVG font is that it can include multiple colors as a part of the font, so it’s not just an outline with a color fill, but it can actually have multiple colors.

And a good example of this would be Trajan, so I’ll start typing that in and we’ll select the Trajan color concept font. We can see that there are multiple colors in here and in the glyphs panel, we can see that there’s different glyphs. So when I select a character, I can either choose the glyphs panel or we can use the on-screen glyphs in order to change the color. I’ll use Ctrl + H in order to hide that so we can see that it’s actually been changed. Now I’m going to select that again and let’s just change that back, and then I will triple click in order to select all the text, again, using Ctrl + H in order to hide that because I do want to show you, if I scroll down on the properties panel, under the type options, Photoshop supports stylistic sets. So if a font has been created with stylistic sets, you can now select that and then apply it. So right now, the yellow has been applied. I will undo that.

It will return to its default, and then I’ll apply silver. So you do have to be a little bit careful because if I wanted to choose something else like red, well, both of those stylistic sets are applied and the silver is above the red, so it’s going to take precedence, so I would just need to turn that off. The other thing to be aware of is that there are a number of different stylistic sets that are available, but each font might order them in a different way. So something that might change the shape of a g, for example, in one type face, might change a y in the other. So if you do change fonts, you’ll want to come in here and just double check them. Another SVG font is the emoji one font, so we can scroll up and just type that in. I’ll select it here and we can see in the glyphs panel that we have a number of different glyphs. So let’s just select all our text by triple clicking on it, use Ctrl + H in order to hide the selection, and then we’ll just scroll up a little bit. I think there are some little animals here that I want to find, and I’ll double click on the whale in order to insert it. I’ll use Ctrl + Return in order to commit to that text and then use the move tool just to reposition it over here.

So there you go, a quick overview of two special types of fonts in Photoshop, the variable concept, and SVG.

Leave a reply