Swatches, contextual alternates, glyphs, ligatures… if you’re not familiar with how to use these font features, they can be a little intimidating to start with. However, once you master them, you really open up so many more possibilities when working with great fonts.

After getting so many questions about how to use the extra characters, glyphs and swashes available with the fonts in our current Monster Creative Font Bundle, Simon has been kind enough to put together this comprehensive guide.

This tutorial is a bonus tutorial, that leads on from Simon’s in depth poster design tutorial. You’ll learn exactly how to unlock the hundreds of extra characters and symbols available to you with these, or any extensive opentype fonts. To Simon!

Hey Design Cutters! One of the things I realized from my poster tutorial is that it’s using only two typefaces out of the ten families offered in the deal. While it makes sense from a design standpoint (ever heard of the “no more than three fonts” rule?), it doesn’t really do justice to the other amazing options that you have at your fingertips.

Let’s have a look again at the beautiful typefaces that are included in the Monster Creative Font Bundle (Includes Web Fonts).

Daft Brush by Pintassilgo Prints

Monster creative font bundle demo tutorial - Glyphs panels

Monster creative font bundle demo tutorial - Glyphs panels

Brush Up by Pintassilgo Prints

Monster creative font bundle demo tutorial - Glyphs panels

Monster creative font bundle demo tutorial - Glyphs panels

The Amorie type family

Monster creative font bundle demo tutorial - Glyphs panels

Monster creative font bundle demo tutorial - Glyphs panels

D-I-Y Time (Complete Hand-Drawn Type System) by Latino Type

Monster creative font bundle demo tutorial - Glyphs panels

Monster creative font bundle demo tutorial - Glyphs panels

Four Seasons by Latino Type

Monster creative font bundle demo tutorial - Glyphs panels

Monster creative font bundle demo tutorial - Glyphs panels

Julietta by Latino Type

Monster creative font bundle demo tutorial - Glyphs panels

Monster creative font bundle demo tutorial - Glyphs panels

Showcase by Latino Type

Monster creative font bundle demo tutorial - Glyphs panels

Monster creative font bundle demo tutorial - Glyphs panels

Thirsty Rough by Yellow Design Studio

Monster creative font bundle demo tutorial - Glyphs panels

Monster creative font bundle demo tutorial - Glyphs panels

Gist by Yellow Design Studio

Monster creative font bundle demo tutorial - Glyphs panels

Monster creative font bundle demo tutorial - Glyphs panels

Microbrew by Albatross Studio

Monster creative font bundle demo tutorial - Glyphs panels

Monster creative font bundle demo tutorial - Glyphs panels

So, what about these typefaces?

All these typefaces have something in common. They feature characteristics (hand-drawn style and/or aging artifacts) that, in regular typefaces, would very obnoxiously show everyone that this type piece or block has been written using a typeface. Why? A lot of typefaces include only one set of characters. This means that you’ll only have access to one rendition of the letter “A” for instance (the most frequently used letter in the English language). The imperfections that should be part of a hand-lettered piece won’t be there, and the resulting piece will clearly be identifiable as a typeface, rather than a manually crafted type element.

But these aren’t “regular” typefaces. The creators of all these type families have painstakingly created alternative versions for their characters (along with some other cool goodies, like swashes, shadows, etc.), so the type blocks you’ll be writing don’t feature the same letter “A” all the time. This system of alternate characters allows compatible applications to be able to make your pieces look a bit more organic, and yet to keep the ease of use and flexibility of a typeface. That’s a bit of a summary, and if we had time I’d talk a little bit about the history of typeface file formats (OTF vs. TTF vs. AAT vs. Graphite), but that’s going to be for another time.

Luckily for us, both Illustrator and Photoshop allow us to use these alternates, swashes, and other awesome tips and tricks.

Using Photoshop’s Character panel

Setting up a document

I started by creating a 1920×1200 pixels @ 72 dpi document in Photoshop. Since this document is for on-screen demo purposes only, no need to create a print-ready document.

Monster creative font bundle demo tutorial - Glyphs panels

Anticipating on a potential Design Cuts-themed wallpaper design, I’ve added a few horizontal and vertical guides to get me a grid. My guides are at 300, 600, and 900 pixels horizontally, and at 960 pixels vertically.

Monster creative font bundle demo tutorial - Glyphs panels

Following that wallpaper idea, let’s add the Design Cuts color palette in my document. I’ve sampled the colors directly from the DC website (top: white – #ffffff, middle section: green – #1abc9c, and bottom section: blue – #34495e). The bottom section covers half of the canvas, while the middle and top parts cover a fourth each.

Monster creative font bundle demo tutorial - Glyphs panels

Monster creative font bundle demo tutorial - Glyphs panels

Contextual alternates and stylistic alternates

I used Brush Up in the tutorial, and took advantage of its alternates characters, but I didn’t get to use Daft Brush. Let’s fix this.

Monster creative font bundle demo tutorial - Glyphs panels

As you can see on the type panel, I simply typed the text. I didn’t check any of the magic boxes at the bottom. Let’s engage the Contextual alternate functionality on.

Monster creative font bundle demo tutorial - Glyphs panels

Surprise! Our characters have changed.

Monster creative font bundle demo tutorial - Glyphs panels

Now, notice how we have two identical “S” letters in our type piece. Well, you could apply the Contextual alternate functionality only on “CUTS,” so it would look like someone quickly brush-penned that piece down. Start by turning the button off for the whole type layer, and then highlight “CUTS.”

Monster creative font bundle demo tutorial - Glyphs panels

Then turn the button back on. Only “CUTS” will be affected this time. Nifty, huh?

Monster creative font bundle demo tutorial - Glyphs panels

Another nifty feature that’s supported by most of these typefaces is called Stylistic alternates.

Monster creative font bundle demo tutorial - Glyphs panels

These are yet another set of alternate characters you could bring in your type treatment to preserve its organic vibe. The styles depend of what the designer created for each typeface. In Daft Brush’s case, they look something like this:

Monster creative font bundle demo tutorial - Glyphs panels

Say you like the effect, but just want to apply it on the “N?” Ask, and you shall receive.

Monster creative font bundle demo tutorial - Glyphs panels

I simply turned the Stylistic alternates back off, selected just the “N,” and turned the alternates back on.

Simple enough, right? Based on these substitutions and alternate character sets, the Open Type format is capable of much, much more. But I’ll need to use a different typeface to demonstrate them.

Swashes

Swashes are a quick way to make a type element stand out as the focal point of your piece. Let’s use Amorie Nova Bold to get a sense of what these are about.

Start with everything turned off.

Monster creative font bundle demo tutorial - Glyphs panels

My first order of business is to make sure that the two “S” look different, thanks to the Contextual alternates.

Monster creative font bundle demo tutorial - Glyphs panels

Monster creative font bundle demo tutorial - Glyphs panels

Let’s turn on the swashes!

Monster creative font bundle demo tutorial - Glyphs panels

The results are, let’s say, overwhelming.

Monster creative font bundle demo tutorial - Glyphs panels

Just like that “S” that I didn’t want to be displayed identical to the one prior, I’m going to turn the feature on only a few selected letters.

Monster creative font bundle demo tutorial - Glyphs panels

Much better, right? I left the swash active on the “D,” “G,” “C,” and “S.” It’s also worth noting that I had to size the “N” down quite a bit (from 258 points to 222 points) so it wouldn’t get “tangled up” in the G’s swash.

Here’s a view of the text on blue, so you can appreciate it in its entirety.

Monster creative font bundle demo tutorial - Glyphs panels

Given the level of care of the designers of all these typefaces, you’ll have quite a few combinations to try out and experiment with. Sometimes, the exact letter form you’ll be looking for will be available when turning the contextual alternates on on a swashed-out drop cap… Have fun.

One more thing we need to talk about: Illustrator’s Glyphs panel

I know that most of the readership here at Design Cuts favors Photoshop, and that’s okay. But I’d like to give Illustrator some love, especially that we’re talking about manipulating text, and since that functionality is available in Illustrator only (and InDesign, too). It’s called the Glyphs panel.

I’ve recreated my document in Illustrator, nothing fancy.

Monster creative font bundle demo tutorial - Glyphs panels

Monster creative font bundle demo tutorial - Glyphs panels

If Glyphs panel isn’t showing up by default, you can make it visible through the Window > Type > Glyphs menu.

Monster creative font bundle demo tutorial - Glyphs panels

What can you do with the Glyphs panel?

The panel can show you the whole font.

Monster creative font bundle demo tutorial - Glyphs panels

It can show you the font’s available ligatures.

Monster creative font bundle demo tutorial - Glyphs panels

It can also show you the font’s stylistic alternates. The more stuff you have in this view of the panel, the more alternate characters you’ll have at hand to make it look organic and analog.

Monster creative font bundle demo tutorial - Glyphs panels

Finally, and that’s in my opinion the best feature, it can show you the available alternates for the current selection. Sadly, it works only when selecting individual characters.

Monster creative font bundle demo tutorial - Glyphs panels

Switching characters around

But the panel isn’t just a tool to show you what the font has available. You can also, and that’s the main interest behind it, double-click on a character and it gets added to your active text element/block. Example.

Let’s start from the beginning. I’ve switched to Julieta Pro.

Monster creative font bundle demo tutorial - Glyphs panels

After spelling Design Cuts out, I’d like to spruce things up a little. Let’s have a look at what’s available.

The “E” has a straighter version available, as well as a super cool swash version.

Monster creative font bundle demo tutorial - Glyphs panels

With the letter you wish to replace highlighted, simply double-click the new glyph you’d like to bring in, and taadaa, it’s there. MAGIC.

Monster creative font bundle demo tutorial - Glyphs panels

I’ve repeated the process for the closing “S” as well.

Monster creative font bundle demo tutorial - Glyphs panels

Monster creative font bundle demo tutorial - Glyphs panels

And here’s the view on blue.

Monster creative font bundle demo tutorial - Glyphs panels

One of the most interesting uses yet: the ornaments or extras typefaces

Indeed. The Glyphs panel can be your best friend when trying to navigate through a well furnished ornament/extras typeface.

Here’s an example with Microbrew.

Monster creative font bundle demo tutorial - Glyphs panels

I’ve created my base text element, and I’d like to just add one of the many extras available underneath. Let’s say the two crossed keys, on the right.

Monster creative font bundle demo tutorial - Glyphs panels

Rather than sift through my keyboard to find the right letter to press, or to have to dive in a PDF, or worse yet, to have to open the character table, I’m simply going to use the Glyphs panel to track down the symbol.

Create a new text element underneath the first one, and switch its typeface to Microbrew Ornaments. Make sure the Glyphs panel shows you the full font, and locate the keys.

Monster creative font bundle demo tutorial - Glyphs panels

Note that the panel will also give you the code to type to obtain the symbol should you be tired to use the Glyphs panel.

Monster creative font bundle demo tutorial - Glyphs panels

Double-click, and you have the keys at your disposal.

Monster creative font bundle demo tutorial - Glyphs panels

You can then re-arrange them, re-color them, re-size them, etc.

Monster creative font bundle demo tutorial - Glyphs panels

Last notes

This finally concludes today’s demonstration. I hope that you enjoyed both the poster design tutorial, and the initiation to Photoshop and Illustrator’s more advanced type options. As usual, if you have any questions, comment below or tweet at me @simonhartmann.

Remember, there’s only a few days left to get the Monster Creative Font Bundle for just $29, so if you don’t want to miss out, we recommend jumping on it now. Armed with your new font knowledge, what will you create?

Monster Creative Font Bundle (Including Web Fonts + Extended License) – 97% Off