Spanish (Español) translation by Elena Pari (you can also view the original English article)
La tipografía es un campo enorme. La gente le dedica años de sus vidas a este antiguo arte, y aun así, siempre hay algo nuevo que aprender. En este artículo revisaré los puntos más importantes que se deben considerar al seleccionar el tipo de fuente para un sitio web.
Cada tantas semanas volvemos sobre algunos de los artículos favoritos de nuestros lectores a lo largo de la historia del sitio. Este tutorial fue publicado por primera vez en octubre de 2010.
Tipografía práctica
Al diseñar para la web, hay que aceptar que el contenido va a cambiar. Es simplemente imposible tomarse el tiempo para ajustar el espacio entre dos letras (kerning) de cada título en un sitio web grande. En otras palabras, se renuncia a cierto control.
Hoy me voy a concentrar en la tipografía práctica. Para mí, esto significa aceptar que nunca tendremos un control total sobre el texto en los sitios web. Elegir un tipo de letra, decidir el tamaño... como diseñadores tenemos voz y voto en todas esas cosas. Tipografía práctica significa aprender cómo —y aún más importante, por qué— adaptarse a lo que sí se puede controlar. Comencemos.
Facilidad de lectura
¿Qué se hace con el texto? ¡Leerlo! Entonces, ¿por qué tantos sitios web hacen tan terriblemente difícil hacer justo eso? Sea que la letra es muy pequeña, la altura de línea muy ajustada o simplemente fuentes feas, ¡parece que un montón de sitios por ahí están decididos a no dejarnos disfrutar de sus contenidos!
Si haces que el texto sea fácil de leer, inmediatamente te colocas por delante de al menos la mitad de la competencia, lo cual es realmente afortunado, ¡porque no es tan difícil!
Tipos de fuente
Al momento de decidir qué tipo de letra usar en tu sitio web, es importante recordar esto: no lo pienses demasiado. Sé que muchos diseñadores odian usar Helvetica, porque todo el mundo la usa. Estoy de acuerdo con esto, pero hay un dato importante que esta declaración no toma en cuenta: por qué. La gente usa y abusa de Helvetica simplemente porque es buenísima. Encaja a la perfección en prácticamente cualquier diseño que te imagines, funciona bien tanto cuando la letra es pequeña como cuando es grande.
Si bien puede ir contra de tus creencias poner tu texto en un tipo de letra tan popular, si funciona, entonces hazlo.
Podría decirse que el cuerpo del texto es la parte del diseño que necesita ser la más legible, así que asegúrate de elegir una fuente que funcione bien cuando está en tamaño pequeño. ¿Qué es lo que quiero decir con esto? Si puedes poner tu texto en un tamaño de 10px y todavía puedes descifrar lo que dice, es un buen indicio de que has elegido una letra legible.
Eso es todo en cuanto al cuerpo del texto, pero, ¿y los títulos?
La facilidad de lectura en los títulos grandes es mucho más fácil de determinar que en un texto corrido. Si puedes leer lo que dice inmediatamente, entonces es lo suficientemente legible.
Lo bueno de los tipos de fuente es que una vez que has trabajado en bastantes proyectos, tendrás una buena idea de qué funciona y qué no. A partir de ahí, estarás en una mejor posición para tomar decisiones críticas respecto a las fuentes.
No hay una fórmula para elegir las fuentes correctas para tu sitio web. Mayormente, la mejor manera de decidir es nada más probar con cada fuente que crees que podría funcionar y luego comparar. En realidad, la elección de las fuentes se hace por instinto, pero es importante recordar que el 90% del tiempo, el usuario no va a pensar en qué fuente se está usando, así que si es legible, entonces a menudo es suficiente.
Combinación
Rara vez (o nunca) se da una situación en la que solo un tipo de letra es apropiado para un sitio. El sitio web promedio tiene una gran cantidad de texto. ¡No hay manera de que un único tipo de fuente funcione para todo! La gran mayoría de sitios web bien diseñados utiliza dos tipos: uno para texto corrido y otro para los títulos.
Al elegir un par de fuentes, lo más importante que debes considerar es cómo funcionan juntos. ¿Son lo suficientemente similares? ¿Son demasiado similares? ¿No son lo suficientemente diferentes? Te debes hacer todas estas preguntas. Considero que la mejor manera de elegir una combinación de fuentes que funcione es simplemente poner muchas de ellas lado a lado y escoger la mejor. No hay manera de saber cuál es la mejor hasta que las hayas probado todas.
A veces, lo más apropiado sería dos fuentes sans serif, pero otras veces, querrás sans serif para los encabezados y serif para el cuerpo del texto. No es particularmente importante si se ven similares, lo que importa es si actúan similar. Por supuesto, esto depende del resto de tu diseño. Cualquiera que sea la fuente que elijas, esta tiene que transmitir su mensaje con fuerza, y si eso significa tener tipos de letras que contrasten, ¡adelante!
Simon Collison utiliza una excelente combinación de fuentes en su sitio: una sans serif fuerte para los títulos principales y una serif simple tanto para los encabezados más pequeños como para el cuerpo del texto. Esta asociación presenta hábilmente el mensaje que el sitio web está tratando de transmitir, y lo hace de una manera que cada letra por separado no podría expresar.
Tamaño
Como regla general, a los diseñadores les gusta darle al texto un tamaño de al menos 12px. Sin embargo, la mayoría elige un tamaño mayor, como 14px, que es incluso mejor para facilitar la lectura. En realidad es bastante fácil decidir el tamaño de la fuente para textos corridos, pero la cosa se complica con los títulos.
¿Qué tan grandes deben ser los títulos? Depende. En mi observación y creación de sitios web, he llegado a la conclusión de que un título debe ser solo tan grande como debe ser. Esto quiere decir que debes probar diferentes tamaños hasta que encuentres el que es lo suficientemente grande para llamar la atención, pero no más grande que eso; a menos que estés apuntando a un texto enorme, en cuyo caso continúa leyendo.
Jerarquía
El título es grande por naturaleza. Es un elemento importante en la página, así que naturalmente debe ser más grande, ¿no? Sí y no. Sí, los títulos son generalmente más grandes que otros elementos, pero no, no es la única manera de llamar la atención sobre ellos. El color, el peso y la ubicación son igualmente importantes para establecer una jerarquía visual clara en tus páginas.
El punto clave que hay que recordar sobre la jerarquía visual es que todo es relativo. El texto en tu sitio web sólo tiene que destacar en comparación a los otros textos de tu sitio. Tomemos como ejemplo la página de Wilson Miner. Sus títulos son bastante pequeños para lo importantes que son y sorprendentemente son casi del mismo tamaño. Sin embargo, su uso del color distingue el título más importante y les da a los títulos más relevancia.
El uso de las fuentes es una herramienta muy importante para establecer una jerarquía visual, ya sea según el tamaño, el color, el peso o incluso la ubicación.
Interlineado
El interlineado, o el espacio entre las líneas de un texto, es una herramienta invaluable para que un texto sea fácil de leer. Un mal interlineado puede arruinar un texto que de lo contrario sería excelente, al igual que un buen interlineado puede hacer que hasta el peor texto parezca legible. Afortunadamente, no es complicado de implementar.
Con la propiedad de line-height (altura de línea) en CSS puedes asignar fácilmente espacio entre las líneas del texto. Por lo general, 1.5 veces el tamaño de la letra del texto está bien para bloques extensos de texto. El texto más pequeño debe tener un interlineado más ajustado, mientras que un texto con letras grandes debe tener uno más amplio. No es muy complicado, la verdad.
Tracking
El tracking es el espacio entre los caracteres de un bloque de texto. Lo admito: esta es una zona gris en lo que respecta a la "tipografía práctica" en la que CSS no nos permite un gran control. Generalmente no tienes que preocuparte del texto con tamaño de fuente pequeño, esto resulta un problema solo en los títulos. En términos generales, añadir un letter spacing: 1px o letter-spacing: 2px en tu CSS debería ser espacio suficiente entre las letras.
Otro lugar donde sería conveniente añadir espacio entre caracteres es entre las versalitas. En este caso, generalmente se considera una buena práctica añadir uno o dos pixels más entre los caracteres, ya que naturalmente se ven más grandes.
Color
Si bien no se trata estrictamente de tipografía, el color es una parte muy importante en el texto de todo sitio web. No estoy hablando de combinaciones de color, sino del contraste que se neceista para asegurar la facilidad de lectura en el sitio. Mayormente se considera que texto negro sobre fondo blanco (o fondos claros) es el color de texto más fácil de leer.
No estoy diciendo que vayas y pongas todo en negro sobre blanco; es solo que cuando estás diseñando, debes estar más consciente del contraste que ofrece el texto. Podría volverse en tu contra si no tienes cuidado.
La retícula
En mi opinión, usar una retícula (grid) es la idea más importante para la tipografía práctica en la web. Puedes tener fuentes geniales, espaciado y colores, pero si no tienes una buena composición del diseño, bien podrías estar usando Comic Sans.
Usar una retícula cuando estás diseñando con texto le da un equilibrio claro y una estructura geométrica a tu diseño. No es la solución mágica para un mal diseño, pero si diseñas con una retícula desde el principio, puedes estar seguro de que al menos, tu composición se verá sólida.
¿Y qué tiene que ver una retícula con la tipografía? Dicho de forma simple: todo. La retícula encarna todos los ideales fundamentales de la tipografía. Es geométrica, consistente, útil y sobre todo: hermosa.
Organizar tu texto con una retícula es una forma clave de establecer una jerarquía visual y es un excelente indicador de cuán grande (o pequeño) debe ser tu texto.
Distinguirse del resto
Como ya lo dije, si tu tipografía se puede leer, entonces ya has superado al 50% de la competencia, ¿y qué hay de la otra mitad? Si has llegado hasta aquí, dejaremos juntos las reglas claras y consistentes que rigen la facilidad de lectura y entraremos al oscuro y misterioso mundo de ser original.
Fuentes
¿Quieres que tu sitio destaque? Paso 1: usa una tipografía original. Probablemente, para ti esto quiere decir usar fuentes poco comunes. Pero, ¿qué hace que una fuente sea única? Para mí, no es la que no se usa con frecuencia, sino la que tiene un mensaje o sentimiento que no tienen los otros tipos de letras.
En realidad, elegir una fuente original es una cuestión de sentimiento. ¿Esta fuente se siente diferente?¿O solo se ve diferente? Al elegir los tipos de letra para cualquier proyecto, simpre debes considerar el sentimiento del diseño. Como esta es una opinión totalmente personal, no puedo ayudarte a encontrar una fuente original. Lo que puedo hacer es mostrarte un ejemplo de originalidad tipográfica.
The Design Cubicle tiene un logo y un diseño muy originales. Es fuerte, pero tiene clase; llama la atención, pero es sutil. Cuando miro este diseño, el sentimiento de clase fluye desde la página. Dice: "Yo sé lo que estoy haciendo".
Sé poco convencional
¿Cuántos sitios web conoces cuyo logo es tan grande como el contenido? ¿Y un título ultradelgado? A diferencia de mi último punto, ser poco convencional se trata de ver lo que otros están haciendo y luego hacer lo opuesto.
La gente de Savvy Belfast es inteligente. Se dieron cuenta de la apariencia apiñada de la mayoría de sitios web y decidieron reemplazar todo ese texto sin sentido con una sola frase.
Incluso si visitas su sitio solo por un momento, no puedes evitar recordar su nombre.
Integra tu diseño
La tipografía no funciona por sí sola. Es parte de un diseño web, tal como cualquier otra. El texto es importante, sí, pero no debes olvidar que es solo una parte de lo que hace que un diseño web sea genial. Debes diseñar tu texto con el resto del diseño en mente.
Si usas una textura muy elaborada de fondo, quizá una linda serif sería buena para tus títulos.
Mi punto aquí es simple: no te olvides del contexto. El diseño es un campo enorme y hoy solo estoy hablando de una parte de él. Para que un diseño web tenga éxito, todas las partes deben integrarse bien. Esta es la meta: crear la experiencia que alguien va a tener en tu sitio web. No puedes hacer eso solo con texto, o solo con color, ¡ni siquiera solo con el contenido!
Tipografía emocional
Gran parte de una experiencia se define por cómo te sientes: feliz, triste, divertido, enojado, bla, bla, bla. Los humanos tenemos una amplia gama de emociones y, como diseñadores, es nuestro trabajo evocar esas emociones con nuestros diseños.
De todas las coas que hemos hablado hoy día, esta es, de lejos, la más abstracta, y es un poco difícil de explicar. En lugar de tratar de explicarte esto, déjame mostrártelo.
Cuando visité el sitio de Solid Giant por primera vez, sonreí. Sonreí la siguiente vez que lo vi, e incluso la siguiente vez. Inmediatamente sentí una afinidad con el diseño. Esa "G" grande y peluda es simplemente demasiado adorable como para olvidarla.
Francamente, creo que es genial.
No hay forma de enseñar diseño emocional, es algo que tienes que vivir, y luego jugar con él en tus propios diseños.
Tipografía práctica
Bueno, hemos llegado al final de este artículo. Espero que por lo menos hayas apendido algo, pero si no, está bien también. Si hay algo con lo que te quiero dejar después de leer esto es sobre todo: que se pueda leer. El resto vendrá solo.
¿Cuál crees que es la parte más importante de la tipografía en la web? ¡Deja tu opinión en los comentarios!
También en Tuts+
By
