Micaela 9 de abril de 2009 a las 10.11
   Imprimir artículo
elWebmaster.com

Tipografía: 8 tips detallados sobre el empleo y estilo de fuentes web


tipografiaUno 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 tipos 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. Comillas

Las comillas rectas, 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 comillas no s√≥lo son estilizadas sino que tambi√©n gu√≠an tus ojos dentro y fuera de la cita.‚ÄĚ

citasLas comillas rectas 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.

Para librarte de cualquier reminiscencia a MS-DOS, debes hacer esto: en el lado izquierdo de una cita, tipea “ y en el lado derecho ”. Una vez que est√° en una p√°gina, se ve as√≠: ‚ÄúMis medias por lo general tienen agujeros.‚ÄĚ

2. Apóstrofes rectos

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 &rsquo para crear un apóstrofe con estilo: ’. Ahora puedes escribir en inglés como se debe.

3. Usa la raya en lugar de dos signos “menos”

Dos signos “menos” 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 averiguar por qu√© est√°n pegados.

Para combatir este asalto a la cognici√≥n de tus lectores, intenta usar el “gui√≥n” y la “raya”, como debe ser.

El gui√≥n (una rayita del ancho de una N may√ļscula: ‚Äď) se usa para:

  • Al final de l√≠nea para la separaci√≥n de s√≠labas.
  • Para definir rangos num√©ricos (1‚Äď5)

El gui√≥n se forma en HTML con este c√≥digo: –

La raya (una raya que posee el ancho de una M may√ļscula: ‚ÄĒ) se utiliza para:

  • Indicar di√°logo (‚ÄĒ¬ŅDe donde eres? ‚ÄĒDe Castilla.)
  • A veces para substituir al par√©ntesis o a las comas en los incisos o frases explicativas (Los traductores ‚ÄĒaunque no todos‚ÄĒ a veces empeoran las cosas).

En HTML se escribe as√≠: —

4. Interletraje y espaciado

Por defecto, hay demasiado espacio en blanco entre los caracteres (interletraje), palabras (espaciado) y l√≠neas (interlineado) 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.

Los ems, por otro lado, son medidas relativas por lo que el tama√Īo se ajustar√° de acuerdo al zoom que haga el usuario.

6. Aumenta el interlineado

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. Usa letras romanas para títulos y de palo seco para el cuerpo

serifLos remates o serif son las peque√Īas l√≠neas que se ven en las letras de fuentes como la Times New Roman, que es una tipograf√≠a romana. 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 de palo seco o 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 romanas se usan en el texto y las de palo seco en los t√≠tulos, en la web es exactamente al rev√©s. ¬ŅPor qu√©?

Debido a la baja resoluci√≥n de lo monitores, las romanas 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 en palo seco 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 el símbolo de puntos suspensivos 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 de puntos suspensivos, no tres puntos individuales. Para a√Īadirlos a tu HTML copia … , que lucir√° as√≠: ‚Ķ

Fuente: Brian Cray’s Blog


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. Ezequiel Soler dice:

    Muy buen post, muy buenos los consejos, es bueno ver que hay gente que le agrega buen contenido a la web. ¬°Muchas gracias!

  2. Sergio Jorge M. (sermik) dice:

    Excelente art√≠culo, me ha trasmitido much√≠simo, ense√Īado el porqu√© de algunas reglas de la web para m√≠ desconocidas -vengo de la gr√°fica digital-, realmente gracias. Me agrada mucho tambi√©n el nivel de √©ste sitio, y espero seguir disfrut√°ndolo.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder