Uno de los elementos más valorado de un diseño web es el sutil arte de la tipografía. Debido a la falta de un soporte sólido de fuentes en la web, cuando vemos un sitio con un buen empleo de recursos tipográficos, sentimos que estamos ante algo especial, algo cuidado.

Los detalles hacen a un buen diseño y un buen diseño es clave para la usabilidad. Si quieres mejorar el nivel de tu web lee estos 8 tips sobre el empleo de símbolos y tipografía.

1. Marcas de citación

Citas directas como esta “Oh día feliz, esto luce tan limpio como un cubículo“ se ven comunes. Ahora compárala con esta “Mira cómo estas marcas de citación no sólo son estilizadas sino que también guían tus ojos dentro y fuera de la cita.”

citas

Las marcas de citación directa fueron hechas para reducir el número de teclas en el teclado al ser ambidiestras (pueden ir en cualquier lado de la cita). En definitiva, los ingenieros se apoderaron de ellas y el estilo se perdió. Un escenario típico.

Además, te puedes librar de MS-DOS dullsville.

Esto es lo que debes hacer. En el lado izquierdo de una cita, tipea “ y en el lado derecho ”. Una vez que está en una página, luce de una forma similar a esta: “Mis medias por lo general tienen agujeros.”

2. Apóstrofes derechos

Este tip es similar al anterior. En lugar de ir a lo fácil y usar los apóstrofes de tu teclado, tómate la molestia de usar ’ para crear un apóstrofe con estilo: ’.

3. Una raya en lugar de dos guiones

Dos guiones consecutivos son desprolijos e interrumpen el flujo natural de tu mensaje. El lector –aunque sea por un sólo segundo– se atasca entre esos dos guiones intentando encontrar el sentido de que ellos estén cuerpo-a-cuerpo.

Para combatir este asalto a la cognición de tus lectores, intenta usar una raya Ene o Eme, como debe ser.

Una raya Ene (una raya que posee el ancho de una N mayúscula N: –) es utilizada para:

  • Rangos de valor (Selecciona un número 1-10)
  • Relaciones y conexiones (OSU venció a Michigan, 27-3)
  • Adjetivos compuestos (Citas estiladas están posteadas-MS-DOS)

La raya Ene se puede hacer en tu HTML así: –

Una raya Eme Dash (una raya que posee el ancho de una M mayúscula M: —) es utilizada para indicar un cambio temporario en el pensamiento, ya sea en el medio o al final de la oración. La puedes hacer en tu HTML así: —

4. Espacio de las letras, palabras y líneas de tu cabecera

Por defecto, hay demasiado espacio en blanco entre los caracteres, palabras y líneas si el tamaño de tu fuente es mayor que 16 en una cabecera pequeña. A medida que el tamaño de la fuente crece las letras y palabras parecen separadas, fragmentadas.

Unifica tu texto con letras más delgadas, espaciamiento de palabras y alturas de línea más cortas. La regla general es proveer sólo el espacio suficiente para que el lector lea el titular. Hacer esto además añade peso a tu titular porque le da buen contraste con el cuerpo.

5. Utiliza la unidad EM para darle tamaño a tu texto

¿Utilizas 16px, 12pt, 1em o %? Darle tamaño al texto de tu web no es algo simple. En la web tienes la oportunidad de ajustar la vista del ojo y las preferencias de lectura.

Antes que nada, si utilizas puntos (PT) probablemente vienes de un fondo impreso. Deja de utilizarlas en la web ya mismo. Si utilizas pixeles (PX) estás utilizando una medida relevante, pero los píxeles son una medida estática y por lo tanto, tus lectores no podrán ajustar el texto a sus medidas de preferencia.

Ems, por otro lado, son medidas relativas por lo que el tamaño se ajustará de acuerdo al zoom que haga el usuario.

6. Añade espacio extra entre las líneas

Más espacio entre tus líneas hará que el cuerpo de tu sitio esté menos aplastado y sea más digerible. Por ejemplo, se puede programar la altura de la línea a un tamaño del %150 del texto, utilizando la propiedad “line-height” del CSS.

7. Fuente serif para los titulares y sans-serif para el cuerpo

serif

Serifs son las pequeñas líneas que se ven en las letras de fuentes como la Times New Roman. Se encuentran ahí más que nada para guiar nuestros ojos a través de las letras y las palabras. Son fuentes que lucen sofisticadas, elegantes y poseen estilo. Las fuentes Sans-serif como Helvética o Arial no poseen estas líneas, por lo que se ven mucho más modernas y limpias.

A diferencia del texto impreso, donde las fuentes Serif se usan en el texto y las Sans-serif en los títulos, la web es exactamente al revés. ¿Por qué utilizar serifs en los títulos y sans-serifs en el cuerpo?

Debido a la baja resolución de lo monitores, las serif no tienen suficiente detalle en los tamaños de letra pequeños (menores a 16 px). Pero la fuente de los titulares mayor a 16px es lo suficientemente grande como para mostrar los acentos en detalle.

En los cuerpos pequeños, el texto sans-serif es más fácil de leer.

Por cierto, si además pones el título en negrita los acentos aparecerán todavía más marcados y distinguidos.

8. Usa una elipsis en lugar de tres puntos

Para realizar una interrupción de algún tipo en tu texto, el símbolo correcto que se debe utilizar es una elipsis, no los tres puntos. Para añadir una elipsis en tu HTML copia …, que lucirá así: …

Fuente: Brian Cray’s Blog

[[Sigue en: http://cursotallers.blogspot.com]]