Layering type with CSS z-index

Create colorful standout text effects by using the CSS properties z-index and position to layer fonts.

Layers
Layers

 

Layering text adds depth and visual interest to headlines, mastheads and other large display type on your site. There are plenty of fonts that are specifically designed for this technique, and we’ve picked out several of our favorites below. Font families designed for this technique will typically have two or more versions of the font, such as a shadow, fill, outline or a texture. It’s especially important that the fonts all have the same metric values, because making manual tweaks to spacing and kerning is hard enough in DTP applications; in CSS, it’s virtually impossible. The faces below all work right out of the box.

The basic principle of this technique is that it takes two identical lines of text, applies a different version of the font to each (such as an outline and a fill version) and then layers one above the other.

A note of caution: Because we use two (or even more) lines of text, this technique is better suited to static, non-dynamic text instances such a site’s title or masthead, or for the slogan on a home page. More advanced use will require getting into PHP or JavaScript, so we will only explore basic, non-dynamic use in this article.

Writing the CSS and HTML

To start with, create a CSS class to use as the containing parent element, with the position property set to either fixed, absolute or relative. For our example we will use relative:

.layerContainer {
position:relative;
}

Next, create specific IDs for each layer of type including a font-family declaration, position values, a color and a z-index value:

#dog_eared_top {
font-family: "DogEaredSolid-A";
font-size: 200px;
color:#F00;
position:absolute;
top:0px;
left:0px;
z-index:10;
}

#dog_eared_lower {
font-family: "DogEaredSolid-B";
font-size: 200px;
color:#09F;
position:absolute;
top:0px;
left:0px;
z-index:9;
}

position:absolute; positions each text element using the parent div as its reference point, and we locate it exactly where we want to using top and left coordinates. z-index:10; defines the stacking order, higher numbers are higher in the stacking order than lower numbers. Negative numbers are possible.

In our HTML page, we need to create two identical lines of text, each wrapped in a div and assigned its own CSS ID. Those two divs (or however many; some of our examples below use three and more are possible), then, go into their containing div. Here’s the HTML:

<div class="layerContainer">
<div id="dog_eared_top">Layers</div>
<div id="dog_eared_lower">Layers</div>
</div>

And that’s it! It’s a really simple technique, requiring only an understanding of how to position CSS elements in a HTML document. The results can be really vivid and striking, since multicolored, layered type will jump off the page and look as unique as the fonts you choose. The best part is that all our font selections are really good value. Of these selections, the most expensive complete pack is CastleType’s Zamenhof, at $99, and that contains 6 different fonts with lots of potential for different combinations. Most are in the $30 to $50 range.

Scroll down to peruse our choices, and click through to find and buy the fonts on MyFonts.

 

Hand picked: Our favorite fonts for layered effects

 

Dog Eared by Andy Babb

Bowtie
Bowtie

Dog Eared is a three font family that includes a full striped font, as well as the two parts of the solid version used in our demo above. The striped version could also be sandwiched between the two solid fonts for extra color, but there’s a powerful simplicity to the two-tone effect that we really like.

Saloonkeeper from FontMesa

Coffee Beans!
Coffee Beans!

FontMesa’s wild-west flavored script face Saloonkeeper is a six font family that includes a special shadow version of the regular weight, with a thicker outline and squarer corners. In our example above, we positioned the Shadow layer 10px from the top of the div.

Stacker from Wordshape

FEVER
FEVER
FEVER
FEVER

Stacker is a fairly standard display gothic with three additional extruded styles for creating a spatial 3D effect.

Skitch from Yellow Design Studio

Board
Board
WALK
WALK

Skitch, the first of two fonts from Yellow Design Studio we’re featuring here, is a hand-sketched typeface in Shaded, Outline and Fill varieties. The complete pack also includes ornaments in each variety, and is amazing value at $49 for the whole lot.

Anodyne from Yellow Design Studios

MANiFest
MANiFest

Our second font from Yellow Design Studio is the grungy, all-caps font Anodyne. The complete family includes Basic and Italic fonts, with Shadow and Combined versions of each.

Cheap Pine from HVD Fonts

cornchips
cornchips

Cheap Pine from HVD Fonts is another shadow effect all-caps font with a woodcut flavor.

Zamenhof from CastleType

UNIT
UNIT
UNIT

CastleType’s Zamenhof is probably the typeface with the most possible combinations. At the most basic level it’s a(nother) all-caps grotesque with a collegiate inline; but start layering two or three of its five versions, and it becomes a sophisticated and strikingly arresting visual device. Use it huge, one word at a time.