Layering Type with CSS Z-index
Create colorful standout text effects by using the CSS properties
position to layer fonts.
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.
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:
Next, create specific IDs for each layer of type including a font-family declaration, position values, a color and a z-index value:
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:
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 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
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 is a fairly standard display gothic with three additional extruded styles for creating a spatial 3D effect.
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.
Cheap Pine from HVD Fonts
Zamenhof from CastleType
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.Back...
Posted 05 Aug, 2012 by anthony-noel
Filter articles by category:
Filter articles By tag:
- Autotranslate (1)
- CSS (3)
- Drop caps (1)
- Fashion (1)
- Font stacks (1)
- grunge effect (1)
- hand drawn (1)
- Hosting (1)
- Illustrative type (2)
- Licensing (1)
- Line height (3)
- Logotype (1)
- natural media (1)
- OpenType (1)
- Print design (1)
- Publishing (1)
- Sans serif (1)
- Site roundups (1)
- Subsetting (1)
- Web design (2)
- Z-index (1)
Case Study: Chessington.com
Our first look at webfonts in the real world takes us on an English safari, through Chessington…
Webfonts and Autotranslate
Webfonts offer greater control and visual consistency when using automatic site translation. With a…
Part 3: Line height options in the kitbuilder
Our Webfont Kit Builder allows the user to fix some of the problems described in the previous part…