Case 4: The New Typography


Case 4: "The New Typography"

Figure 11.5 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.

Figure 11.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:

 <style>   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} </style> <body> <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 <p>   Translated by   <span class=name>Ruari McLean</span> <p>   Introduction by   <span class=name>Robin Kinross</span> </body> 



Cascading Style Sheets(c) Designing for the Web
Cascading Style Sheets: Designing for the Web (3rd Edition)
ISBN: 0321193121
EAN: 2147483647
Year: 2003
Pages: 215

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net