Balboa Plus, Discourse Middle, Sutro Shaded are very popular layered fonts among a ton of others. (And yes, that's true, we should say Layered typefaces instead of fonts. Fonts are the variations of a typeface.)

These fonts provide designers an exciting design option: the ability to display several colors and textures within a single piece of text. Unfortunately, layered fonts aren’t widely used on the web, because of the advanced layout techniques required, as well as the file weight they can add to a site.

To use layered fonts for a title, for example, you need to create one title element for each layer of the font you want to use, then layer them precisely using CSS position attributes.

For this tutorial, we’ll use this design for inspiration:

What you’ll need for this tutorial

A layered font you can use in Webflow

We’ll use Sutro Shaded, as it's available on Typekit, which comes included in Adobe CC. But feel free to use whatever layered font fits your fancy — just know that we’ll be using Sutro Shaded’s various names as class names throughout the tutorial, so you’ll be using different names, most likely.

The knowledge that many web fonts can slow down your site

To build this example, I've loaded all variations of Sutro Shaded, exploding the weight of my kit to 708K! That’s unacceptable for a production site, so be sure to limit the number of layers you’ll use.

A dynamic Collection

You can obviously employ this technique for any text on your site — keeping in mind the caveat about multiple H1 tags below — but it really comes into its own when used with dynamic content.

Now, on with the show!

Step 1: Add your first font layer

First, we need to create an element to contain our title. So we’ll drag a DIV onto the canvas and call it “layered title container.” Then we’ll give this div position: relative.

Since we’re building a dynamic post title and not a page title, we’ll drag a Heading element into that div, set it to H2, and name it “layered sutro title.”

Note: You could be tempted to just duplicate the H2 element for the other layers of the font. Don't do it. Semantically, it would means nothing, and search engine won't understand the structure anymore. For the other layers, we will use just text elements, which are not H titles or paragraph. Just text.

Step 2: Style your first heading layer

Now we give it the Sutro-shaded-primary font and a good 45px size.

Now let's add a class to form a combo class. We name it shaded primary.

‍

We also give it position:absolute and top:0 left:0

Step 3: Add a second heading layer

Now, we got to continue with normal text elements rather than H titles. Drag a text Element just after the H2 title. Type in the same text inside (here "Heading") for convenience, and give it the same primary class as we gave our H2 title: "layered sutro title". It will then get the font, the size, the positioning. If the text isn't aligned, or not the same color, add in color: white and text-align: left. Since it's positioned absolutely, the new layer should appear on top of the first layer and become pretty invisible. Don’t panic if you can’t see it: it’s there.

Now, we will add the combo class on this new title layer. Add "shaded fill".

Then select the “fill” variant of the Sutro font, and give it a different color, just so we can see it while we work. At this point, you should be seeing something like this:

Step 4: Repeat as needed for your font

Now let's repeat the operation twice for the “hi lite” and “gradient” layers, selecting the corresponding variant of the font for each new layer and combo class. Just be sure to give each new layer a different color to simplify the design stage.

Step 5: Get your layers in order

Once you’ve got all the layers you need, you’ll want to make sure they’re in order.

To do that, use the Navigator panel to select the first layer and give it a z-index of 1. Then repeat as follows:

• Fill layer: z-index 2
• Hi lite layer: z-index 2
• Gradient layer: z-index: 3

Adjust the colors for each, and you should see this:

Step 6: Hook it up to the CMS

At this point, you’ve probably realized that this title is pretty work-intensive. Every time you want to change it, you’ll have to do it 4 times — on elements that are hard to reach and select.

That's what make the CMS a great way to use those layered fonts — because it’ll handle all the hard work of editing for you.

To link your fancy new heading to a Collection, select the title container div and place it either in a Dynamic List or a Collection Template page.

Then, one by one, select each layer and tell it to “get text from” the title (probably your Name field) from your CMS Collection. After the first layer, it’ll look something like this:

We adjust the text line height on the root class of the title element, so it affects all layers:

And we link the three other title layers to the same CMS title. Use the Navigator tab, it's easy to see which ones are linked already.

And the task is complete.

Note: Generally speaking, you wouldn’t want to use a specific font name in a class name, as you might well decide to switch to a different layered font in future.

Now your post titles will automatically show up dressed like this. You can try to change the decoration by changing the font on the gradient layer.

‍

Resources

• Multi layer fonts on Myfonts.com
• Sutro Shaded font on Myfonts.com
• Sutro Shaded font on Typekit.com
• Frontage on Myfonts.com

‍