Menú principal

Tipografía Web

Introducción

<

Antes de que las Hojas de Estilo (CSS) viesen la luz, los desarrolladores web usaban la etiqueta <font> dar color, tamaño y estilo al texto.

<font face="Verdana, Arial" size="+3" color="black">La situación actual...</font>

Aunque el método descrito sea adecuado para cambiar la apariencia del tipo de letra; ¿qué ocurre cuando lo usamos para manipular sitios web completos?.

Problemas:
- La actualización del sitio consume más tiempo.
- Puede incrementar el número de errores al maquetar.

CSS nos ayuda a eliminar esos problemas de diseño y mantenimiento. Este problema lo podemos resolver de distintas formas, como por ejemplo colocando el contenido dentro de la etiqueta <p>:

<p> La situación actual... </p>

Después usamos CSS en la cabecera del documento para dar estilo al elemento <p>

<style type="text/css" media="all">

p {
      color:blue;
      font-size: small;
      font-family: Verdana, Arial, sans-serif;
    }

Hemos conseguido separar la estructura y la presentación visual del documento. El proceso de mantenimiento y modificación del sitio web resulta mucho más simple.


Especificar fuentes y herencia

Podemos especificar los tipos de fuente, colocándolas una detrás de otra separadas por un punto y coma (;). Si el navegador no puede encontrar la primera fuente de la lista, intentará encontrar la siguiente y así sucesivamente, hasta encontrar una fuente.

Si el nombre de la fuente contiene espacios, encerramos el nombre entre comillas simples o dobles. Al final de la lista, deberíamos de insertar un tipo de fuente genérico. CSS ofrece cinco familias con sus valores a elegir.

Fuentes genéricas


serif (Georgia, Times, Times New Roman, Gramound, Century Schoolbook)

sans-serif (Verdana, Arial, Helvetica, Trebuchet, Tahoma)

monospace (Courier, MS Courier New, Prestige)

fantasy (Comic sans, Whimsey, Critter, Cottonwood)

Los elementos hijos heredan las propiedades del padre. Por ejemplo:

<p style="font-family: serif;">El hombre es celoso si ama; <em>la mujer</em> también, aunque no ame.</p>

El párrafo anterior contiene un elemento <em> como hijo de <p>. El texto de <em> también contiene las propiedades de <p>.

Ver ejemplo de formato con css:

Ejemplo 1
Ejemplo 2