5 formas simples de mejorar la tipografía web
El tipo es uno de los elementos más utilizados de la web. Piénsalo. A menos que sea YouTube o Flickr, es probable que los visitantes de su sitio vengan por su contenido de texto, no por el elegante empaque que lo rodea. Entonces, ¿por qué los diseñadores web siguen tratando el texto como un elemento secundario?
La buena tipografía ordena la página y aumenta la legibilidad . Permite a las personas procesar la información más rápido.
Un sitio más escaneable y legible significa visitantes felices. Los visitantes felices vuelven con frecuencia, compran productos, dejan comentarios y comparten el sitio con amigos. ¿Ves por qué podría valer la pena pensar?
Podría hablar por siempre sobre qué tan lejos ha llegado la tipografía en la web, y hasta dónde tiene que llegar. Con frecuencia he rebotado entre la web y el diseño de impresión. Cuando va de InDesign a TextMate, las limitaciones del tipo de web son claras como el cristal .
Pero se ha dicho mucho sobre lo que el tipo de web no puede hacer. Esto no va a ser otra diatriba. En cambio, centrémonos en 5 soluciones fáciles para los defectos tipográficos que abundan en la Web.
1. Use una hoja de estilo de reinicio
Estúpido, pero cierto: dos navegadores no usan los mismos valores predeterminados de presentación. Las diferencias en el relleno, los márgenes, los títulos y las hendiduras son desenfrenadas. Si desea que el diseño de su página sea más uniforme en todos los navegadores, vale la pena comenzar con una hoja de estilos de restauración de CSS.
Dos que recomiendo:
Hoja de estilo de reseteo CSS de Yahoo
Hoja de estilo de restauración de CSS de Eric Meyer
2. Mire su medida
La medida se refiere a la longitud de una sola línea de tipo. Una línea más larga = una medida más larga. Los estudios han demostrado que, para una legibilidad óptima, la ejecución de columnas de texto como la copia principal del cuerpo debe tener entre 45 y 75 caracteres (30 a 50 ems), incluidos los espacios . Esta es una de las razones por las que los diseños fluidos (en los que las columnas se expanden y contraen para ajustarse al ancho del navegador) son más difíciles para los ojos.
Además, su ventaja debería aumentar con la longitud de su Medida . Líder es la cantidad de espacio en blanco entre líneas de texto, y se controla a través de la propiedad de altura de línea de CSS. Si necesita usar una Medida extralarga, asegúrese de que se abra su guía.
Del mismo modo, si tiene una columna pequeña, como una barra lateral con una Medida corta, su guía debe ser más estricta. Encuentro que el valor predeterminado que la mayoría de los navegadores asignan es un poco demasiado ajustado. Una altura de línea de alrededor de 1.4em funciona bien para la mayoría del contenido corporal.
3. Tienden al espacio intermedio
No se trata solo de su texto, sino del espacio que lo rodea. Muy poco espacio hace que el texto sea difícil de leer, pero también lo es demasiado. La clave es encontrar un equilibrio simple que guíe el ojo de un elemento al siguiente.
Uno de los errores más comunes que cometen los nuevos diseñadores es llenar cada centímetro de espacio. El espacio en blanco se refiere al espacio vacío o "negativo" alrededor de su contenido, y es crucial. Eche un vistazo a una revista bien diseñada como Dwell or Good y verá que aunque le cueste dinero al editor imprimir cada página, dejan abundantes espacios en blanco alrededor del texto. La página estará en equilibrio y su vista se moverá de un espacio a otro de forma efectiva.
Además de ajustar la altura de su línea (como se menciona en el n. ° 1), intente aumentar el margen y los márgenes . A menos que esté tratando de obtener un truco visual loco, siempre debe haber una buena cantidad de espacio en blanco alrededor de su texto. No dejes que choque contra otros elementos, especialmente las imágenes. Deje que sus fragmentos de contenido (encabezados, párrafos, barras laterales, etc.) respiren.
Mark Boulton escribió un artículo muy informativo sobre Espacio en blanco para A List Apart, compruébalo.
4. No te vayas loco
Una buena regla general para cualquier diseñador es: no use más de dos fuentes caras en tu diseño. Dos caras de fuentes pueden verse muy elegantes. Una lista aparte usa variaciones de Georgia y Verdana para crear un aspecto elegante y pulido. Pero continuar agregando caras de fuente a su interfaz crea una confusión innecesaria. Del mismo modo, evite usar demasiados tamaños de fuente, colores o tratamientos en una página o en un párrafo, o competirán entre sí en lugar de agregar énfasis según lo previsto.
A pesar de que pilas de fuentes y tecnologías como sIFR y Typeface.js le permite especificar casi cualquier fuente que desee como valor predeterminado, resista la tentación de volverse loco con la copia del cuerpo. Fuentes decorativas se conservan mejor en los titulares porque afectan la legibilidad. Piénselo: ¿cuándo fue la última vez que cogió una novela de bolsillo ambientada por completo en Comic Sans?
Al crear pilas de fuentes, preste atención al tamaño de sus emparejamientos. Algunas fuentes que se ven similares se procesan en tamaños muy diferentes. Verdana y Arial son un gran ejemplo de esto. Typetester es una gran herramienta para comparar fuentes web centrales y crear una pila exitosa. Otra herramienta útil llamada Generador de pila de fuentes le muestra qué porcentaje de usuarios verá cada variación.
Independientemente de las fuentes que decida usar, asegúrese de que no sean muy pequeñas. Sé que es difícil ... el texto pequeño se ve bien. ¡Pero piensa en los pobres, entrecerrando a los usuarios! Mantenga el texto del cuerpo por encima de 10 o 12 píxeles. Si insiste en pequeñito, al menos use el tamaño relativo para todos aquellos usuarios de IE 6.0 que de otro modo no podrían hacerlo más grande. Leer Artículo de Wilson Miner en tamaños de fuente para una gran toma en el debate.
5) No descuides los detalles
El cliente proporcionó el contenido. Agregarlo al sitio es solo una cuestión de copiar y pegar, ¿verdad? Mal, mal, mal. Esta es una trampa en la que los diseñadores web caen con demasiada frecuencia.
Incluso aquellos de nosotros que agregamos diligentemente etiquetas de encabezado, formateamos cada párrafo y organizamos listas con viñetas con cuidado, olvidamos algunos detalles tipográficos importantes. Muchos (incluyéndome a mí) se perdieron el entrenamiento de tipografía formal, por lo que no nos puede culpar del todo. Pero el diablo está en los detalles. Es hora de que adoptemos estos conceptos básicos:
Usa citas inteligentes
¿Cuál es la diferencia entre citas inteligentes y citas tontas? Las comillas inteligentes (también conocidas como libro o rizado ) son curvas y tienen un estilo de apertura y cierre. Las citas estúpidas ( rectas ) suelen ser hacia arriba y hacia abajo. Un apóstrofo es tipográficamente solo una cita, por lo que se aplica el mismo problema. Una cita tonta (también llamada prima ) solo debe usarse entre mediciones. Por ejemplo, 6'4 "usa comillas dobles dobles e individuales.
Lamentablemente, nuestros teclados tienen valores predeterminados para las comillas principales. Microsoft Word y otros editores de texto simplemente los corrigen mientras escribimos. Agregar presupuestos inteligentes a páginas HTML requiere más trabajo del desarrollador web porque necesita usar marcas para producir símbolos de apertura y cierre de cotización. Veo el mismo problema con em y en-guiones, puntos suspensivos, marcas registradas y símbolos de derechos de autor. Los codificadores toman el camino más fácil reemplazándolos con guiones, períodos múltiples, una TM grande y la infame (C). Usar los símbolos correctos hace una diferencia visual. Hazlo bien y haz que los editores sonrían por doquier.
Cómo hacer citas inteligentes:
#8216; = apertura de comillas simples
’ = cierre de comillas simples
“ = apertura de comillas dobles
” = cierre de comillas dobles
Lo sé, nadie quiere pasar todo el día buscando cotizaciones. Afortunadamente, herramientas como SmartyPants y Textismo puede hacer gran parte del trabajo por usted formateando automáticamente el texto que incluye citas inteligentes y similares.
Leer "El problema con EM y EN" de A List Apart para obtener más detalles sobre el tema y la codificación de caracteres UTF-8 para los caracteres especiales más comunes.
Una advertencia: muchos editores de texto de CMS (como el que usa este sitio) no le permitirán implementar presupuestos inteligentes sin complementos adicionales. Triste pero cierto.
Deja de poner dos espacios después de un período. ¡Por favor! No es necesario y en realidad es bastante molesto.
En sus enlaces, use border-bottom: 1px sólido en lugar de texto-decoración: subrayado . Los subrayados se pueden ejecutar a través de los caracteres descendentes (g, j, p, q, y), lo que dificulta su lectura, especialmente cuando se utilizan tamaños de letra más pequeños.
Y si bien no tiene nada que ver con la tipografía, ejecutar un rápido chequeo de ortografía nunca mató a nadie . Incluso si todo lo que hizo fue copiar y pegar, un error de ortografía que se desliza a través de un sitio en vivo refleja mal a todos los involucrados.
Preste atención a esas 5 soluciones y los diseños de su sitio seguramente mejorarán. Recuerde que estos son solo un punto de partida. La buena tipografía es una habilidad aprendida como cualquier otra cosa, y requiere estudio y práctica . Siempre esté atento a los sitios que lo están haciendo bien y tome nota de lo que están haciendo. ¿Necesitas inspiración? Echa un vistazo a los siguientes sitios para ver ejemplos de tipografía web excelente y publica ejemplos que te inspiren.
Tipo de inspiración:
- Sustracción
- Una lista aparte
- Arquitectos de información
- Jon Tangerine
- Diseñando las noticias
- Andy Rutledge
Escrito exclusivamente para WDD por Mindy Wagner.
¿Qué piensas de estas formas simples de mejorar tu tipografía? ¿Los implementa en sus sitios web? ¡Nos gustaría saber de usted!