Tipografia avanzada con CSS

Ya lo digo yo (por si no se nota, je): He cambiado la fuente del título de las entradas, así como la del cuerpo de las mismas. Y lo he hecho siguiendo la guía de designs.com.

Se pueden lograr todos esos textos que véis, combinando inteligentemente el CSS, como hace el autor de la página:

.- CSS:

/*===============================================================



T Y P O G R A P H Y



==================================================== =TYPOGRAPHY */



h1, h2, h3, h4, h5, p { margin: 30px 0 15px 0; }



h1 { font-size: 32px; line-height: 1em; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid #4c4c4c; padding: 0 0 7px 0; margin: 15px 0 7px 0; }

h1 a { color: #fff !important; text-decoration: none; }

h1 a:hover { text-decoration: underline; }

h2 { font-size: 20px; text-transform: uppercase; letter-spacing: .2em; line-height: 1em; margin: 30px 0 15px 0;}

h3 { font-size: 24px; text-transform: uppercase; letter-spacing: .05em; margin: 15px 0 30px 0;}

h4 { font-size: 22px; }

h5 { font-size: 18px; color: #6a6969; text-transform: uppercase; letter-spacing: -.01em; margin-top: 0px; }



p, ul, ol, dl { font-size: 15px; line-height: 1.5em;}



/*===============================================================

/* ====================================

TYPOGRAPHY

======================================= */



/* ADVANCED TYPE PAGE */



.css_type { background: #fff; padding: 15px; }



h5.reflect_1 { color: #666666; border-bottom: 6px solid #444444; line-height: .2em; margin: 0; padding:0 0 0 10px; font-size: 24px; }

h5.reflect_2 { color: #AAAAAA; margin: 0; line-height: .6em; border-top: 1px solid #EEEEEE; padding: 0 0 0 10px; font-size: 24px;}



h5.line_drop { font-family:"Trebuchet MS", Garamond, Georgia; line-height: .7em; border-bottom: #990000 1px solid; color: #990000; font-size: 24px;

letter-spacing: -2px; text-transform: none; }



h5.elegant { letter-spacing: -2px; font-family:Georgia, "Times New Roman", Times, serif; font-weight: 100; text-transform: none; text-shadow: #666666 0.2em 0.2em; font-size: 36px; color: #fff; }



h5.handwriting { font-style: italic; font-weight: bold; font-family: "Comic Sans MS"; letter-spacing: -1px; word-spacing: .25em; text-transform: none; font-size: 18px; }



h5.handwriting2 { font-style: italic; font-weight: 100; font-family:"Trebuchet MS", Garamond, Georgia; letter-spacing: -1px; word-spacing: .25em; text-transform: none; font-size: 18px;}



h5.handwriting3 { font-style: italic; font-weight: 100; font-family: "Comic Sans MS"; letter-spacing: 1px; word-spacing: .25em; text-transform: none; font-size:18px;}



h5.hide { font-size: 24px; font-weight: 100; line-height: .4em; border-bottom: 7px solid #FFFF66; text-transform: none; }



h5.capital { font-size: 40px; text-transform: uppercase; letter-spacing: -5px; font-family: georgia; text-transform: none; margin-bottom: 30px; color: #fff;}

h5.capital span { text-transform: none; font-size: 30px; text-transform: lowercase; letter-spacing: -2px; font-family: georgia; margin-bottom: 30px;}





p.letters { line-height: .64em; letter-spacing: -2px; font-family: "Courier New", Courier, monospace; font-size: 26px; font-weight: 100; text-transform: uppercase; color:#fff;}



p.letters2 { line-height: .72em; letter-spacing: -2px; font-family: "Times New Roman", Times, serif; font-size: 26px; font-weight: 100; text-transform: uppercase; color:#fff}



p.letters3 { line-height: .77em; letter-spacing: -2px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 26px; font-weight: 100; text-transform: uppercase; color:#fff}



h5.newspaper { letter-spacing: .10em; font-size: 36px; text-transform: uppercase; font-weight: 100; border-bottom: groove 2px #CCCCCC; width: auto; line-height: 1em; }



h5.newspaper span { font-family: Georgia, "Times New Roman", Times, serif; text-transform: none;}



h5.newspaper2 { letter-spacing: .10em; font-size: 36px; font-weight: 100; border-bottom: groove 2px #CCCCCC; width: auto; line-height: 1em; font-variant: small-caps; text-transform: none;}



h5.funky { font-family: "Trebuchet MS", Garamond, Georgia; font-size: 36px;letter-spacing: 14px; line-height: .65em; color: #666666; font-weight: 100; text-transform: none; }

h5.funky span { letter-spacing: 8px;}



h5.el { font-family: Verdana, Arial, Helvetica, sans-serif; color: #BBBBBB; border-bottom: #CCCCCC 1px solid; letter-spacing: 3px; font-weight: 100; line-height: .8em; font-size: 24px; text-transform: none;}



h5.num_blend { font-family: "Times New Roman"; font-size: 36px; font-weight: 100; text-transform: none;}



h5.num_blend span { font-size: 24px; line-height: 1em; font-style: italic; font-weight: bold; letter-spacing: 2px; text-transform: none;}



h5.scaps { font-variant: small-caps; letter-spacing: -1px; font-size: 200%; font-family: "Courier New", Courier, monospace; font-weight: 100;}



.storycontent { margin: 0 0 25px 0; }



.related h2 { font-weight: bold; text-transform: capitalize; }





<style type="text/css">

h3.capital { font-size: 375%; text-transform: uppercase; letter-spacing: -8px; }<br />

h3.capital span { font-size: 70%; text-transform: lowercase; letter-spacing: -1px;}<br />

.- HTML:

<h5 class="reflect_1">KINDEK INC</h5>

<h5 class="reflect_2">KINDEK INC</h5>



<h5 class="line_drop">Web Design Rockstarz</h5>



<h5 class="funky">Fun<strong><em>k</em></strong>y <br /><span> Web<em><strong>d</strong></em>esign!</span></h5>



<h2>Fancy Headlines</h2>

<h5 class="elegant">The chapel De La Ross Johnson</h5>



<h3>Flowing Headlines</h3>



<h5 class="capital">C<span>aptivating, </span>C<span>reative</span></h5>



<h5 class="capital">L<span>ogan’s </span>L<span>itigation</span></h5>

<h5 class="capital">Z<span>efer </span>Z<span>oo</span></h5>

<h5 class="capital">B<span>est </span>B<span>uilding</span></h5>



<h2>Hand Writing</h2>



<h5 class="handwriting">Don&#8217;t forget to turn off the lights when you leave!</h5>

<h5 class="handwriting2">Don&#8217;t forget to turn off the lights when you leave!</h5>

<h5 class="handwriting3">Don&#8217;t forget to turn off the lights when you leave!</h5>



<h2>Typewriter</h2>

<p class="letters">Potential use for magazine style typography<br>Close line height and letter spacing, <br> almost connected lines…</p>



<p class="letters2">Potential use for magazine style typography<br>Close line height and letter spacing, <br> almost connected lines…</p>

<p class="letters3">Potential use for magazine style typography<br>Close line height and letter spacing, <br> almost connected lines…</p>





<h2>Newspaper Headlines</h2>

<h5 class="newspaper"><span>Webdesign</span> Times</h5>

<h5 class="newspaper2">Webdesign Times</h5>



<h2>Misc</h2>

<h5 class="el">SATURDAY MARCH 19TH 2046</h5>

<h5 class="num_blend">Rock<span>5</span>tar and a De<span>51</span>gner</h5>

Nada más... y nada menos...