[Skip to the Main Content]

A 1957 Typographic Composition with CSS

Sometimes serendipitous things occur.

I read printed matter from 1920’s - 1950’s for its use of formal typography. I’ll study its graphic and typography design for future use or as CSS case studies. The following study was performed as continuous self-education with the hope that it would be usable for design work.

The study was educational but not very practical.

The page below was originally copyrighted in 1957. The layout is straitforward except for that highlighted text.

1957 Typography Example

The first paragraph is the introduction to the “Adhesive” chapter. This is evident from reading the text but also from the space between the first and second paragraphs. This can be styled with one header, three paragraphs and one <span> as the example below illustrates.

The CSS,


h2, p { color: #000; font: 1em Times, "Times New Roman", serif; }
h2 { font-size: 1.6em; }
p { width: 400px; margin: 0; padding: 0; text-align: justify; line-height: 1.4; text-indent: 15px; }
.introductory-p { margin-bottom: 1em; }
.faux-small-caps { text-transform: uppercase; }
.unindented { text-indent: 0; }

The HTML,


<h2>The Snark Escapes</h2>
<p class="introductory-p">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. »
Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora »
torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat»
nec, mollis quis, posuere eget, arcu.</p>
<p class="unindented"><span class="faux-small-caps">The hunting continues</span>. »
Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer »
nonummy mauris sit amet metus.</p>
<p>In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet »
urna diam sed tellus. Etiam semper sapien eget metus.</p>

This works in Firefox, Opera, Safari and IE. See First Example.

Or,

CSS Span Example

However, let’s say—Semantically—that first sentence in the second paragraph should be an <h3> (since it’s a subchapter heading). Sadly, nothing simple worked in my attempts at setting an <h3> inline with a paragraph; I gave up and found other amusements. Later, serendipity struck. I was reading Cascading Style Sheets, level 2 revision 1, CSS 2.1 Specification and found this, 9 Visual formatting model, 9.2.3 Run-in boxes. It had an example of what I wanted to do. I wrote mine.

The HTML,


<h2>The Snark Escapes</h2>
<p class="introductory-p">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. »  
Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora »
torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat »
nec, mollis quis, posuere eget, arcu.</p>
<h3 class="title-in-paragraph">The hunting continues.</h3>
<p>Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. »
Integer nonummy mauris sit amet metus.</p>
<p>In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed »
aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>

The CSS,


h2, h3, p { color: #000; font: 1em Times, "Times New Roman", serif; }
h2 { font-size: 1.6em; }
h3.title-in-paragraph { display: run-in; margin-right: .5em; text-transform: uppercase; }
p { width: 400px; margin: 0; padding: 0; text-align: justify; line-height: 1.4; text-indent: 15px; }
h2 + p { margin-bottom: 1em; } /* Safari fix */
h3.title-in-paragraph + p { text-indent: 0; }

This works in Safari and Opera; it doesn’t in Firefox and IE. See Second Example.

Or,

CSS Run-in Safari/Opera Example

[ Safari/Opera ]

CSS Run-in Firefox/IE Example

[ Firefox/IE ]

Interestingly, Opera applied the default rendering of of the <h3> top margin/padding to the <h3 class="title-in-paragraph"> and the paragraph's no bottom margin or bottom padding since it has become an inline box because the paragraph is an inline element. Safari has inherited the paragraph's no margin or padding which is why the “Safari fix” was added. And, Safari and Opera inherited the paragraph’s text-indent style. And, Firefox—which parses adjacent sibling selectors —displays no indent on that one paragraph. And, Opera doesn’t recognize a:hover with display: run-in until it has been clicked. Other than that, it's fine.

Why bother? since it doesn’t work in IE or Firefox?

No particular reason.


Sean Fraser posted this on February 12, 2007 11:24 AM.

  • Add to Technorati Favorites
  • de.licio.us: http://www.elementary-group-standards.com/typography/a-1957-typographic-composition-with-css.html
  • furl: http://www.elementary-group-standards.com/typography/a-1957-typographic-composition-with-css.html
  • reddit: http://www.elementary-group-standards.com/typography/a-1957-typographic-composition-with-css.html

Comments

Devon Young wrote this at February 12, 2007 03:08 PM

Why do you use H2 for the actual chapter title? Why not an H1, since it's the content's title? I like the idea of using run-in boxes, especially since the latest Firefox development release can handle inline-boxes


Comment Author Gravatar
Sean Fraser wrote this at February 12, 2007 05:28 PM

Devon: An excellent question but I haven't got an academic reply. It's my preference.

I only use one H1 and it's for the name of the site. All article titles are H2. I've read (and, have been reading) various discussions about proper header use and hiearchy but I haven't found a consensus. I suppose I could use H1 for article titles. Though - rumour has it - that if a page has more than three H1s, it wil be penalized by search engines.

Mozilla's CSS run-in attribute doesn't work. If you look at CSS Reference:Mozilla Extensions, you'll see their note: "All of these values should be considered deprecated." which includes -moz-run-in.

Still. I've used display:run-in on the "Site Standards" directory page. I've taken a small page from Malarkey's Mod/Two Tone philosophy: some will see a difference if they use different browsers but most don't view sites with six (or more) different browsers. They'll see what they see.


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