() translation by (you can also view the original English article)
Si estás aprendiendo Diseño web desde cero y quieres mejorar significativamente tus habilidades con las tipografías, este artículo está escrito para ti. Cubriremos los tipos de letras, fuentes, anatomía tipográfica, jerarquía y cómo elegir tipografías. Aprenderás lo suficiente como para volverte peligroso en poco tiempo.
Temas
Como es habitual en estas guías completas, estaremos cubriendo una cantidad significativa, incluyendo:
- El famoso 95%
- Tipografías vs. fuentes
- Clasificaciones tipográficas
- Anatomía tipográfica
- Espaciamientos
- Signos de puntuación
- Jerarquía
- Elegir tipos de letras
El famoso 95%
¡El diseño web es 95% tipografía! No hay diseño web sin tipografías. Así que ¿por qué no mejorar tus habilidades en diseño web mediante la aplicación de una tipografía sólida? Hay un mundo lleno de letras por explorar, un mundo que ha sido transmitido por generaciones de personas creativas trabajando con diseño gráfico y diseño de fuentes. Otro increíble agujero de conejo en el cual sumergirse.
En los inicios del diseño web, intentó seguir ideas de diseño gráfico, especialmente cómo libros, revistas y periódicos fueron dispuestos y diseñados. Estos días, diseñar para la web ha madurado y no sigue estos conceptos tan de cerca como lo hizo una vez. El diseño web responsivo es un ejemplo donde el diseño claramente maduró más allá del mundo impreso en muchas, muchas maneras. La otra cara es que esto también condujo a más complejidad, algo que parece ser creciente. Lejos de ser amenazante, esto es muy emocionante y las posibilidades no sólo están creciendo, pero las opciones hoy son vastas y frescas. ¡La web ha crecido — un poco — y el futuro parece brillante!
Comunicación
Escribir es más eficaz que cualquier otra cosa al transmitir tu mensaje en la web. Seguro, la gráfica puede apoyarla y mejorarla, los iconos también, pero comunicarte con tus usuarios sucede principalmente a través de la palabra escrita — en contraste con el mundo de la publicidad, donde las imágenes y los gráficos pueden transmitir historias completas más fácilmente, incluso sin utilizar del todo mucho lenguaje escrito.
En la web, estamos hablando de páginas, sitios web y la más que todo de interfaces. Ocuparse sobre todo de los elementos gráficos para éstos ha demostrado ser difícil, a menudo ineficaz, ambiguo y no aptos para el mercado masivo.
Este ejemplo de Dropbox demuestra que las gráficas solas no alcanzan el mismo nivel de comunicación y cuando están solas son ambiguas en el mejor de los casos.
Tipografías vs. Fuentes
"Las Tipografías" son conjuntos de letras, números y signos de puntuación que forman conjuntos de estilos para un alfabeto. Piensa en las tipografías como una familia de caracteres cuyos miembros comparten diseños comunes, pero que pueden variar en peso y estilos. Bodoni o Gotham, por ejemplo, son tipos de letra.
tu diseñas una tipografía.
"Las Fuentes" se consideran un subconjunto de un tipo de letra. Son los conjuntos de caracteres físicos (o digitales) de un determinado tipo de letra en un peso y estilo. Open Sans Light es una fuente; un archivo que utilizas en tu sistema.
Tu haces una fuente.
Clasificaciones Tipográficas
El tema de clasificación de tipos de letra es mucho más vasto de lo que uno podría pensar en un principio — especialmente las subclasificaciones. Lo esencial con lo cual empezar es rápidamente tomar el control, echemos un vistazo a algunas clasificaciones que absolutamente necesitas saber.
Tipografías Serif
Las tipografías serif son llamadas así por sus extensiones pequeñas y detalles decorativos en el extremo de algunos trazos: serifas.
Las tipografías serif son las más antiguas que se discutirán en este artículo. Esta no es una ciencia exacta pero se puede argumentar que ellas provienen desde tan temprano como cuando los romanos tallaban letras en las piedras, utilizando el alfabeto latino. También hay una interesante teoría que dice que son un resultado del uso de cinceles al tallar piedras y eran una opción artística debido a las herramientas utilizadas para crear un mejor resultado final.
Las serifs se suelen utilizar para piezas más largas de texto como el texto del contenido. La evidencia de que son "más fáciles de leer" no es concluyente, sin embargo, este argumento surge a menudo. Funcionan bien en un entorno clásico y de vieja escuela, pero igualmente funcionan bien en un entorno moderno, si se utilizan correctamente.
Las serifs sin embargo también son una excelente opción para los encabezados. Los encabezados utilizados por The Washington Post son un ejemplo perfecto de la utilización de una serif para transmitir un determinado estilo de tradición y calidad, mientras que el texto del cuerpo en sans-serif, hace que se vea moderno sin dejar de ser muy legible.
Tipografías Sans Serif
Las tipografías "Sans Serif" carecen de las extensiones serif.
Las sans serif alcanzaron la popularidad en la década de 1920. Se diseñaron para lucir modernas, industriales y hechas a máquina; ideales para la industria de la publicidad y el movimiento Art Decó de la época.
Tipografías Semi Serif
Las "Semi Serif" incorporan ambas características de las tipografías serif y sans serif.
Tipografías Slab Serif
Las "Slab serifs" son similares a las serif, pero son mucho más gruesas y más llamativas por naturaleza.
En el pasado, fueron a menudo utilizadas en las máquinas de escribir para asegurarse de que crearan suficiente contraste en la página. En los primeros días, las máquinas de escribir tenían más dificultades mostrando letras consistentemente en una página; lograrlo era tan dependiente de la presión y la frescura de la tinta y demás. Una serif más delgada era menos efectiva para la tipografía de la máquina. La temprana industria de la publicidad también necesitaba algo nuevo y llamativo, así que hizo un uso intensivo de las slab.
Tipografías Script
Las tipografías "Script" a menudo emulan el aspecto del texto escrito a mano, imitando la fluidez y el espesor variable. Su aspecto es más casual e informal, a menudo dando la sensación de algo artesanal y personal. Las scripts son típicamente muy decorativas y raramente usadas para párrafos de texto muy largos (eso esperamos).
Tipografías Monospace
Como su nombre indica, cada letra y signo de puntuación del tipo "monospace" ocupa el mismo ancho horizontal. Las otras tipografías que hemos cubierto hasta ahora todas tienen caracteres de ancho variable; estas son conocidas como tipos de letra proporcionales.
Las máquinas de escribir y las primeras computadoras usaron principalmente letras monospace. El hardware de la época no se acomodaba a las necesidades de los anchos variables de otras familias de fuentes. Hoy en día, los editores de texto para escribir código aún ofrecen fuentes monospace por defecto. Nada le habla al "hacker" más claramente que el código escrito en monospace. En los últimos años también se ha convertido en mucho más popular entre los diseñadores.
Anatomía Tipográfica
Ahora repasemos algunas de las características anatómicas más importantes de las fuentes.
No nos preocuparemos demasiado por las minucias aquí, tu trabajo como diseñador es ser creativo con las tipografías por si mismas, no recitar cada pequeño detalle de cómo están compuestas. Todo es sobre lo que haces, lo que logras cuando pones a "trabajar" las letras. Así que mi consejo es simple, comprende y memoriza los conceptos básicos, diviértete, juega con las tipografías y empápate de ellas con el tiempo. ¡No hay nada de malo en no saber todos los detalles sobre la anatomía de las fuentes! Por otro lado, tal vez soy muy pragmático sobre esto. ¡Tú decides!
Línea de base
La línea de base es la línea sobre la cual se ubican la mayoría de los caracteres.
Mediana
Por otro lado, la mediana es el techo para la mayoría de las letras minúsculas.
Altura-x
El espacio entre la línea base y el punto medio es lo que llamamos la altura-x. Esto se puede ver como que es igual a la altura de la letra minúscula "x", de ahí su nombre. Entre mayor sea la altura-x que ofrece una tipografía, más legible será en tamaños más pequeños. La mayor parte del texto que hemos leído en el mundo occidental se compone de letras minúsculas, y como la mayoría de las características distintivas que nos permiten reconocer letras y, por tanto, palabras, pueden ser encontradas en esta región, la altura-x influye mucho en la legibilidad.
Este espacio extra la da a una fuente un poco más la oportunidad de que brillen sus caracteres. Tendemos a leer en saltos y a consumir letras rápidamente e inconscientemente. De manera que más altura-x es buena para el texto del cuerpo ya que los parágrafos pueden cansar si los ojos tienen que trabajar mucho más duro en descifrar el alfabeto. Secciones como los títulos donde generalmente se utilizan tamaños de fuentes más grandes y menor cantidad de texto de alguna manera, pueden lograrse con menos de la altura-x óptima. Tienes más espacio para elecciones artísticas que implican un determinado estado de ánimo o carácter sin afectar seriamente la experiencia de lectura de tus usuarios.
Ascendente y Descendente
El ascendente es esa parte que se extiende por encima de la mediana, mientras que el descendente es parte de un caracter que se extiende por debajo de la línea de base:
Contador
Los contadores son áreas que están parcialmente o totalmente cerradas. Piensa en una "o" o una "a". La "a" por ejemplo tiene dos contadores: uno que está parcialmente y otro que está completamente cerrado. Las tipografías con contadores más grandes generalmente también son buenas para la legibilidad, debido a que los detalles tienen más espacio para ser mostrados explícitamente. Así que busca tipografías con alturas-x grandes y contadores grandes si estás interesado en dar a los usuarios una buena experiencia de lectura.
Espaciados
Examinemos ahora algunos diferentes tipos de espacio cuando se trata con la tipografía.
Altura de Línea
La Altura de Línea es el espacio entre dos líneas base consecuentes. En impresión, es muy importante crear un ritmo vertical constante - la cuadrícula base - un sistema de mini rejilla para las fuentes en una página. En la web, este tipo de precisión es muy difícil de lograr.
Cuadrícula Base
Los entornos responsivos hacen que aplicar cuadrículas base sea menos atractivo, por lo que tu tiempo podría ser mejor invertido en cosas más pragmáticas.
Una buena altura de línea para los párrafos en la web yace generalmente entre 1.3 - 1.6 (lo cual es proporcional al tamaño de la fuente). Los títulos pueden y deben ser un poco más apretados. Un buen referente a tener en cuenta es que los lectores deben ser capaces de saltar hasta el inicio de la siguiente línea fácilmente. No quieres agobiar a los usuarios con algún tipo de sobrecarga mental, que necesitan mirar concentrados en cuanto a dónde deben seguir leyendo cuando llegan al final de una línea de texto.
Diversos grados de la línea de altura pueden también (extrañamente) impactar el color del texto. Alturas de línea más estrechas parecen más oscuras puesto que el micro espacio en blanco entre las líneas se reduce y por supuesto viceversa . Encontrar un equilibrio para que el texto parezca coherente, claro y legible es tu objetivo al ajustar este espacio. Lee el texto, usa texto real no simulado tipo lorem ipsum y ve cómo se siente. ¿Es una buena experiencia de lectura? Esto debe estar en el primer plano de tu mente — ¡siempre!
Longitud de Línea / Medida
Ambos, estos términos significan lo mismo: el número de caracteres en una sola línea de texto. Una buena medida para los diseños en la web se encuentra entre los 60 y 85 caracteres. La longitud de la línea y la altura de la línea son algo simbióticas y dependen entre sí. Entre más longitud de línea necesite un párrafo, más debería ser incorporada la altura de la línea.
Si parece demasiado estrecha o demasiado elástica, ajústela hasta que esté legible y "se sienta" bien.
Kerning
El kerning se refiere a ajustar el micro variable espacio en blanco entre las letras individuales. Esto se concibe diferente por cada tipo de diseño, cumpliendo con las necesidades de cada letra. Una "o" minúscula podría ocupar menos espacio que una "t" minúscula por ejemplo. En la web esto es tedioso de ajustar, mientras que la práctica del kerning es muy frecuente en la industria de la impresión.
En la web es posible aplicar kerning apoyándose en los datos al horno en las fuentes mismas. Esta es una característica que puede ser activada con las propiedades de CSS text-rendering o la propiedad font-feature-settings Ten en cuenta que el soporte dista de ser generalizado en este momento.
Espaciado de Letras / Tracking
Esto se refiere a la separación constante entre todas las letras de un grupo. No le apunta a letras individuales como el kerning, pero en cambio es un ajuste más uniforme que se extiende a través de todo el pasaje de texto afectado, resultando en más o menos textura y densidad.
Al utilizar grandes piezas de texto, en los títulos por ejemplo, un poco de espacio entre las letras negativas pueden recorrer un largo camino. No quieres crear la impresión de que el texto se aparta. Como con el kerning, cuando las tipografías están diseñadas para consumirse en tamaños más pequeños, el espaciado de la letra puede que necesite estos pequeños empujones ya que el kerning original fue considerado de manera diferente.
Signos de Puntuación.
Las Comillas
Usa comillas reales. ¡Punto!
Las otras "comillas" que a menudo se utilizan son de hecho las comillas sencillas — que deberían utilizarse para marcar pulgadas y pies. Los apóstrofes y las comillas simples también tienen su contraparte real. Sí, necesitas hacer algo de kung-fu de dedos en el teclado para conseguirlas, pero el resultado final vale la pena el esfuerzo. Leer más:
Los Puntos Suspensivos
Los puntos suspensivos se refieren a los tres puntos que pueden fácilmente confundirse con tres puntos individuales. La diferencia es que tienen más espacio entre cada punto. Puedes utilizar espacio extra a la izquierda y a la derecha, es de ti decidir.
Utilízalas cuando desees omitir contenidos, palabras, frases, líneas, párrafos o partes de las citas. Es un marcador para indicar que quitaste algún texto.
Guión
No hay necesidad de espacios adicionales alrededor de los guiones. Su principal objetivo es vincular palabras, como teórico-práctico, escuela-taller, entre otras.
Son la única opción para prefijos y sufijos también. También se debe utilizar si necesitamos deletrear una palabra: T-U-T-S-P-L-U-S. Abarcar el tiempo y la distancia es también parte de su repositorio:
- 03:45 - 04:00 p.m
- 1938-1945
Para estos rangos también puedes utilizar el guión largo.
Guión Largo
El guión largo toma su nombre de la longitud de la letra minúscula "n". Es un poco más largo que un guión normal y se utiliza para rangos de valores, así como para implicar relaciones como maestro – estudiante. O para hacer énfasis.
Guión
El guión es otra vez un poco más largo, al tamaño de la mayúscula "M". Puede usarse para enfatizar una pausa de pensamiento e indicar que una oración está inacabada. Las dos rayas pueden parecer un poco más delgados que un guión — generalmente. No utilice dos guiones en casos donde estos guiones son más adecuados. Ninguno de los guiones requiere un espacio extra alrededor de él.
Lo sé, estos detalles de puntuación no suenan tan atractivos, pero el conocimiento básico de cómo utilizarlos correctamente debe ser importante para ti, si te gusta diseñar con buena tipografía en mente. También podría parecer trivial tener tres tipos de guiones de donde elegir porque se ven muy similares, pero por otro lado, mucho cuidado y consideración ha sido puesto en ellos con los años y nosotros deberíamos respectar el trabajo de diseñadores que vinieron antes que nosotros. Es su trabajo duro e innovación, lo que hace que sea tan fácil construir algo hoy. Prestar atención a esos detalles es un pequeño precio por pagar para estar a la altura de los grandes.
Jerarquía
Es importante que transmitas una fuerte jerarquía dentro de tu tipografía. ¿Por qué? Porque como hemos establecido al principio de este artíoculo, las letras en la página constituyen aproximadamente el 95% de su diseño. Si tienes una jerarquía débil dentro de tu texto, no tendrás la oportunidad de una bola de nieve en el infierno de crear una fuerte jerarquía en tu diseño general.
La tipografía te ofrece múltiples maneras de dar a tus usuarios anclas visuales para navegar por tu sitio de la manera que quieran. A través del énfasis, puedes hacerles saber lo que es más importante y a lo que deben prestar atención a la primera. Aquí hay algunas maneras de fortalecer tu trabajo en este campo:
Color
Si no tienes mucho color en una página, los elementos que tienen color realmente se destacan. Como siempre, menos es más. Como en los siguientes ejemplos sólo se usa el color escasamente el efecto es muy fuerte, incluso sin aumentar el tamaño o el espacio en blanco adicional.
Tamaño
Incrementar el tamaño relativo e la fuente , siempre atraerá la atención hacia ciertos elementos. Lo que me gusta de variar los tamaños de las fuentes es que puedes fácilmente crear "anclas" visuales que el lector puede usar para saltar alrededor la página. La única advertencia es que realmente necesitas ser consistente con el uso de los tamaños de las fuentes en elementos particulares. No se pueden cambiar por todo el lugar. Probablemente debilitaría tus diseños mucho más que teniendo un texto de tamaño uniforme.
Espacio en blanco
Le da a los elementos tipográficos importantes, espacio para respirar. Si están rodeados de espacio vacío, se acentúan simplemente por eso. Los recién llegados parecen un poco tímidos de utilizar mucho espacio entre los elementos. En impresión esto puede ser costoso, pero en la web esto lo obtienes de manera gratuita, Juega por ahí, mira lo que otros diseñadores hacen y roba en alguna ocasión. No hay magia ni ciencia de cohetes. Sólo un poco de experiencia es todo lo que necesitas — eventualmente desarrollarás una buena medida.
Peso
Una familia tipográfica extensa te dará un montón de pesos para elegir. En muchos de los ejemplos anteriores se pueden ver varios pesos para diversos propósitos en el trabajo. Para mí, esto no es algo sobre lo que salto enseguida y generalmente intento con las otras herramientas para crear primero una jerarquía. Pero esto es cuestión de gusto, lo que sea que funcione mejor para ti y tus diseños.
Captura de pantalla
En la captura de pantalla de Dropbox en la página "Acerca de" puedes ver que los nombres tienen un peso distinto al de sus títulos. Una técnica muy básica para crear énfasis.
Cursivas
Las cursivas son grandiosas para la información secundaria o terciaria en un texto corriente (o para hacer énfasis, por supuesto). El siguiente ejemplo hace buen uso de ellas para mostrar una dirección.
Fuerte Contraste Entre Pares de Letras
Cuando eliges más de un tipo de letra para tu trabajo (lo mejor es evitar la elección de más de dos) se vuelve crítico que estos tipos de letra creen algún tipo de jerarquía a través de su contraste. Por un lado deben ser fácilmente distinguibles unas de otras y por otra parte que no estén demasiado sin relación alguna. Hay algunas buenas pautas para seleccionar tipos de letra; el siguiente capítulo te pondrá rápidamente en ellas.
Ten en cuenta que todas las reglas anteriores sólo brillan si las usas consistentemente. Si cambias las cosas demasiado, tu jerarquía se debilitará significativamente. Si todo esto es totalmente nuevo para ti, dirígete a mi artículo sobre los principios del diseño visual para ponerte a tono rápidamente. Todo lo anterior tendrá mucho más sentido después de eso.
Elegir Tipos de Letra
Tenemos un montón de tipos de letra para elegir en estos días. Y no sólo eso, tenemos un montón de servicios que quieren ayudarnos con eso. Puede tomar un tiempo tener una idea de lo que realmente hay. Pero para mí, esto es totalmente algo bueno. La tipografía web ha recorrido un largo camino, no sólo en términos de ecosistema, sino también en términos de lo que los navegadores permiten hacer hoy en día.
Al decidir qué tipos de letra deseas utilizar, te recomendaría que en primer lugar te enfocaras en la legibilidad y el estilo que deseas transmitir en tus diseños. El tono y el mensaje también son importantes ya que las fuentes tienen una enorme influencia en esto a través de sus diversas características. Si puedes llegar a hacer todo eso, te pones a ti mismo aparte del resto de la manada de una manera muy significativa.
Emparejando Tipografías
Asegúrate de crear un buen contraste entre las opciones elegidas. Las tipografías que se parecen demasiado pueden terminar siendo confusas y afectan negativamente tu jerarquía visual. Las familias tipográficas más grandes también tienen el beneficio de tener montones de opciones para darle variedad a un ejemplo. De esta manera tu puedes usar sólo una tipografía sin parecer aburrido.
Si quieres ir más allá que eso, entonces emparejar una tipografía sans-serif con una serif, es un buen punto de partida - de hecho la más razonable. Esto puede conducir a un contraste más fuerte e interesante que puedes usar en tu beneficio - estilísticamente.
Utiliza tus opciones consistentemente. Evita cambiar las tipografías para el texto del cuerpo y los encabezados por todo el lugar. Decide cuál es la mejor para la legibilidad y cuál es mejor para transmitir un estilo, mientras capturas la atención de los usuarios y aférrate a esto.
Algunos diseñadores de fuentes han creado versiones serif y sans serif de la misma tipografía. Se supone que deben trabajar juntas de manera ordenada. Cuando tu tipografía tiene una hermana con la que coincide, debes encontrar un contraste adecuado para ella desde el principio.
Si emparejas dos tipografías, busca diferencias visuales fuertes entre las dos. Mantenlas sutiles si quieres, pero deben ser visibles, al menos - incluso para un ojo rápido. En ese respecto, emparejar dos sans serifs o dos serifs puede ser complicado.
Mientras buscas distinciones visuales, también quieres mirar por alguna clase de trato común. Algo que puede unir las dos diferentes tipografías. Su estructura visual, la forma en que las letras son diseñadas pueden compartir ideas comunes. Los contadores y los esqueletos similares en todas sus letras, por ejemplo. Eso las une aún más hábilmenente Una estructura similar o diseño geométrico ayudará en eso seguramente.
¡En ocasiones, roba! Cuando encuentres combinaciones que te gusten, pruébalas por ti mismo y mira lo que puedes hacer con ellas. Aprender a través de imitar el trabajo de otros está bien.
Ideas Finales
Las tipografías carecen de leyes rígidas que guíen tus decisiones. Para mi, eso es algo bueno. En muchos aspectos, la tipografía es subjetiva, pero su legibilidad podría ser la constante en la que siempre debe centrarte en primer lugar. Toma todas las ideas y conceptos que hemos cubierto aquí con un grano de sal y míralas como puntos de partida para tus propias exploraciones creativas.
Hay mucho espacio para preparar la web con mejores tipografías. Es una gran herramienta para mejorar la comunicación y creo que es culturalmente un conocimiento valioso que nos fue entregado sobre muchas generaciones de trabajo duro y la exploración. Es fantástico el cómo puedes influenciar el tono del lenguaje escrito con ellas..
