La tipografía es un principio fundamental del buen diseño. Ya sea que esté diseñando para impresión o para la web, una buena tipografía ayuda a equilibrar la estructura visual de su diseño entre el contenido y las imágenes. Aplica estos ocho elementos de tipografía para asegurarte de que tu espectador pueda navegar a través de tu contenido de la manera que deseas.
Un buen contraste de color puede parecer un concepto elemental, pero hay algunas cosas que se pasan por alto fácilmente y que se deben tener en cuenta al seleccionar los colores para la tipografía y el diseño general.
Uno de los errores más comunes (y el más fácil de corregir) es poner texto negro sobre un fondo blanco: ¡es demasiado contraste! Si observa la mayoría de los sitios web bien diseñados, notará que el texto negro sobre el fondo blanco no es realmente negro, sino gris. Esta técnica elimina el contraste y facilita la lectura del espectador.
El contraste no se consigue simplemente encontrando dos colores muy diferentes. El hecho de que dos colores sean diferentes no significa que proporcionarán un buen contraste si su valor es el mismo.
Una prueba simple para ver si su diseño tiene suficiente contraste es convertirlo a escala de grises. Esto te permitirá ver fácilmente el valor de los colores, que en el caso del contraste es mucho más importante que el color.
En la imagen a continuación, aunque los colores son muy diferentes, una vez que se convierten a escala de grises, puede ver que sus valores son tan cercanos que las palabras se vuelven casi imposibles de leer. Esto te dice que estos colores no son un buen par.
Un profesor que tuve en la universidad me dijo que el truco era entrecerrar los ojos y si ya no podías diferenciar los colores, no tenías suficiente contraste.
Si diseñas en una computadora como la mayoría de nosotros, es un poco más técnico, pero igual de fácil. En Photoshop, después de acoplar su trabajo, seleccione: Imagen>Ajustes>Desaturar. En Illustrator, puede hacer esto seleccionando su diseño, luego seleccione: Editar>Editar colores>Convertir a escala de grises.
Si desea verificar el contraste en un sitio web terminado, use checkmycolors.com. Al igual que con cualquier herramienta, esta herramienta es tan buena como los datos que puede leer, así que no se sorprenda si dice que su sitio tiene algunas fallas.
El diseño de impresión y el diseño web difieren aquí, principalmente debido a sus respectivos medios.
En el diseño de impresión, generalmente se acepta una fuente de 10 puntos para el cuerpo del texto, pero en la web tratamos con píxeles. El equivalente a 10pt es 13px y este es un buen tamaño para el cuerpo del texto en la web. Cualquier cosa más pequeña que estos tamaños será demasiado pequeña para que la lea el espectador promedio.
Por supuesto, ten en cuenta a tu audiencia. Si está diseñando un sitio web o un folleto para una audiencia más madura, haga que su letra sea más grande: su espectador se alegrará de haberlo hecho.
El interlineado es el espacio entre líneas de texto, a lo que los diseñadores web se refieren como altura de línea. La palabra interlineado se originó cuando el tipo se colocaba a mano en las imprentas. Se colocaron tiras de plomo entre líneas de letra para agregar espacio.
Sin espacio entre líneas de letra, se vuelve difícil para el espectador leer y seguir de una línea a la siguiente. Agregar demasiado espacio hace que la lectura de grandes secciones de texto sea tediosa.
En el diseño de impresión, el interlineado estándar es el 120 % del tamaño en puntos de la fuente (tipo de 10 puntos/interlineado de 12 puntos, tipo de 12 puntos/interlineado de 14,4 puntos). En el diseño web, una buena altura de línea también es de alrededor del 120 %. Tanto en el diseño impreso como en el web, este porcentaje puede variar ligeramente según el tipo de letra utilizado según las alturas x, los ascendentes y descendentes de cada forma de letra.
Muchas veces, un interlineado muy apretado o muy abierto puede producir hermosos tratamientos tipográficos, pero debe reservarse para pequeñas cantidades de texto, no para grandes bloques de texto. Este ejemplo de neotokio.it demuestra cómo el interlineado apretado puede crear un excelente tratamiento tipográfico para un encabezado.
Kerning es el proceso de ajustar el espacio entre caracteres individuales.
El objetivo del interletraje es lograr una tipografía más equilibrada, igualando la apariencia de los espacios en blanco entre los caracteres. Esto es especialmente importante en encabezados y tipos grandes. Si bien no es tan importante en los párrafos de letra pequeña, el interletraje puede ser bastante funcional cuando intenta evitar los saltos de línea en su diseño.
Para probar o practicar sus habilidades de interletraje, Echa un vistazo a esta página web:
Hasta hace poco, el interletraje se reservaba principalmente para los diseñadores de impresión debido a la dificultad del interletraje para la web. Ahora hay algunas formas más fáciles de interletraje para la web. Una gran herramienta es kern.js.
Los diseñadores web a menudo establecen una jerarquía tipográfica utilizando las etiquetas
Esto podría lograrse mediante el uso de un tipo de letra diferente, un color contrastante, un espacio en blanco o un tamaño.
Lograr una buena jerarquía generalmente debe comenzar con un boceto en el que diseñe cuál es su elemento visual más importante hasta el elemento menos importante.
El elemento más importante no tiene que ser más grande, solo necesita tener más protagonismo sobre los demás elementos. Pregúntate qué quieres que el espectador lea primero. Esto no tiene que ser lo primero en su diseño, solo debe ser el punto focal.
En este ejemplo, la página de inicio de estoesdare.com, ¿cuál es el punto focal? “ATRÉVETE” ¿verdad? En este caso, el punto focal se logra con el tamaño y el color, pero ¿hacia dónde va ahora tu mirada? Yo diría que va hasta el fondo para averiguar qué es DARE. La jerarquía aquí se logra por el color y el contraste a pesar de su orden en la composición.
¿Qué pasaría si el texto sobre nosotros fuera negro en lugar de naranja? El color no se usa solo por su calidad estética o para que coincida con la palabra DARE, se usa intencionalmente para crear una jerarquía y dirigir la mirada del espectador hacia donde debería ir a continuación.
El espacio en blanco, o espacio negativo, es el espacio entre los elementos de una composición.
Si su tipografía y otros elementos de diseño son densos y demasiado juntos, su contenido será difícil de leer. Aquí es donde entran los espacios en blanco.
Escucho a muchos de mis clientes decirme que llene esos espacios vacíos o que no desperdicie el espacio, pero el espacio en blanco es un componente muy intencional del buen diseño. En 1930, Jan Tschichold escribió:
“El espacio en blanco debe considerarse un elemento activo, no un fondo pasivo”.
Los espacios en blanco se pueden usar para crear equilibrio o guiar la vista de los espectadores de una parte de la composición a la siguiente. Puede invocar un sentimiento de elegancia o agregar un nivel de comunicación a un tratamiento tipográfico.
El logotipo de FedEx utiliza el espacio en blanco entre la E mayúscula y la x para crear una contraforma: una flecha. Esto agrega un nivel secundario de comunicación a la palabra.
de Milton Glaser sitio web de nuevo diseño emplea espacios en blanco para agregar una sensación de simplicidad y elegancia, así como para crear formas positivas y negativas que guían la vista por el contenido.
Los diseñadores de impresión siempre han debatido qué fuente es más fácil de leer: serif o sans serif.
La verdad es que no hay evidencia que respalde que uno sea más legible que el otro impreso. Algunos dicen que las fuentes sans serif deben reservarse para títulos y encabezados y las fuentes serif deben usarse para el cuerpo del texto, mientras que muchos otros dicen exactamente lo contrario.
Sin embargo, cuando se trata de diseño web o cualquier tipo de diseño en pantalla, generalmente se acepta que las fuentes sans serif son más fáciles de leer en la pantalla. Deben usarse para la mayoría del texto en pantalla, mientras que las fuentes serif deben usarse principalmente para pequeñas secciones de texto, como títulos y encabezados.
Typetester.org es una gran herramienta para comparar los tipos de letra que está considerando para su sitio web.
En el pasado reciente, la tipografía en la web se limitaba a las fuentes del sistema o seguras para la web.
Si diseñara un sitio web con el tipo de letra Akzidenz-Grotesk, casi nadie lo tendría instalado en su computadora y, como resultado, sus visitantes verían su texto en Helvetica o, más probablemente, Arial, cualquiera que sea el tipo de letra que hayan instalado en su sistema. . En un vano intento de compensar a todos en todos los sistemas (incluso a los usuarios de Linux), crearíamos fuentes alternativas además de fuentes alternativas, una especie de ruleta rusa para tipos de letra.
Hoy en día, la tipografía en la web está evolucionando. Hay varias tecnologías que permiten a los usuarios finales experimentar las fuentes que pretendía que vieran. Algunos usan fuente de reemplazo, WOFF, javascript o fuentes alojadas. La lista de tecnologías puede ser abrumadora, pero todo se reduce a esto: puede usar fuentes que no sean del sistema y confiar en que sus usuarios las verán. Por lo general, todo lo que necesita hacer es agregar un enlace en su
y estará listo para codificar con confianza. Ya no necesita fuentes alternativas en un mundo habilitado para fuentes web.Puede comprar fuentes profesionales con licencias web de muchos distribuidores de fuentes en línea, incluidos myfonts.com, fontspring.com, typekit.com y typotheque.com. La mayoría de los sitios tienen opciones de licencia que permiten el uso impreso y web, y todos permiten algún tipo de período de prueba gratuito. Si acaba de empezar o no quiere comprometerse financieramente con una fuente, puede dar Fuentes web de Google una prueba – es gratis. Tienen algunas fuentes decentes e instrucciones de instalación sencillas. Si desea ver su sitio (o cualquier otro) con un lavado de cara de fuente, pruebe el intercambiador de fuentes de webtype.com.
Para ver un gran ejemplo de fuentes web en acción, consulte adamstoddard.com.
Para averiguar qué fuente se está utilizando en una página web, utilice el WhatFont bookmarklet/extensión. WhatFont es fácil de usar: con solo un clic, le dice qué fuentes se usan en una página web junto con qué tamaño, color y altura de línea se usan.
Comprender estos elementos tipográficos básicos y aplicarlos hábilmente a sus diseños impresos o web mejorará la legibilidad para su espectador y la calidad de su diseño. Tenga en cuenta que el diseño es un proceso creativo y trate estas pautas como una base para sus diseños, no como un conjunto de reglas a seguir.
