« Back to hanssprecher.com

By using text-shadow, we can help better implement type to be closer to the typographer's original intent.

4 December, 2011

CSS3 Letterpressing

Text used to be more alive than it is today.

Scribes used to spend working lives copying written pages onto new blank pages. When the printing press came along, metal sorts had slight flaws, so each letter looked subtly different. The paper itself was distorted into a three-dimensional sculpture by the letters being pressed into it.

This meant that typopgraphers considered what would happen to their designs when they were printed. Serifs that were crafted for hand and machine letterpressing would become stronger, slightly more accented, as they were printed.

Fonts created for phototypesetting had the exact opposite effect happen. The serifs would become slightly more frail when printed.

At the end of the last center, typographers had to craft fonts for the screen. Since monitors have lower resolution than paper, these fonts needed different characteristics to maintain readability. In general, larger apertures—the openings in letters—and larger x-heights—the distance from baseline to median, normally the height of lowercase letters like x—were required.

The text-shadow

CSS3 comes with a new property called text-shadow. It allows drop shadows to be placed on text.

However, with clever use of the text-shadow, web designers can give depth to type that's been flattened for decades. Suddenly, we can virtually indent type on the page, although it has been letterpressed into the users monitor.

To do this, we accent the letter with a light, 1 pixel dropshadow that is a highlight (lighter than the color of the font), and set away from the light source.

For example, if the light source on your webpage is in the upper-left, you will need a 1 pixel dropshadow coming off of the lower right side of your text. This gives the illusion that the text is indented. Compare this with a standard button, which has highlights in the upper left to give the illusion it is outset from the page.

.inset {text-shadow:1px 1px 1px rgba(255,255,255,1);}

This small highlight is enough to inset the characters on your page. However, for an even stronger effect, you can create a 1 pixel dropshadow with a darker color than the text towards the light source. This deepens the effect. Use a comma to separate the two dropshadows.

.full-inset {text-shadow:1px 1px 1px rgba(255,255,255,1),-1px -1px 1px #000;}

An example of each of these is shown below, moving from a full indent, to a light indent, to a barely visible indent. Then, the letter is shown with no indent and then a light dropshadow.

a a a a a

Good Applications

Below, I show the same Dumas passage in five different ways—four Roman fonts and an italic font. Two were created to be hand-set, but one of these was hand-set and then ironed out. One of these typefaces was created for machine setting, to be used for printing text in books. This final typeface was created recently, to be used digitally.

By using text-shadow, we can help better implement type to be closer to the typographer's original intent.

Note: If any of the following apears in Helvetica, it means you do not have the correct font loaded on your device. This demo uses web fonts made to work in webkit. They could easily be extended to work in FireFox, IE, mobile, and tablet devices. But I got lazy. Sorry.

Kennerley • 1911 • hand-set

Kennerley—actually, Goudy Bookletter 1911, a Kennerley clone from the good folks at The League of Moveable Type—was an early Frederic Goudy design. Renaissance meets Caslon.

A white highlight to the lower right shows the depth of the type, making the letters appear pressed into the screen.

1. Marseilles—The Arrival.

On the 24th of February, 1815, the look-out at Notre-Dame de la Garde signalled the three-master, the Pharaon from Smyrna, Trieste, and Naples.

As usual, a pilot put off immediately, and rounding the Chateau d’If, got on board the vessel between Cape Morgion and Rion island.

Immediately, and according to custom, the ramparts of Fort Saint-Jean were covered with spectators; it is always an event at Marseilles for a ship to come into port, especially when this ship, like the Pharaon, has been built, rigged, and laden at the old Phocee docks, and belongs to an owner of the city.

Baskerville • 1750 • hand-set

Baskerville is a strong neoclassical typeface, French in origin, pre-dating the quoted Dumas text by only a century.

Although crafted to be hand-set, John Baskerville was known to iron his pages.

Because of this intentional flattening of his work by the designer, Baskerville is not a good candidate for drop shadows, highlights, or other three-dimensional effects.

1. Marseilles—The Arrival.

On the 24th of February, 1815, the look-out at Notre-Dame de la Garde signalled the three-master, the Pharaon from Smyrna, Trieste, and Naples.

As usual, a pilot put off immediately, and rounding the Château d’If, got on board the vessel between Cape Morgion and Rion island.

Immediately, and according to custom, the ramparts of Fort Saint-Jean were covered with spectators; it is always an event at Marseilles for a ship to come into port, especially when this ship, like the Pharaon, has been built, rigged, and laden at the old Phocee docks, and belongs to an owner of the city.

Deepdene • 1927 • machine-set

Another creation from The League of Moveable Type, Linden Hill is a digital version of Deepdene. Deepdene is a graceful typeface from Frederic Goudy. It was created to be machine set and is crafted for books.

The large aperture openings actually make Deepdene an excellent choice for a screen font. However, the fragility of the serifs mean it performs best on monitors with extremely high pixel density.

1. Marseilles—The Arrival.

On the 24th of February, 1815, the look-out at Notre-Dame de la Garde signalled the three-master, the Pharaon from Smyrna, Trieste, and Naples.

As usual, a pilot put off immediately, and rounding the Chateau d’If, got on board the vessel between Cape Morgion and Rion island.

Immediately, and according to custom, the ramparts of Fort Saint-Jean were covered with spectators; it is always an event at Marseilles for a ship to come into port, especially when this ship, like the Pharaon, has been built, rigged, and laden at the old Phocee docks, and belongs to an owner of the city.

Deepdene Italic • 1928 • machine-set

More gentle and fragile than its Roman counterpart. In fact, since it is a slightly smaller font, it does make for a good counterpart to Garamond in a font stack, since Garamond is also relatively smaller.

The machine-set nature of both Deepdene faces mean they can be highlighted to show depth, but with a dimmer highlight color.

1. Marseilles—The Arrival.

On the 24th of February, 1815, the look-out at Notre-Dame de la Garde signalled the three-master, the Pharaon from Smyrna, Trieste, and Naples.

As usual, a pilot put off immediately, and rounding the Chateau d’If, got on board the vessel between Cape Morgion and Rion island.

Immediately, and according to custom, the ramparts of Fort Saint-Jean were covered with spectators; it is always an event at Marseilles for a ship to come into port, especially when this ship, like the Pharaon, has been built, rigged, and laden at the old Phocee docks, and belongs to an owner of the city.

Georgia • 1993 • digital

Georgia was released by Microsoft as a serif font for digital consumption. A large x-height and large aperture make this a good font for smaller sizes on websites (although, for smaller print sizes, a sans-serif is likely easier to read on a screen).

Created to be set digitally, this font performs extremely well unadorned, without the need of a simulated third dimension.

1. Marseilles—The Arrival.

On the 24th of February, 1815, the look-out at Notre-Dame de la Garde signalled the three-master, the Pharaon from Smyrna, Trieste, and Naples.

As usual, a pilot put off immediately, and rounding the Château d’If, got on board the vessel between Cape Morgion and Rion island.

Immediately, and according to custom, the ramparts of Fort Saint-Jean were covered with spectators; it is always an event at Marseilles for a ship to come into port, especially when this ship, like the Pharaon, has been built, rigged, and laden at the old Phocee docks, and belongs to an owner of the city.

Conclusion

If the font face you are working with is true to its hand-set design, you should consider using CSS3 to make at least some of the text appear indented. This technique is particularly useful for headers, pullquotes, and short sections of text where the font is large.

Even on smaller link font and paragraph font, a light lower right highlight can add depth and character to the words.

Like all typography, this effect is best when used in a subtle way, adding to the reader's experience, but not calling attention to itself at all.

© 2012 • Hans Sprecher