Como muchos de ustedes, soy un experto en marketing y más bien un diseñador «hágalo usted mismo».
Claro, lo leí El curso acelerado del vendedor en la creación de contenido visual y aprendí algunos trucos geniales de PowerPoint y Photoshop que me han ayudado mucho con mi trabajo de marketing de contenido. Pero realmente quería llevar mis habilidades de diseño al siguiente nivel.
Así que les pregunté a todos mis amigos diseñadores cuál debería ser mi próximo paso, y todos me dijeron que tomara un curso de tipografía.
¿Por qué tipografía? Resulta que, si bien a menudo se pasa por alto la importancia de la tipografía, juega un papel objetable papel en el fortalecimiento de su marca, creando interés en su producto y destacando su mensaje central. Sabiendo eso, decidí inscribirme en un curso de tipografía en el Colegio de Arte y Diseño de Massachusetts. No estaría de más aprender a identificar una buena fuente de una mala, ¿verdad?
Aprendí mucho más que eso. Me di cuenta de que prestar atención incluso a los detalles más pequeños del tipo puede marcar la diferencia en el mundo cuando estás diseñando un correo electrónico, un libro electrónico o una imagen para las redes sociales.
Es por eso que quería escribir esta publicación: compartir los aprendizajes y recursos más importantes con mis compañeros especialistas en marketing.
¿Entonces que dices? ¿Estás listo para llevar tus habilidades de diseño de bricolaje al siguiente nivel? Empecemos.
Haga clic en el encabezado de una sección a continuación para saltar a esa sección:
¿Qué es la tipografía?
Antes de tomar este curso, la tipografía, al menos para mí, era más el arte de desplazarse por un menú desplegable hasta encontrar una fuente que parecía funcionar. Pero resulta que hay mucho más que eso.
La tipografía es el arte y la técnica de ordenar tipos, escriba letras y caracteres de significado.
Tenga en cuenta que se trata de algo más que el diseño de letras y caracteres; la disposición de esas letras y caracteres es una parte importante de todo. Eso se refiere a la selección del tamaño de punto, la longitud de línea y el espaciado, tanto en una sola línea como en toda una página o pieza de trabajo.
Crédito de la imagen: Designspiration
Para entender donde la importancia del arreglo entra, me gusta pensar en la imprenta de Johannes Gutenberg. En un momento dado, la gente practicaba la tipografía usando materiales impresos, lo que significa que literalmente tomaban letras y caracteres y los disponían en el espacio físico.
Hoy, gracias a las computadoras, las fuentes de código abierto y la tipografía computarizada escalable, es mucho más fácil organizar letras y caracteres. Pero esa pieza física sigue siendo importante, incluso en el ámbito digital.
¿Por qué es importante la tipografía?
La tipografía está absolutamente en todas partes. Solo mire su teléfono, una valla publicitaria, su taza de café o incluso los diferentes estilos utilizados en esta publicación de blog. Cada fuente, letra y arreglo de caracteres juega un papel en la determinación cómo se transmite un mensaje.
Claro, podría A veces parece trivial, pero incluso el los ajustes de tipo más pequeños pueden afectar la apariencia de su trabajo. Por ejemplo, en junio, Facebook probó una nueva fuente en sus usuarios llamada Ginebra. Si bien la nueva fuente era solo un poco más delgada y liviana que la original, Helvetica, marcó una diferencia notable para algunos.
«El efecto general es un bloque de texto más ligero y moderno», explicó Chris Mills para BGR..
Crédito de la imagen: Mashable
Lo mismo ocurre cuando Apple cambió su fuente predeterminada de la dramáticamente delgada Helvetica Neue a una que desarrollaron internamente llamada San Francisco.
«Las diferencias entre Helvetica y San Francisco son sutiles, incluso para el ojo entrenado, pero están ahí», escribió Liz Stinson para CON CABLE. «Aunque sigue siendo un sans serif austero, San Francisco es más audaz y amigable que Helvetica Neue. Basado en el tipo de letra alemán DIN, San Francisco les da a los personajes más espacio para respirar, lo que facilitará la lectura en pantallas móviles relativamente pequeñas. Alto y delgado, San Francisco es eficiente en cuanto al espacio, como el tipo de letra personalizado Roboto de Google, que se podría considerar un primo cercano de la fuente de Apple».
¿La comida para llevar aquí? los pequeños detalles hacer Materia.
De hecho, uno de los únicos cursos universitarios que tomó Steve Jobs fue sobre caligrafía y tipografía, que creía que jugaron un papel fundamental en el éxito de Apple. Como dijo una vez en un discurso de graduación de la Universidad de Stanford: «Si nunca hubiera asistido a ese único curso en la universidad, la Mac nunca habría tenido múltiples tipos de letra o fuentes espaciadas proporcionalmente». ¿Te imaginas un mundo en el que los productos de Apple no tuvieran un diseño atractivo? Ciertamente no puedo.
Una vez que te das cuenta de cuánto se piensa en seleccionar cuidadosamente un tipo de letra, se vuelve mucho más fácil reconocer las diferencias entre los tipos de letra y comprender por qué podrían haber sido elegidos en primer lugar. Eche un vistazo a algunos de los ejemplos a continuación para tener una mejor idea de lo que quiero decir…
Crédito de la imagen: Awwwards
Crédito de la imagen: Awwwards
Crédito de la imagen: Awwwards
Crédito de la imagen: Awwwards
¿Listo para pasar a alguna terminología tipográfica? Vamos.
Definiciones y términos de tipografía
tipografías vs. fuentes
Si pensabas que estas dos palabras eran intercambiables, no estás solo. Pero en realidad significan dos cosas diferentes.
El tipógrafo, Nick Sherman, una vez usó una gran analogía para explicar las diferencias entre los términos «tipo de letra» y «fuente». Sugirió comparar estos términos tipográficos con los términos musicales «canción» y «mp3». Cuando estás explicando cuánto disfrutas de una melodía en particular, dices: «¡Me encanta esta canción!» No dirías: «¡Me encanta este mp3!» La canción es la obra de arte, mientras que un archivo mp3 es solo el mecanismo de entrega.
Las mismas reglas se aplican en la tipografía. Debería use la palabra «tipo de letra» cuando describa el trabajo creativo (es decir, lo que ve). Este es un término de diseño más abstracto que se usa para referirse a la forma en que se ve o se siente una colección específica. Por ejemplo, Helvetica es un tipo de letra.
Si está describiendo la encarnación física de la colección de letras y caracteres, debe usar el término «fuente». Se refiere a lo que usa, ya sea un archivo en su computadora o un estuche lleno de letras de metal. Esta es la representación tangible de esa colección de letras y caracteres. Por ejemplo, Helvetica Bold y Helvetica Light Oblique tienen fuentes.
Así es como podrías usar estos dos términos en una oración:
La anatomía de una tipografía
yt’s mucho más fácil de comunícate con los diseñadores cuando realmente hablas su idioma, por eso es importante para entender el anatomía de una tipografía.
Cada parte de una letra tiene su propio término especial, similar a los huesos del cuerpo humano. A continuación, verá tres diagramas que explican la composición de letras individuales, cómo estos elementos interactúan entre sí y cómo se ubican en una línea.
Por ejemplo, tomemos la palabra «Defectuoso» como se muestra en la imagen a continuación.
Así es como se definen cada uno de los términos aquí:
- Líneas base: La línea donde se sientan las letras.
- Altura de la cabeza: La distancia desde la línea de base hasta la parte superior de la letra mayúscula.
- altura X: Ubicada entre la línea de base y la altura de la cabeza, es la altura del cuerpo de la letra minúscula. (En este caso, son las letras ‘a’, ‘u’ e ‘y’).
- Bochas: La parte curva del carácter que encierra las partes circulares o curvas de algunas letras, como ‘d’, ‘b’, ‘o’, ‘D’ y ‘B’. (En este caso, es esa forma redonda que sobresale de la letra ‘a’).
- Alguacil: La ligera proyección que remata el trazo de una letra en ciertos tipos de letra. (En este caso, es ese pequeño pie que sobresale de la letra ‘l’).
- Descendente: El punto más largo de una letra que cae más allá de la línea de base.
Ahora, veamos la palabra «flash»:
Así es como se definen estos términos:
- Ligadura: El trazo que une letras adyacentes. (En este caso, notará que la ‘f’ y la ‘l’ se juntan para formar una personaje.)
- Provenir: La base de una letra, similar al tallo de una flor.
- espinas: El cuerpo curvilíneo de la letra ‘s’, y solo la letra ‘s’. Obtiene su propio término porque el lomo puede ser casi vertical o mayormente horizontal, dependiendo del tipo de letra.
- Ascendente: La parte de una letra que se extiende por encima de la línea media de una fuente, es decir, es más alta que la altura x de la fuente. (En este caso, también notará que la letra ‘h’ es más alta que la altura de la x).
¿Aún conmigo? Solo algunos más aquí. Echemos un vistazo a la palabra «carne»:
Así es como se definen estos términos:
- Barras transversales: La barra que atraviesa el interior de la letra y conecta un lado con otro. (En este caso, es la barra dentro de la letra mayúscula ‘B’).
- Contadores: El espacio vacío en medio de letras como ‘B’, ‘O’ o ‘A’.
- Final: El extremo cónico de letras como ‘e’ o ‘c’.
- Terminal: Un tipo de curva que ves en la parte superior de la letra ‘f’ o al final de la letra ‘j’.
Buen trabajo. Ahora que conoce la anatomía de las formas de las letras, entremos en los términos relacionados con el espaciado: interletraje, seguimiento, interlineado y jerarquía.
Interletrado
Kerning es la modificación del espacio entre dos letras. Por ejemplo, mira la imagen a continuación:
Aquí, usé Franklin Gothic Medium para mostrar el espacio natural que ves entre dos letras T. Se ve un poco demasiado ajustado, ¿verdad? Al personalizar el espacio entre estas dos letras, podrá aumentar la legibilidad.
Seguimiento
Similar al interletraje, el seguimiento trata con una modificación al espaciado entre letras. Sin embargo, en lugar de ajustar el espacio entre solo dos letras, el seguimiento es un ajuste del espacio entre todas las letras de una palabra completa. Vea la diferencia a continuación:
Para este ejemplo, elegí hacer un ajuste extremo al seguimiento. Por lo general, querrá aplicar el seguimiento en pequeños incrementos para evitar problemas de legibilidad.
Principal
¿Recuerdas en la escuela secundaria cuando tenías que escribir a doble espacio tus ensayos? Bueno, los términos «espacio simple» y «espacio doble» también se pueden llamar «principal», que es la distancia entre las líneas de base. Ver liderazgo en acción:
Puede elegir aumentar su interlineado, creando más espacio entre las líneas de base, o disminuir su interlineado, lo que acerca las líneas de texto. La razón por la que los maestros de secundaria pidieron que los ensayos fueran a doble espacio fue porque es mucho más fácil de leer y podían hacer correcciones al texto más fácilmente.
Jerarquía
A medida que lea esta publicación de blog, notará que ciertas palabras se destacan más que otras. Eso es lo que los diseñadores llamarían crear una jerarquía. Puede usar diferentes grosores (negrita, regular, ligero), estilos (cursiva) y tamaños para crear una sensación de orden dentro de su texto. Esto no solo ayuda a crear un flujo legible, sino que ayuda al lector a ver cuáles son los puntos más importantes.
Aquí hay un ejemplo de cómo se ve la jerarquía:
En la mayoría de los casos, desea que las personas lean el título primero. Es por eso que verá que la mayoría de los títulos son mucho más grandes y audaces que el cuerpo del texto. Las citas destacadas y las oraciones descriptivas también pueden destacarse sobre el resto del texto utilizando técnicas como la negrita y la cursiva.
Con una jerarquía efectiva, el lector debería poder saltar de una sección a la siguiente para identificar los puntos más importantes.
¿Tienes todos estos términos tipográficos? Frio. Pasemos a cómo se organiza la tipografía con clasificaciones de tipos y familias de tipos. (Te lleva un poco a la clase de biología, ¿no?)
Clasificaciones de tipos
Las dos clasificaciones de tipos principales que ve se llaman serif y sans serif. Otras clasificaciones incluyen serif débil, letra gótica, guión, moderno y decorativo. Comencemos con los dos más comunes y luego toquemos algunos otros para darle una idea de lo que se trata.
Alguacil
¿Recuerdas cuando señalé el pequeño pie en la palabra «Defectuoso»? Los tipos de letra con pies como ese se llaman serif. Puedes ver dónde destaqué estos pequeños pies a continuación:
Los tipos de letra serif comunes incluyen Times New Roman, Georgia y Garamond. Si está leyendo una novela, puede notar que el cuerpo del texto es una serifa. Esto se debe a que una serifa es mucho más fácil de leer en obras impresas largas debido a la distinción entre las letras.
sans serif
En francés, la palabra «sans» significa «sin». Entonces, el término «sans serif» significa literalmente «sin serif». En la imagen a continuación, notará que las palabras carecen de serifas, como señalé con las flechas rojas.
Los tipos de letra sans serif comunes incluyen Arial, Verdana y Futura. Verá que se usan muchas sans serif en publicaciones de blog y documentos en la web porque se siente más moderno y se ve muy bien incluso en resoluciones de pantalla más bajas.
Carta negra
Los tipos de letra Blackletter, también conocidos como Gothic, Fraktur o Old English, son conocidos por sus dramáticos trazos gruesos y finos y sus elaborados remolinos en las serifas. Estos tipos de letra se basan en la escritura de manuscritos tempranos; de hecho, se usaron letras góticas en la Biblia de Gutenberg, uno de los primeros libros impresos en Europa. Eran mucho más populares antes de 1500 de lo que son hoy.
Crédito de la imagen: SitePoint
Como puede ver, las letras góticas son bastante difíciles de leer, por lo que normalmente no se usan para el tipo de cuerpo. Por lo general, los verá en encabezados, logotipos, carteles y letreros, como en las placas de identificación de los periódicos (New York Times’ logotipo, ¿alguien?), o en los encabezados de certificados, diplomas o títulos. Las fuentes comunes de letras negras incluyen Cloister Black, Deutsche Zierschrift y Germanica.
Crédito de la imagen: SitePoint
registros
Los tipos de letra Script se basan en los trazos variados y, a menudo, fluidos creados por la escritura a mano. Como tipos de letra de computadora escalables, los caracteres en estos scripts ahora pueden unirse entre sí automáticamente para que imiten de manera convincente la escritura a mano, en lugar de que los usuarios tengan que seleccionar y elegir manualmente qué letras van después de cuáles, lo que puede imaginarse que fue un proceso laborioso.
Bajo el paraguas de una tipografía script, existen dos clasificaciones básicas: formal y casual. Los guiones formales a menudo recuerdan las formas de letras escritas a mano comunes en los siglos XVII y XVIII, y se usan para diseños elegantes como invitaciones y diplomas, no para cuerpo de texto.
Crédito de la imagen: Prensa caduca
Los guiones casuales, o guiones informales, son solo eso: tipos de letra de guiones menos formales que se parecen más a la escritura a mano cotidiana.
Crédito de la imagen: Fuente Haus
Esos son solo algunos ejemplos de clasificaciones de tipos para darle una idea de cómo funcionan. Pero, dado que esta es una publicación de blog, no un curso de tipografía, pasemos a escribir familias.
Familias de tipos
El término «familia tipográfica» o «familia tipográfica» se utiliza para describir una gama de diseños que son todas variaciones de un tipo de letra básico.
Por ejemplo, verá que Proxima Nova tiene variaciones como negrita, extranegrita, negra, normal, ligera, cursiva clara y cursiva normal:
Cumplir con una sola familia tipográfica ayudará a agregar variación a sus diseños, al tiempo que los mantiene consistentes y uniformes.
Los diseñadores pueden usar varias fuentes dentro de una familia para crear un sentido de jerarquía, diseñando para que los elementos más importantes, como títulos y citas, se destaquen sobre el resto del texto.
Fuentes tipográficas
Antes de terminar aquí, pensé en dejarte algunos recursos excelentes sobre dónde encontrar fuentes gratuitas para descargar de la web, junto con ocho gratis los que seleccioné cuidadosamente de estos recursos para ayudarlo a comenzar.
Excelentes recursos para fuentes gratuitas
- «35 de las mejores fuentes gratuitas que deberías descargar»: Una publicación de blog de HubSpot que selecciona 35 de las mejores fuentes gratuitas en Internet.
- Fuentes de Google: Cientos de fuentes gratuitas de código abierto de Google que ya están optimizadas para la web.
- Comportamiento: Un gran recurso para encontrar hermosos trabajos de diseño, incluidas fuentes únicas que se pueden descargar gratis.
- HypeForTipo: Más de 25 000 diseños tipográficos de los mejores diseñadores, muchos de los cuales están disponibles para descargar de forma gratuita.
8 Fuentes geniales que se pueden descargar gratis
1) Texto carmesí
Aquí hay uno que es genial para el cuerpo del texto. Estaba destinado a la producción de libros, según Google. Fuentes, por lo que es fácil de leer. Pero al mismo tiempo, hay muchas cosas que lo hacen especial: cifras de estilo antiguo, versalitas, florones y caracteres matemáticos y similares. Viene en tres estilos: Regular, Light y Bold, junto con los estilos en cursiva de esos pesos.
2) Harmatán
Harmattan es un tipo de letra en Google Fonts que originalmente estaba destinado a adaptarse a las escrituras árabes, pero también se ve muy bien en los caracteres latinos, y le encantaría el atractivo en el título o en el cuerpo del texto.
3) Torcao
Torcao es una combinación única de letras que son «mitad cuadrado, mitad círculo», robustas y técnicas a la vez que alegres y atractivas. Es un gran tipo de letra para titulares, pero sigue siendo bastante legible en textos más largos. La familia viene en nueve pesos (delgado a negro) y tiene selecciones condensadas y extensoras para un conjunto completo de cuarenta y ocho fuentes.
4) Rey Basilio
Esta fuente de pincel gratuita publicada en Behance es ideal para materiales comerciales como imágenes de redes sociales y volantes. Es una versión Lite de «Full King Basil» del diseñador y contiene muchos caracteres decorativos y letras conectadas que crean una hermosa fuente similar a un guión.
5) Buen Tiempo
Merriweather fue diseñado para ser un tipo de letra agradable y fácil de leer en las pantallas, lo que lo hace perfecto para un activo web como su página de inicio o blog. Es un proyecto en evolución en Google Fonts y se actualizará, pero en este momento encontrará cuatro estilos: regular, claro, negrita y negro, junto con los estilos en cursiva de esos pesos.
6) Poiret Uno
Poiret One es uno de mis favoritos desde hace mucho tiempo. Se describe en Google Fonts como «un grotesco geométrico fresco, decorativo, con un toque de Art Deco y constructivismo». Es elegante, simple, decorativo y excelente para textos cortos. Pruébelo en letreros grandes, etiquetas, carteles, camisetas, títulos o titulares.
7) Norte verdadero
Un tipo de letra de título de inspiración vintage de HypeForType con dieciséis estilos diferentes y un guión monolínea. También incluye etiquetas y extractos gratuitos como animales salvajes, números, símbolos, herramientas y otros íconos. True North viene con etiquetas, extractos y pancartas gratis. El extracto incluye animales salvajes, lemas, números, símbolos, herramientas, hojas de arce y árboles. True North es una fuente de título con mayúsculas alternas.
8) Valentía
Aquí hay una fuente gratuita genial publicada en Behance creada por un creador de fuentes profesional que tuvo la amabilidad de acompañar la descarga gratuita con las maquetas a continuación. Estas maquetas muestran a las personas cómo pueden jugar con la fuente en sus propios diseños. Viene solo en letras mayúsculas y números, y es ideal para titulares o imágenes de redes sociales como las siguientes.
Por supuesto, siempre hay más que puedes aprender cuando se trata de tipografía. Cuando los diseñadores gráficos obtienen un título, generalmente tienen que pasar por varias rondas de cursos de tipografía para convertirse en profesionales.
Pero ahora conoce algunos términos clave para comenzar y, como mínimo, podrá sonar súper inteligente cuando hable con sus amigos diseñadores.
¿Quieres más consejos de tipografía? Echa un vistazo a esta publicación sobre la relación entre las fuentes y los sentimientos.
Nota del editor: esta publicación se publicó originalmente en junio de 2014 y ha sido actualizado para su frescura, precisión y exhaustividad.
