Así que amas la tipografía, ¿quién no en estos días? La pregunta es, ¿cuán descuidado está usted cuando se trata de implementar el tipo en sus diseños?
Hoy presentamos algunos consejos de tipografía excelentes y sencillos que todos los que trabajan con type deberían saber. Ya sea que sea un experto o un principiante, siga leyendo para ver si es culpable de alguno de estos escollos.
No: Deje que Photoshop Kern su texto
Este principio es la tipografía 101. Photoshop es una gran herramienta, pero este y todos los demás programas con una herramienta de tipo no son comparables con esos oscuros ámbitos implantados en la parte frontal de la cara (los ojos).
El software utiliza un algoritmo para encontrar la mejor suposición? para saber cómo debe ser kernada una sección de tipografía. En algunas aplicaciones, puede seleccionar entre un par de versiones diferentes de esto. Por ejemplo, Photoshop e Illustrator le permiten elegir entre una? Métricas? y una? óptica? modo.
Esta es una buena opción con la que deberías experimentar con frecuencia para varios bloques de texto. No he encontrado que una de las opciones funcione mejor en el 100% de los casos, realmente depende de las letras y el tipo de letra utilizado.
Otra cosa a tener en cuenta es que los diferentes tipos de letra requerirán diferentes necesidades de kerning. Para probar el kerning en una fuente, a menudo escribo la palabra en mayúscula? LAVA? para que pueda tener una idea de algunas de las áreas problemáticas típicas.
Hacer: Kern Manualmente
Los múltiples modos automáticos de kerning son agradables, pero para un texto realmente importante, siempre es mejor simplemente mirarlo.
Tenga en cuenta que dije, "texto realmente importante". Si está trabajando con párrafos grandes, vale la pena realizar ajustes en todo el área de texto que los pares de kerning individuales. Claro, puedes entrar y kern cada palabra manualmente, pero sería un ejercicio inane. Sin embargo, si está creando un logotipo, vale la pena el tiempo adicional para asegurarse de que cada letra esté colocada a la perfección.
No: utilizar el subrayado predeterminado
Algunas veces mencioné en Design Shack que, aunque estoy a favor del uso de líneas para agregar cierto interés visual a un diseño, definitivamente no soy un fanático de la función de subrayado predeterminada en la mayoría de las aplicaciones.
El texto del ejemplo anterior se creó utilizando el comando de subrayado de texto de Photoshop. Como puede ver, es terriblemente incómodo, especialmente cuando se combina con descendientes.
Hacer: ser creativo con subrayados
Al igual que el kerning, los subrayados a menudo son mejores cuando se manejan manualmente. Cuando dibuja un trazo, tiene un control de personalización completo. Puede cambiar el peso del trazo, crear un trazo doble, extender el subrayado más allá de la palabra o incluso transformar la línea en formas interesantes.
Un truco que uso a menudo con subrayados es crear una pequeña muesca para los descendientes, como se ve en el segundo ejemplo anterior. De ninguna manera es una regla que los subrayados no pueden cruzar descendientes, simplemente prefiero cómo se ve cuando se evita la reunión de los dos.
No: use fuentes ornamentadas para Body Copy
Este es un error clásico que nuevos diseñadores y no diseñadores cometen constantemente. Las fuentes son una forma fácil de inyectar diversión y personalidad en un diseño, por lo que la tentación de utilizar tipos de letra interesantes es casi insoportable.
El problema es que muchas personas no saben cómo implementar correctamente una fuente de aspecto único. Tomemos como ejemplo lo siguiente.
Aquí utilicé la popular fuente Lobster de una manera que he visto en sitios web reales. El problema debería ser obvio, el párrafo puede parecer sofisticado pero te lleva una eternidad leerlo.
Además, hay una falta de contraste entre el titular y la copia del cuerpo. Claro, son de diferentes tamaños pero teniendo en cuenta la audacia es igual de importante.
Hacer: Usar Fuentes de Fuentes para Titulares
En el siguiente ejemplo, he solucionado el problema. Todavía podemos usar nuestra fuente loca, pero en lugar de abrumar al lector con ella, somos más selectivos.
Note que nuestros dos elementos de texto están contrastando muy bien ahora. El titular es grande, el párrafo es pequeño. El titular está en negrita, el párrafo es delgado. El titular es elegante, el párrafo es sencillo. Las diferencias siguen y siguen.
La clave aquí es que los elementos de diseño atractivo se aprecian en pequeñas dosis. Use una fuente creativa en un titular y creo que es un diseñador decente, úselo en todas partes y creo que no tiene idea de lo que está haciendo.
No: usar Cufon para el reemplazo de texto
Este es un debate sobre el que he escrito antes y, a pesar del rechazo, mantengo firmemente mi posición. Solía pensar que Cufon era una gran solución, pero las prácticas modernas se han movido realmente hacia CSS.
Cufon tiene algunas grandes desventajas. Para empezar, es un script de reemplazo de texto basado en JavaScript. Por supuesto, soy un gran fan de JavaScript para casi todo, pero no estoy seguro de que sea necesario aquí cuando CSS tiene una solución sólida (aunque uso Google Web Fonts, tal vez sea un hipócrita).
Más importante aún, como usuario siempre me doy cuenta de Cufon porque no puedo seleccionar / copiar / pegar el texto correctamente. Es molesto ver el texto en vivo y casi tener la capacidad de interactuar con él, pero ser detenido por selecciones de buggy.
Hacer: usar @ font-face
La solución CSS es, por supuesto, @ font-face. Es simple, se carga rápido, es fácil de usar y funciona en navegadores modernos.
Hay algunas cosas que se deben tener en cuenta al trabajar con @ font-face. En primer lugar, ¿el mejor? La sintaxis ha cambiado algunas veces. El favorito de los desarrolladores web favoritos actualmente es la nueva sintaxis Bulletproof @ Font-Face de Fontspring.
Además, aunque @ font-face es la tecnología preferida para Google Web Fonts, Typekit y otros, no todos lo favorecen por encima de Cufon. Algunos apuntan a problemas de representación de fuentes, especialmente en computadoras basadas en Windows, como una razón para evitar @ font-face. Para explorar este lado del argumento, echa un vistazo a Cufon vs.Font-face: una comparación visual.
No: Use Faux Small Caps
Usar mayúsculas pequeñas puede ser una forma divertida de agregar una pequeña variación a su título de mayúsculas. Básicamente, estás usando todas las letras mayúsculas pero manteniendo el tamaño de la letra similar a si estuvieras usando el caso del título (la primera letra es más grande).
La parte difícil de lograr esto es que tu primer instinto de cómo hacerlo es incorrecto. Considere el siguiente ejemplo:
Aquí escribí un texto en mayúsculas y luego simplemente agrandé la primera letra de cada palabra. El resultado son fuentes de tamaño realmente diferente, lo que es bastante feo para el observador astuto. Observe cómo el grosor de línea entre los dos tipos de letras diferentes es considerablemente diferente.
Hacer: utilizar una fuente con mayúsculas pequeñas
La solución más obvia para este problema es usar una fuente que realmente se construyó con mayúsculas. Trajan es el caso típico de uso excesivo, pero hay muchos otros como Goudy Small Caps y Old Style Figures. Fuentes como estas están diseñadas para mantener una apariencia uniforme a pesar de los diferentes tamaños de letras.
Si necesita un intermediario, Photoshop e Illustrator tienen un "minúsculo". Opción incorporada en la paleta de caracteres. Esto se muestra en el 'Better Small Caps'? ejemplo anterior Observe cómo las letras son mucho más consistentes que en el primer ejemplo donde intenté lo mismo manualmente.
Con algunas fuentes de estilo antiguo, la función de mayúsculas pequeñas puede funcionar bastante decentemente. Sin embargo, los resultados pueden ser tan malos o peores que los esfuerzos manuales en otras fuentes. Por ejemplo, esto es lo que sucede cuando intenta utilizar la función en Helvetica.
Como puede ver, volvemos a una notable falta de consistencia en el ancho del trazo. Mi mejor consejo es tratar siempre de usar mayúsculas junto con una fuente que tenga incorporada. Si esta no es una opción, intente usar la función de software para mayúsculas y pruebe el resultado para ver si es aceptable.
¡Vuelve para la segunda parte!
Gracias por leer nuestras 5 Tipografías Qué hacer y qué no hacer que todos deben saber. ¡La sorpresa es que tenemos cinco más por venir! Vuelve más tarde esta semana para ver la conclusión que contiene algunos errores más clásicos y cómo evitarlos.
Mientras tanto, deje un comentario y háganos saber qué tipo de mascota es su tipografía y qué errores es culpable de cometer.