CSS3 Letterpressing
By using text-shadow, we can help better implement type to be closer to the typographer's original intent.
Text used to be more alive than it is today.
Scribes spent working lives copying written pages. With the printing press, metal sorts had slight flaws, so each letter looked subtly different. The paper itself distorts into a three-dimensional sculpture by the letters being pressed into it.
This meant that typopgraphers considered what happened 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 enjoy the opposite effect. Serifs become slightly more frail when printed.
At the end of the last century, typographers crafted 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 on the screen. We can virtually indent type on the page, as though it has been letterpressed into the user's monitor.
To do this, accent the letter with a light 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 #fff;
}
This small highlight is enough to inset the characters on your page. For an even stronger effect, add a 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 #fff, -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, the same Dumas passage is shown 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 render type 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 be extended to work in FireFox, IE, mobile, and tablet devices. I got lazy. Sorry.
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.
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.
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.
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.
Conclusion
If the font face you are working with is true to its hand-set design, 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 subtle, adding to the reader's experience without calling attention to itself.