comparte el articulo 

Estilizar la tipografía de las páginas web con CSS

Actualizado el 05/10/2013 < > 2 Cometarios

Resumen: El manejo correcto de la tipografía es importante para la estética de la página y para mantener el interés de los usuarios.

La tipografía, además de ser el contenido verbal, tiene también un componente visual que se integra al diseño. La primera impresión de los visitantes de una página web es estrictamente visual, y luego, en caso de sentirse atraído, entra en contacto con el material escrito.

Otra característica de la tipografía es que establece las jerarquías entre los distintos niveles del contenido textual, algo que todo diseñador debe realizar en forma correcta, a fin de lograr el interés de sus visitantes.

La tipografía es uno de los elementos más variables entre los que componen una página web. Un diseñador web debe tener siempre en cuenta los múltiples problemas que pueden surgir desde el momento que decide establecer las diferentes tipografías.

El proceso de visualización de una página web por parte de los usuarios, implica una relación compleja entre el servidor, el navegador y el sistema operativo, lo que puede hacer que no siempre el usuario final tenga una vista de la página tal como el diseñador la ha pensado.

Si bien es cierto que las diferencias entre los distintos sistemas operativos y los diferentes navegadores se han limado mucho en los últimos tiempos, existen aún diferencias que pueden hacer compleja la tarea del diseñador web. Además, siempre se debe contar con que una parte de los usuarios de internet no actualizan con frecuencia su software, por lo que los cambios producidos recientemente es posible que no tengan efectos inmediatos en la mayoría de los usuarios.

Tipografía en pantalla vs. tipografía impresa

La tipografía de las páginas web tienen diferencias sustanciales con la tipografía impresa. La resolución de las tipografías de las páginas web está muy limitada por la cantidad de puntos por pulgada (ppp), que en los sistemas de impresión, aún los de menor resolución, son muy superiores.

Sin embargo, gracias al sistema “anti-alias” que los sistemas operativos aplican a sus fuentes, es posible mejorar la visibilidad de las mismas. El “anti-alias” es el suavizado de los bordes mediante la aplicación de un gradiente. En la siguiente imagen, veremos una comparación de fuentes con y sin anti-alias.

Fuentes con y sin anti-alias

Muchos diseñadores novels tienden a justificar el texto en pantalla, aunque hablaremos más adelante en este artículo de esto, tener en cuenta desde el principio que un texto justificado no se ve igual en pantalla que impreso. El modo de renderizar este tipo de alineación no es óptima en pantallas de ordenador. El navegador tiende a justificar el texto a costa de establecer espacios irregulares entre las palabras, algunas aparecen más juntas, otras claramente alejadas provocando saltos bruscos dentro de las frases lo que dificulta su lectura. Lo más usable es dejar el texto alineado a la izquierda.

La tipografía y las hojas de estilo en cascada (CSS)

Dentro de las muchas ventajas que tiene desde varios puntos de vista el empleo de las hojas de estilo en cascada (CSS), una de las más interesantes es la facilidad que da al diseñador en el manejo de las tipografías. Antes de la generalización del uso del CSS, las características de los diferentes elementos de una página debían establecerse en el HTML. Además de que el HTML  no está diseñado para esto, el empleo de las características del HTML para dar estilo a los elementos del diseño tiene el grave inconveniente de que se debe especificar para cada una de las etiquetas incorporadas, los elementos particulares de estilo.

Esto quiere decir que, si no se emplean las hojas de estilo en cascada, cada vez que se establece, por ejemplo, un nuevo párrafo, se deben establecer las características de la tipografía. Esto se resuelve en forma mucho más sencilla en CSS, ya que basta con establecer una vez las características tipográficas del párrafo, para que cada vez que se coloque la etiqueta <p> en el HTML, queden establecidos automáticamente los atributos.

Veamos un ejemplo. Los siguientes códigos corresponden a ambos métodos. En el primero, se establecen los atributos de la tipografía en el HTML, mientras que en el segundo, primero se establecen los atributos en la hoja de estilo y luego aparece el código HTML notoriamente simplificado.

<html>
<head>
<title>HTML de ejemplo</title>
</head>
<body>
<p align="center"><font color="red" face="arial, helvetica" size="4"><b><i>Esta es una frase de ejemplo</i></b></font></p>
<p align="center"><font color="red" face="arial, helvetica" size="4"><b><i>Esta es otra frase de ejemplo</i></b></font></p>
<p align="center"><font color="red" face="arial, helvetica" size="4"><b><i>Y ahora establecemos una frase final</i></b></font></p>
</body>
</html>
<style type="text/css">
p  {
text-align: center;
font: italic bold 18px arial, helvetica;
color: red;
}
</style>
<html>
<head>
<title>HTML de ejemplo</title>
<link rel="stylesheet" href="estilo.css" type="text/css" />
</head>
<body>
<p>Esta es una frase de ejemplo</p>
<p>Esta es otra frase de ejemplo</p>
<p>Y ahora establecemos una frase final</p>
</body>
</html>

Como puede apreciarse en el ejemplo anterior, el código HTML aparece mucho más limpio y simple, lo que, además del beneficio que implica en el ahorro de tiempo en la escritura de código, favorece notablemente la optimización de la página para los buscadores. Otra ganancia adicional con el empleo de las hojas de estilo, es la posibilidad de establecer algunas características que son imposibles de instrumentar en el HTML, como la distancia entre caracteres, distancia entre líneas, color de fondo, etc.

Cada día, son más las ventajas que aparecen para el uso de hojas de estilo. Un ejemplo de ello, son las nuevas características de algunos navegadores, que permiten a los usuarios establecer hojas de estilo personalizadas, haciendo que las personas con dificultades visuales puedan establecer otros tipos de contraste y tamaños de fuente, por ejemplo, mejorando notoriamente la visibilidad de los textos. Esto solo es posible mediante la aplicación de hojas de estilo, ya que resulta imposible instrumentar cambios en el código HTML.

Y si se desea agregar una ventaja más de las hojas de estilo en cascada, podemos decir que mediante su empleo se pueden establecer diferentes diseños según el medio en el que se visualizarán, modificando, entre otras cosas, las tipografías.

Legibilidad de los textos en la web, alineación y espacios

Para obtener una buena legibilidad de los textos, se deben tener en cuenta varios factores. La legibilidad afecta notoriamente el interés del usuario. Si se tienen dificultades para leer un texto, la atención bajará rápidamente, haciendo que el usuario pierda interés en el contenido.

Uno de los factores que afectan la legibilidad de un texto es la alineación. Los textos con alineación a la derecha, centrados o justificados, tienen utilidad en algunos tipos de textos muy especiales, pero para bloques de texto más o menos extensos, es mejor que se encuentren alineados a la izquierda. Esto se debe a que para el lector es más sencillo ubicar los principios de línea, lo que resulta mucho más difícil cuando el texto se encuentra alineado a la derecha, debido a la irregularidad de los comienzos de línea ubicados a la derecha. Por otra parte, los textos justificados necesitan modificar el espacio entre palabras para que tanto los comienzos como los finales se encuentren alineados, como dijimos un poco más arriba, esto que provoca una fuerte asimetría que perjudica la lectura y la presentación de la página. El código CSS para alinear el texto es el siguiente:

text-align: center; /* texto centrado */
text-align: left; /* texto alineado a la izquierda, por defecto */
text-align: right; /* texto alineado a la derecha */
text-align: justify; /* texto justificado */

Otro aspecto que mejora la legibilidad y la estética, es la utilización correcta de espacios en blanco. Establecer márgenes a los lados del texto sirve como método de establecer separación entre contenidos y proporciona alivio visual. La utilización correcta del interlineado favorece la lectura de los textos, ya que es mucho más sencillo ubicar la siguiente línea.

Para que el usuario no se canse de la lectura, es una buena medida establecer párrafos relativamente cortos y con espacios en blanco entre ellos, de forma tal que se produzca un descanso visual. Otro factor que provoca cansancio visual y dificultades para encontrar la siguiente línea, es establecer anchos de párrafo de mucha longitud, siendo preferible que el texto se extienda más en lo vertical con anchos de línea más reducidos.

Publicado el 24/03/2010, última actualización 05/10/2013.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Verónica Milán y Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

2 Cometarios

  1. Los textos en una página web

    […] párrafos no deben ser muy extensos, ya que los bloques de textos de muchas líneas, hace que muchos usuarios se pierdan al cambiar de línea, algo que resulta […]

    Viernes, 2 de abril 2010

  2. Manejo de fuentes con Adobe Dreamweaver

    […] tipografía es una parte esencial del diseño de páginas web, tanto desde el punto de vista estético como […]

    Lunes, 5 de abril 2010

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras