WEAVE 06.09 – Tutorial Webtypografie

Der Quellcode zum Tutorial

René Schulze ist Webdesigner und –entwickler und zeigt in der WEAVE 06.2009 Schritt für Schritt, wie Sie Ihre Websites typografisch verfeinern können. Folgend finden Sie den Quellcode zum Durchlesen und Herunterladen:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  5. <head>
  6.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  7.  
  8.  <title>Webtypografie | Weave</title>
  9.  <style type="text/css" media="screen">
  10.       /* —– Einfacher reset | Start —– */
  11.       * {
  12.                margin: 0;
  13.                padding: 0;
  14.                border: 0 none;
  15.           }
  16.       /* —– Einfacher reset | Ende —– */
  17.  
  18.  
  19.       /* —– Schriften hinzufügen | Start —– */
  20.  
  21.       @font-face {
  22.               font-family: GraublauWeb;
  23.               src: url('GraublauWeb.otf') format('truetype');
  24.           }
  25.  
  26.           @font-face {
  27.               font-family: GraublauWeb;
  28.               font-weight: bold;
  29.               src: url('GraublauWebBold.otf') format('truetype');
  30.           }
  31.           /* —– Schriften hinzufügen | Ende —– */
  32.  
  33.  
  34.           /* —– Textrhythmus und Schriftformatierung | Start —– */
  35.           body {
  36.                color: #222;
  37.                font-size: 100.1%;
  38.                font-family: GraublauWeb, 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
  39.                background: #fdfdfd;/* url('./pattern.gif');*/
  40.           }
  41.  
  42.           html > body {
  43.                font-size: 100%;
  44.           }
  45.  
  46.           p {
  47.                font-size: .875em;
  48.                line-height: 1.5em;
  49.  
  50.                margin: 1.5em 0;
  51.           }
  52.  
  53.           .marginal-note {
  54.                font-size: .75em;
  55.                line-height: 1.75em;
  56.                margin: 0 0 1.75em 0;
  57.           }
  58.  
  59.           h1 {
  60.                color: #444;
  61.                font-size: 1.313em;
  62.                text-align: center;
  63.                background: transparent url('./color-pixel-898989.gif') repeat-x scroll left center;
  64.                line-height: 1em;
  65.                margin: 1em 0 0 0;
  66.           }
  67.  
  68.           h1 a {
  69.                color: inherit;
  70.                text-decoration: none;
  71.                background: #fdfdfd;
  72.                padding: 0 .5em;
  73.           }
  74.  
  75.           h1 a:before,
  76.           h1 a:after {
  77.                color: #898989;
  78.                content: '✪';
  79.           }
  80.  
  81.           h1 a:hover:before, h1 a:focus:before,
  82.           h1 a:hover:after, h1 a:focus:after {
  83.                content: '✩';
  84.           }
  85.  
  86.           h1 a:before {
  87.                padding-right: .5em;
  88.           }
  89.  
  90.           h1 a:after {
  91.                padding-left: .5em;
  92.           }
  93.  
  94.           h2 {
  95.                color: #444;
  96.                font-size: 1em;
  97.                line-height: 1.3125em;
  98.                margin: 1.3125em 0;
  99.           }
  100.  
  101.           h2.byline {
  102.                width: 100%;
  103.                font-size: .75em;
  104.                font-weight: normal;
  105.                text-align: center;
  106.                line-height: 1.75em;
  107.                letter-spacing: .07em;
  108.                margin: 0 0 1.75em 0;
  109.           }
  110.  
  111.           .amp {
  112.                font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif;
  113.            font-style: italic;
  114.            font-size: 1.1em;
  115.           }
  116.  
  117.           .caps {
  118.                font-size: .9em;
  119.                text-transform: uppercase;
  120.           }
  121.  
  122.           sup {
  123.                line-height: 1em;
  124.           }
  125.  
  126.           sub {
  127.                line-height: 1em;
  128.                vertical-align: -.3em;
  129.           }
  130.  
  131.           h2.byline + p:first-letter {
  132.                font-size: 3.281em;
  133.                margin: .06em .1em 0 -.025em;
  134.                line-height: .75em; /* Safari-Ausgleich */
  135.                display: block;
  136.                float: left;
  137.           }
  138.           /* —– Textrhythmus und Schriftformatierung | Ende —– */
  139.  
  140.  
  141.           /* —– Struktur-CSS | Start —– */
  142.       #wrapper {
  143.            width: 46.25em; /* elastisch ✌ */
  144.            margin: 0 auto;
  145.       }
  146.  
  147.           h2, p {
  148.            width: 60%;
  149.       }
  150.  
  151.       .marginal-note {
  152.            width: 25%;
  153.            margin-right: 10%;
  154.            float: right;
  155.       }
  156.       /* —– Struktur-CSS | Ende —– */
  157.  </style>
  158. </head>
  159. <body>
  160.      <div id="wrapper">
  161.           <h1><a href="#" title="Zur Startseite gehen">Webtypografie und schick</a></h1>
  162.           <h2 class="byline">von René Schulze</h2>
  163.           <p>
  164.                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua … . Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.
  165.           </p>
  166.           <p class="marginal-note">
  167.                <sup>1</sup>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
  168.           </p>
  169.           <p>
  170.                Lorem ipsum dolor sit amet, consectetur<sup>1</sup> adipisicing elit, sed do eiusmod tempor <span class="amp">&amp;</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  171.           </p>
  172.           <h2>Lorem ipsum dolor sit amet</h2>
  173.           <p>
  174.                Aorem ipsum <sub>dolor</sub> sit amet, consectetur <span class="caps">adipisicing</span> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco »laboris« nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  175.           </p>
  176.      </div>
  177. </body>
  178. </html>

Seperater Download-Link: http://www.weave.de/wp-content/uploads/2009/11/index.html.zip

Post Tags: , ,