Case 4: "The New Typography"

Case 4: "The New Typography"

Figure shows the jacket of another famous book: Jan Tschichold's Die neue Typographie of 1928, in a 1995 English translation. The design is by Steve Renick and, of course, the version shown is again only an interpretation. We haven't asked the designer how the layout should change if the window becomes wider or the font larger.

5. "The new typography."

Jan Tschichold. The New Typography. University of California Press, Berkeley, CA, USA (1995).

This example is much simpler than the previous one. There is no need for negative margins. The interesting parts are the red rectangle behind the letters "typo" and the first line of the subtitle, which is uppercase. For the red rectangle, we need a SPAN around the four letters. The uppercase first line can be handled with a :first-line pseudo-element. For the rest, the design relies on a large line height and wide margins. Here is the complete document with its style sheet:


  BODY {background: black; color: white;

    font-family: "Helvetica", sans-serif;

    margin: 0; padding: 0; line-height: 4.5em}

  P {margin: 0 6em 0 9em}

  .author {font-weight: 800;

    font-size: 133%; margin-left: 2.5em;

    text-transform: uppercase}

  .title {margin: 0 0 2em 0;

    text-transform: uppercase}

  #th {display: block; margin-left: 9em}

  #ty, #gr {font-weight: 800; font-size: 280%}

  #ty {background: red; padding: 0.3em 0}

  .desc:first-line {text-transform: uppercase}

  .name {text-transform: uppercase}



<p class=author>

  Jan Tschichold

<p class=title>

  <span id=th>The new</span>

  <span id=ty>typo</span><span id=gr>graphy</span>

<p class=desc>

  The first English translation of the

  revolutionary 1928 document


  Translated by

  <span class=name>Ruari McLean</span>


  Introduction by

  <span class=name>Robin Kinross</span>


     Python   SQL   Java   php   Perl 
     game development   web development   internet   *nix   graphics   hardware 
     telecommunications   C++ 
     Flash   Active Directory   Windows