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

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 &rsquo 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


0 comentarios to "Tipografía: 8 tips detallados sobre el empleo y estilo de fuentes web"

Publicar un comentario en la entrada

Blog Archivo

Subscribete via E-Mail

Subscribete via RSS!

Ingresa tu email para:
Recibe actualizaciones del Blog.

Etiquetas

16-bit 2.0 2012 256 colores 2d 3 404 5 8 acelerar Acer Aspire ActionScript ADD-ONS addon adobe adobe air Adsense aerogarden agilidad airbender AJAX alarma alien all your base alta definición Android angulacion answers API APIs aplicacion aplicaciones Apple apps archive Argentina ask atajo atajos de teclado ataque audio avance avatar aventura grafica back background backtweets balsamiq mockups banda bang banners barcelona barra lateral bases de datos Batacazo bateria bbcode bear bebé Biblioteca Virtual big bing BitDefender BitTorrent blekko Blog blogger bloggers blogósfera Blogs bocetos bollywood bordes botánica brickify brush buenos aires buscador búsqueda avanzada cache caja calendario calidad cámara web canciones Canvas carrusel catástrofe ceguera de banners celular CEO charla chpimunk chrome chrome web store chromium chuck norris cine Cisco cita cliente ftp cloud cluster Cms cocina codec código coleccion color colorotate columna comercio commodore 64 compatibilidad Competencia compositio Comscore comunicacion Comunidad comunidad online Conferencia configuración consejos contenido content copia correo correo electrónico cotidiano cpanel Creatividad criminal cross-browser cse CSS CSS3 cubo cuenta cuentos cultivo Curiosidades curso photoshop Cursos daisies date Debian degradé dell desaparecer desarrollo web descarga Descargas descomprimir desfragmentar despertador despertar deviantart DHTML Digg diseñador Diseño Diseño Grafico Diseño Gráfico diseño web Disney dispositivo dispositivos moviles dispositivos táctiles div dominio dramatic dropbox duck go e-book e-commerce e-commerce day e-mail EBE ecología editor educación a distancia educativo Educativos Niños efecto efectos ejemplo emblema emprendimiento emulador emuladores encabezados encuesta enlace episodios error escritura España estadística Estados Unidos estilo estudio etica evento Eventos Excel exportar extensión extensiones extraterrestre Facebook facebook connect garage fc64 feeds Fiberparty film Filosofía Firebug firefinder Firefox firmware fixes Flash flex 4 Flickr fondo fondos font font dragr form formularios foto Fotografía Framework freelance fuente fuentes future FXG g1 gadget gadgets games gaming gazelle geek gestion gestor de contenido gestos gestuales gesture ghajini gm730 Gmail Google google analytics google app Google Calendar Google Chrome Google Docs gradient gradiente gradientes gráfico gran torino gratis groupon guerra guia h.264 habla hack Hackers handle handler hardware herramientas gráficas hitchcock hollywood homepage horizontal hover HP html HTML válido HTML5 HTTP hub huerta IBM icono IE illustrator imagen Imagenes imágenes importar impress inclinacion indio infecciones info-box infografías iniciador Inkscape inspiracion interactivo interfaz Internet Internet Explorer interno invasión investigación iPhone iphone os iPod island istick IT iTunes U jackson JavaScript jerarquía jetpack jQuery jQuery TOOLS jsc64 juego Juegos lanzamiento laptop lego lenguaje Lenovo Lg libre librería libro limpieza Links Linux literatura lógica logo logos logotipo lolcat Lotería love luca lucasarts luces luminoso luz Mac mac book pro mac os x MacBook macro mago Malware manejo mantenimiento manual mapa mapeo maquetación marciano Marketing mascara mascota McBook medicion medio ambiente meme memoria mente menú metafilter metropolis michael microsoft Mobile Learning mockup monkey moonwalker mootools moousture motivacional motor de busqueda motores de búsqueda mouse mouseprobe mov movil mozilla Mozilla Firefox Mozilla Labs mp3 MS Office mujer maravilla multimedia MultiTouch música MXML MySpace MySql N97 napkee navegación Navegador navegadores networking New York nightly nihilogic no ser encontrado nodos Nokia notebook noticias Novedades ochentoso oferta offers oficial online Open Source Open SUSE OpenOffice opera operativo oportunidad optimización orden organizacion orgullo os oscurecer oscuridad oso Outlook oz page speed PageRank pagespeed pageviews panaderia Panda paneles pantalla pantallas táctiles parasitos PDF peekfeed película pencil peoplebrowsr perfil pestaña photoshop photoshop clase 2 PHP php 5 Picasa picker pinceles pingie piratas pirates plagio plantación plantar plantilla plastic logic Plugin plugins pocket yoga podcasts port portal portátil posicionamiento powerpoint ppc prejuicio preparacion presentación Productividad Programación programas promocion protofish prototype proyecto prueba PSD Psicología public Publicidad puerto QEMU quickoffice quicktime quote rafael jimenez rank Recursos Red red social reddit Redes sociales reloj remake reproductor reseña resolución respaldo resultado retro robo rojo RSS rubik Ruby rust Safari Salud sans-serif sclipo script sculpting sdk seleccionador SEO serie serif SERP server servidor servidor web set shadow share sherlock shortcodes shuffle sidebar sidepost simple simpson Sin clasificar sistema sistema operativo sistemas operativos sitios web slideshow smart smooth SMS snow leopard social sociedad Software Software educativo software libre sombra sonido soundmanager2 spam spreadsheet SQL Squeeze startup steps left store streaming subdominio success suckerfish sun microsystems tablas table tabs tactil Taller de Fotografía Digital Taller de Photoshop taller photoshop Talleres Tarjetas de Crédito teaser tecnica Tecnologia teddy telefono television telltale template templates textbox the theme Themes theora thumbnails tienda time tipografía tipografias tips titulares to touchscreen tower defense trailer transform transition tres Troyano Troyanos truco Trucos tutorial photoshop tutoriales TV tweet tweetstats Twitter unplugged Usabilidad USB usuarios Utilidades para PC Utilidades para tu web variables vector vegetales velocidad venta Ventas verde verdura version video videojuego videojuegos videos Videos de Música Peruana viernes Viernes Unplugged VirtualBox Virus Visas VMware voucher w3c wallpaper wallpapers web Web 2.0 web participativa webcam WebKit webm webmaker Wi-Fi widescreen Wikipedia Windows Windows 7 Windows Mobile wiz wizard wolfram wonder woman Word Wordpress WorldBuilder wwdc 09 XHTML yahoo Youtube yui zip