Weave » Typografie http://www.weave.de Webdesign, Konzeption & Development Fri, 10 Sep 2010 05:00:10 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 WEAVE 06.09 – Tutorial Webtypografie http://www.weave.de/linklisten/typotricks0609 http://www.weave.de/linklisten/typotricks0609#comments Wed, 04 Nov 2009 05:00:59 +0000 fwolf http://www.weave.de/?p=1781

Typo-Tricks

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. Im folgenden die Links zum Artikel:

Typografische Inspirationsseiten
typesites.com, typographica.org, ilovetypography.com, fontblog.de

Infos zu Typografie im Web
typografie.info, typedia.com

em-Kalkulator
riddle.pl/emcalc/

Das jQuery-Plug-in jMetronome verhindert, dass Bilder und Videos den Rhythmus Ihres Layouts zerstören
fortes.com/2008/08/jmetronome-using-jquery-to-keep-typographic-rhythm

Übersicht über die wichtigsten Zeichenreferenzen
de.selfhtml.org/html/referenz/zeichen.htm

5 Techniken, mit denen Sie frische Fonts jenseits der Systemschriften verwenden können

sIFR (Scalable Inman Flash Replacement)
mikeindustries.com/blog/sifr

Cufón
cufon.shoqolate.com

FLIR (Facelift Image Replacement)
facelift.mawhorter.net

Image Replacement
meiert.com/de/publications/articles/20050513

@font-face
webfonts.info

]]> http://www.weave.de/linklisten/typotricks0609/feed 0 WEAVE 06.09 – Tutorial Webtypografie http://www.weave.de/code/typotricks0609-2 http://www.weave.de/code/typotricks0609-2#comments Wed, 04 Nov 2009 05:00:51 +0000 fwolf http://www.weave.de/?p=1784

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

]]> http://www.weave.de/code/typotricks0609-2/feed 0