Seis técnicas para títulos usando CSS

En BulletProofBox hay un artículo que muestra algunas de las técnicas más comunes para manejar textos con CSS.

Aunque puede descargarse un ZIP con los ejemplos, me parece que igual vale la pena darles una mirada a cada una de ellas.

1. Para textos grandes como los títulos, lo mejor es recurrir a fuentes de tipo sans serif (Arial, Basic Sans SF o Helvetica).

Los títulos MUY grandes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

El código HTML:

<div id="big-bold">
  <h1 class="big-bold">EL TITULO</h1>
  <p>[ ... el texto a mostrar ... ]</p>
</div>

Las propiedades CSS:

#big-bold {
  background-color: #FFF;
  color:#000;
}
h1.big-bold {
  font-family: 'basic Sans sf', arial, helvetica, sans-serif;
  font-size: 2.1em;
  color: orange;
}
#big-bold p {
  font-family: arial, helvetica, sans-serif;
  font-size: 0.9em;
  line-height: 1.6;
}

2. Utilizar imágenes de fondo que se superpongan con el texto a modo de transparencias (no funciona en IE).

Gradientes Sobre Títulos

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

El código HTML:

<div id="gradient">
  <h1 class="gradient"><span></span>EL TITULO</h1>
  <p>[ ... el texto a mostrar ... ]</p>
</div>

Las propiedades CSS:

#gradient {
  background: #000;
}
h1.gradient {
  font-family: arial, helvetica, sans-serif;
  font-size: 38px;
  line-height: 38px;
  color: #FFFF;
  position: relative;
}
h1.gradient span {
  background: url(URL_h1-gradient.png) top left repeat-x;
  display: block;
  height: 20px;
  position: absolute;
  width: 100%;
}
#gradient p {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 0.8em;
  color: #CCC;
  line-height: 1.6;
}

3. Estos es sencillo, para transformar el texto a a mayúsculas, sólo hace falta usar la propeidad text-transform:

Poniendo todo en mayúsculas

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

El código HTML:

<div id="uppercase">
  <h1 class="uppercase">EL TITULO</h1>
  <p>[ ... el texto a mostrar ... ]</p>
</div>

Las propiedades CSS:

#uppercase {
  background: #000;
}
.uppercase {
  font-family: georgia, "times new roman", times, serif;
  font-size: 1.2em;
  text-transform: uppercase;
}
#uppercase p {
  font-family: georgia, "times new roman", times, serif;
  font-size: 0.9em;
  line-height: 1.4;
}

4. Con las propiedades letter-spacing y word-spacing podemos controlar la separción de las letras y las palabras. Es muy útil para usar en los títulos.

LetterSpacing y WordSpacing

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

El código HTML:

<div id="spacing">
  <h1 class="spacing">EL TITULO</h1>
  <p>[ ... el texto a mostrar ... ]</p>
</div>

Las propiedades CSS:

h1.spacing {
  font-family: Tahoma;
  font-size: 1.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  word-spacing: 0.1em;
  color: #ccc;
}
#spacing p {
  font-family: tahoma, georgia, "times new roman", times, serif;
  font-size: 0.9em;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

5. Una forma distinta de subrayar los títulos, usando imágenes de fondo.

Efecto de títulos subrayados

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

El código HTML:

<div id="underline">
  <h1 class="underline">EL TITULO</h1>
  <p>[ ... el texto a mostrar ... ]</p>
</div>

Las propiedades CSS:

#underline {
  background: #EEE;
}
h1.underline {
  background: url(URL_h1-underline.png) bottom left no-repeat;
  font-family: georgia, "times new roman", times, serif;
  font-weight: lighter;
}
#underline p {
  font-family: "trebuchet ms", verdana, sans-serif;
  font-size: 0.9em;
}

6. Colocar la primera letra de un párrafo con una fuente exageradamente grande, se llama drop caps y es sencillo de hacer aunque requiere ajustar muy bien los valores.

Usando la técnica de DropCap

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

El código HTML:

<div id="dropcap">
  <h1 class="dropcap"><span>E</span>L TITULO</h1>
  <p>[ ... el texto a mostrar ... ]</p>
</div>

Las propiedades CSS:

h1.dropcap {
  font-size: 28px;
  font-family: arial, verdana, sans-serif;
  line-height: 28px;
}
h1.dropcap span {
  font-size: 80px;
  font-weight: lighter;
  position: relative;
  float: left;
  line-height: 50px;
  color: #CCC;
}
#dropcap p {
  font-family: georgia, "times new roman", times, serif;
  font-size: 0.9em; 
  line-height: 1.4;
}

REFERENCIAS:

Cosas Sencillas