[Skip to the Main Content]

CSS Typography for an 1855 Broadside

All things on the world wide web are illusory ephemera.

That was my thought as I was engaged with cascading style sheet amusement one afternoon. I didn’t wish to collect quality assurance data for the W3C HTML Working Group Top 200 Sites Survey; I did not want to work on the design realignment for this site; and, I did not want to work on a proposed site. I wanted to make something small. Broadsides are perfect for practicing CSS and using type that has fallen on the print-room floor.

I found this broadside whilst perusing through the stacks in the Library of Congress: An American Time Capsule: Three Centuries of Broadsides and Other Printed Ephemera

It intrigued me because of the layout, of the sentence spacing in the layout and oddity of text. Especially, “If strangers would procure a faithful and beautiful Portrait of loved ones at home...” What Loved Ones portrait in whose home has been procured by Strangers? I like finding broadside layouts with text that is odd for this century. That sentence made sense in 1855.

Sometimes, after finding a broadside, I will rewrite all of the text; sometimes not. Sometimes the layout will crumble between User Agents, or UAs, and/or monitor settings depending on the typography one is attempting to imitate with CSS; sometimes not. The purpose of typesetting broadsides with CSS is not an exact replication of the original typography but how close one can approximate that layout. Broadsides offer simple mechanical elements whereas magazine advertisements are problematic: fixed height columns with text ending perfectly at the bottom of each column is not possible in this fluid medium of web pages.

Shades Daguerreotype Gallery was my effort. [Note: It does break.]

I have one simple rule: the piece must meet Web Standards. All text must be displayed with style sheets disconnected. Therefore, all images are background-images used with text-indent: -9999px (excepting the horizontal rules). I’ll set up all of the image-as-text lines on one page but individual layers. I have found it much simpler to set the width of the images to the container size and center the text in Photoshop: I do not have to monkey with cropping images to individual width sizes. Previously, I would just set pseudo-HRs in an empty paragraph with a set width, height and a background image; and, be done with it. For this amusement, I wanted to attempt semantic correctness. I—Vaguely—remembered an article about a semantic method for using a background image on a horizontal rule and, after searching, I found it. Image on a background of horizontal rule (HR) without wrapper element in IE by Jaroslav Polakovic [October 15, 2006] was that article. At the time, I did not have any use for his method and forgot it. It works perfectly. His fix:

<style type="text/css">
hr {
        border: none;
        background: url('image.gif') center center no-repeat;
        height: 15px;

<!--[if lte IE 7]>
<style type="text/css">
hr {
background-image: url('four-times-larger-image.gif');
height: 60px;
zoom: 25%;

I used font-sizes in pixels for—Slightly—greater control with typesetting between browsers. And, reset them in em for IE. Of course, Everything breaks when the text size is adjusted. Or, when a user’s monitor has awkward settings.

The internal spacing within the paragraphs was delicate. I used inline styling (in an HTML 4.01/Strict document). It was set for my Mac and PC default settings.

The fonts used were:

Shades = Rackham

Daguerreotype = Gutenbergs Traces

Talbotype, Stereoscopic & Crayon = Alcoholica

Portrait & Miniature = Memorial

Admission Free!! = Gorey

Remember the Rooms = Virginia Plain

Broadsides make for simple exercises with CSS and typography. If you should feel so inspired to create a different version of a broadside based on the above original, please add a comment with a link to your page. Or, set a screenshot on Flickr with the tag “cssbroadsides”.

It’s electro-ephemera at its finest.

Sean Fraser posted this on July 22, 2007 02:34 PM.

  • Add to Technorati Favorites
  • de.licio.us: http://www.elementary-group-standards.com/typography/css-typography-for-an-1855-broadside.html
  • furl: http://www.elementary-group-standards.com/typography/css-typography-for-an-1855-broadside.html
  • reddit: http://www.elementary-group-standards.com/typography/css-typography-for-an-1855-broadside.html


Comment Here

Reply guidelines: Basic HTML (a href, p, code, blockquote, dl, dt, dd, ul, ol, li, cite and q) are allowed. Line breaks and paragraphs are automated.

Inappropriate, unwarranted or self-aggrandizemented comments may suffer redaction. Or, deletion.

[Note: A gravatar, or globally recognized avatar, is that small image in the comments. Gravatar sets-up them.]

The Elementary Standards: A Compendium of Web Standards, CSS, Linguistics and Search Engine Optimization methodology Copyright ©2005-2007 Sean Fraser. All work is published under a Creative Commons License. All Rights Reserved.

Palm trees on a grassy field in Hawai’i

Main Content Returns thus