Skip to main content

Top Tips for using Chromatic Typefaces or Layered Fonts


Using Layered or Chromatic Type

Have you seen those fancy new layered type styles that all the cool kids are using? Ever wonder how to use them most efficiently? Layered type is great when you want to set headlines in a application that screams for attention. It's fantastic when you want a retro or vintage feel or just want to add some depth and dimension to your work.

A Bit of History

If you will forgive the pun, layered type is a multifaceted contemporary trend in type design. Layered type finds it's origins in woodtype, which came to the fore in the mid 1800s. Another implementation came in the time of Letraset. In the present day, we stack layers of type in a digital program and output the results, but in the past there was great deal of trial and error and less versatility. Some of the challenges of designing layered type, such as registration, are now mostly the domain of the designer of the layered type family.

Tips On How To Use Layered Type

We will only go into the Adobe applications. Just about any visual application, such as InDesign or AfterEffects could achieve these effects. Something like Microsoft Word, while possible, is probably not the best choice.

Alignment is key. Generally, that's the type designers job. Can you imagine the registration issues back in the days of wood type? We are truly blessed. However, some unique effects can also be achieved by offsetting layers, for example, an outline offsetted on top of the primary yields an interesting result.

Using type that is layered is relatively simple as long as you have an application that supports layers. The letters should stack very nicely on top of each other and you can achieve different effects by coloring the different layers differently.

In Photoshop, I like to just copy the layer in place by dragging the layer I want to duplicate to the new layer icon.

When it comes to Illustrator, paste in place is your new best friend. Paste in place will copy the layer or object and then paste it directly on top of the copied item. Otherwise, the object is pasted in an offsetted position, and aligning it properly is a long and unnecessary task.

Every once a while you come across a particularly full-featured type family that also includes swash alternates or other open type features. You can use these features just as you normally would, but you need to remember to activate features for each layer of your stack.

Most layered type styles have a shadow variant. Generally, this works best with a darker color, however you can always experiment with them. You can also alter the opacity of the shadow for unique effects.

Below is a video demonstration of how to use layered type.



When you want to use layered type styles, you are using them as display type. In this case you are probably not drawing a text box for paragraph text, but rather just clicking once with the type tool. Utilizing the one click type tool, you have an editable text box that you can re-position easily, but text cannot flow. There may be some occasions when you do not want to do this and actually have an extended amount of text, for example, a restaurant menu.

In some cases you may need to activate the following in illustrator. Type->Area Type Options-> Em Box Height.

Antialiasing

In some instances you may find that you need to change the anti-alias settings in order for smaller type to line up properly. You can do this in Photoshop by clicking on the smooth or sharp options. The reason that you may need to do this is because these different settings determine how the type is rasterized, or converted into pixels. Sometimes the algorithm takes factors into account that are counterproductive for layered type.

Thank you watching this brief tutorial. I hope that you found this tutorial helpful. If you have any questions or comments, I invite you to share them below.

Highlighted Layered Type Families



Landmark



Aviano Sans Layers



Festivo Letters







Core Circus



Le Havre Layers

Where To Use Layered Type

Posters
Invitations
Menus
Headlines
Websites

Comments

Popular posts from this blog

Carta Marina

Carta Marina is based on the titling found on the famous map drawn by Olaus Magnus in 1539. The map of northern Europe took 12 years to complete, and the total size is a huge 1.7 meters tall by 1.25 meters wide. More information about the map, as well as the high resolution reference document used to create the typeface and illustration set can be found at the James Ford Bell Library, University of Minnesota. The titling is slightly aged, very sturdy and elegant. Carta Marina includes a full set of OpenType alternates for every character in the English alphabet, oldstyle figures, historical forms, small caps and 64 discretionary ligatures. These ligatures are used to alter the appearance of the type so that the printing appears realistic and without any duplicate letters to detract from the antique appearance. The Carta Marina family also includes some of the unique illustrations that give the map much of its character. It includes depictions of fanciful sea creatures, land animals a

Microsoft Expression

I have been trying out the Microsoft Expression web design program recently. My final verdict: I like it better than Dreamweaver. I’ve been using Dreamweaver for 5 years now, but where Expressions really shines is its handling of CSS, which is, in my mind, quite a bit better than Dreamweaver. My “problem” with CSS as opposed to tables is that with tables you can visualize what you are doing. CSS is a bit more programmatic. Expression helps a bit. If you are looking to save some money, and you use a PC, you should download Visual Web Developer. You can do some very advanced stuff with this program, and the interface is very much like Expressions. The price is right: free! However, Expression is more intuitive in how it handles CSS. It’s very interesting how Microsoft is starting to head into Adobe’s turf. Microsoft is working on equivalents to everything in Adobe’s product line. My long term bet is on Microsoft.

DevChatt

I had the chance to talk to a group of developers at DevChatt 11. I spoke on webfonts. The talk was recorded, so hopefully I can put the audio up soon. The presentation is available here: I am very happy about my move to Chattanooga (in addition to moving here to be with my wife). There are some tremendous things happening, and a very strong entrepreneurial spirit abounds. After attending DevChatt, I was inspired to brush off a few business ideas and I hope to develop these further. One is related to my core competency, typography, while the other is in a totally different field. I was also inspired by listening to Ale Paul and Luc De Groot in New York City this past week. Here are a few links to some inspiring local organizations: DevChatt CreateHere costarters.co Chattarati colab.is