Cómo elegir las tipografías de tu marca

Las tipografías hablan antes que las palabras. Una letra gruesa y alta grita, una serifa fina susurra y una manuscrita se siente personal. Para cubrir toda una marca te alcanzan dos tipografías y unas cuantas reglas que las mantengan legibles. En esta lección ves cómo elegirlas, combinarlas y prepararlas para el papel y para la web.

Tipografía y fuente, en palabras simples

Una tipografía es una familia de diseño, como Inter o Georgia. Una fuente es una versión concreta de esa familia: un grosor, un estilo y un tamaño, por ejemplo Inter en negrita a 16 píxeles. En la charla de todos los días se dice "fuente" para las dos cosas, y no pasa nada. Lo importante es que una tipografía suele venir en varios grosores, de fina a negrita, con su cursiva, y por eso una sola familia puede hacer muchos trabajos. Esa es la razón de que dos tipografías alcancen para casi todas las marcas.

Cinco clases de letra y lo que dicen

Cada tipografía tiene su personalidad, y se nota antes de que alguien lea una palabra. Estos son los grupos principales.

Con serifa: tradicional, editorial, refinada

Las serifas son los pequeños remates que tienen las letras en los extremos de los trazos. Dan una sensación de solidez y de cultura, y por eso las usan libros, periódicos, estudios de abogados y casas de perfumes. Una serifa con mucho contraste entre los trazos gruesos y los finos se ve elegante. Éclore, uno de nuestros diseños de ejemplo para una casa de perfumes de París, escribe su titular con una de esas serifas y suma una letra manuscrita para la línea chica de arriba. El párrafo de abajo va en una letra limpia sin serifa.

Sin serifa: limpia, moderna, amable

Sin serifa quiere decir "sin remates". Son tipografías de aspecto simple y abierto, que se leen bien en pantalla, y por eso son la opción segura para casi todas las webs. Un grosor fino en un tamaño grande transmite calma y amplitud. Fielden, nuestro diseño de ejemplo para una marca de ropa, escribe su titular en una letra fina sin serifa en un tamaño muy grande, con la segunda línea en gris, y arma el párrafo con una tipografía hermana de la misma familia.

De serifa gruesa: sólida, de aire libre, artesanal

La serifa gruesa, que en inglés se llama slab serif, tiene remates anchos y rectangulares. Se siente firme y un poco rústica, y le va bien a los negocios de aventura, de oficios y de talleres. Snowmelt Rafting Co., nuestro diseño de ejemplo para una empresa de descenso de ríos, escribe el titular con una serifa gruesa muy pesada y el texto con una letra simple sin serifa. El contraste entre las dos mantiene la página fácil de leer.

Manuscrita: personal, elegante, hecha a mano

Las tipografías manuscritas imitan la escritura a mano. Aportan calidez y un toque humano, como se ve en la línea rosada de la página de Éclore. Úsalas en dosis chicas: un saludo, una firma, una frase corta. Un párrafo entero en manuscrita cansa la vista.

De titulares: llamativa, hecha para tamaños grandes

Las tipografías de titulares, o display, se diseñan para verse grandes y con mucha personalidad. Highway Roast, nuestro diseño de ejemplo para una marca de café en lata, escribe su titular con una tipografía muy pesada, alta y angosta, en mayúsculas, que parece un afiche. Como texto de párrafo sería ilegible, y no está hecha para eso.

Cómo elegir tus tipografías en cinco pasos

Paso 1: Parte de la sensación de la marca

Toma las tres palabras que describen tu marca y pregúntate qué clase de letra les va. Tranquilo y preciso apunta a una letra fina sin serifa. Cálido y confiable puede apuntar a una serifa amable. Rústico y honesto puede apuntar a una serifa gruesa. Anota la respuesta antes de mirar ninguna fuente.

Paso 2: Combínala con tu logo

Tus tipografías deben sentirse emparentadas con tu logo. Si el logo tiene letras redondas y suaves, elige tipografías redondas y suaves. Si usa mayúsculas angostas y filosas, busca algo que aguante al lado. Puedes usar la misma tipografía del logo para los títulos, o una más discreta que comparta su ánimo.

Paso 3: Elige una para los títulos y otra para el texto

La de los títulos puede tener carácter. La del texto tiene que ser discreta y cómoda en pasajes largos. Si prefieres usar una sola tipografía, elige una familia con muchos grosores y deja que el grosor haga el trabajo.

Paso 4: Combínalas con cuidado

Dos tipografías se llevan bien cuando son claramente distintas o claramente parientes, y chocan cuando son casi iguales. Una letra de titulares pesada con una letra discreta sin serifa es una pareja segura. Una serifa con una sin serifa, también. La pareja más fácil de todas es una familia diseñada en conjunto: Lodestar, nuestro diseño de ejemplo para un hospedaje, combina Alegreya, una letra con serifa, con Alegreya Sans, una sin serifa dibujada como su compañera. Fielden usa Inter Tight para los títulos e Inter para el texto, dos diseños hermanos. Para armar la jerarquía, usa el grosor, el tamaño y el color antes de sumar una tercera tipografía.

Paso 5: Pruébalas con tus propias palabras

Escribe el nombre de tu negocio, un titular, un párrafo, un precio y un teléfono con cada candidata. Míralas en un celular y en una laptop. Después comprueba los caracteres que necesitas, y ahí aparece un detalle que importa mucho en tu caso.

Comprueba que la tipografía hable tu idioma

A muchas tipografías de titulares les faltan letras. Si escribes en español, prueba á, é, í, ó, ú, ü, ñ, ¿ y ¡, en minúsculas y en mayúsculas. Una fuente que no los tenga mostrará un cuadrito vacío o tomará prestadas las letras de otra fuente, y eso se ve mal. Lo mismo vale para los nombres con acentos en cualquier idioma. Si atiendes a clientes que hablan inglés y español, elige una familia cuyo juego de caracteres cubra los dos idiomas y pruébala antes de decidir.

Haz que el texto se lea con facilidad

• Tamaño. El texto del cuerpo en pantalla debería medir unos 16 píxeles o más. El texto chico es la queja más común en los celulares.
• Espacio entre líneas. Deja alrededor de una vez y media el tamaño de la letra entre una línea y otra. Las líneas apretadas cansan.
• Largo de línea. Apunta a unos 45 a 75 caracteres por línea. Con líneas más largas la gente pierde el hilo.
• Contraste. Texto oscuro sobre fondo claro, o al revés, con diferencia suficiente para leerse a pleno sol.
• Mayúsculas. Úsalas en pocas palabras, como una etiqueta. No las uses en párrafos.
• Grosor. Evita los grosores muy finos en texto chico, y no los pongas sobre fotos.
• Alineación. Alinea los párrafos a la izquierda. El texto centrado va bien en un título o en dos líneas, no en un bloque largo.

Una escala de tamaños sencilla para copiar

Una escala tipográfica es una lista corta con el tamaño de cada clase de texto. Mantiene las páginas ordenadas y te ahorra decidir un tamaño cada vez. Este es un punto de partida para una web, que puedes ajustar.

• Título principal: de 40 a 56 píxeles, en grosor medio o negrita.
• Título de sección: de 28 a 32 píxeles.
• Subtítulo: de 20 a 24 píxeles.
• Texto de los párrafos: de 16 a 18 píxeles, en grosor normal.
• Letra chica y pies de foto: 14 píxeles, y nunca menos.

Anota la escala en la hoja de tu marca, junto a los nombres de las tipografías. En el celular los títulos se achican un poco, así que pide tamaños que se adapten a la pantalla. Lo importante no son estas cifras exactas, sino que haya un escalón claro entre un nivel y otro y que se aplique igual en todas las páginas.

Dónde conseguir tipografías y qué mirar de la licencia

Tienes tres fuentes principales. Google Fonts es una biblioteca abierta y enorme, y sus tipografías son gratuitas para uso comercial, incluso en logos, según las preguntas frecuentes de la propia Google. Las que vienen con tu computadora, como Arial y Georgia, son seguras pero comunes. Las tipografías de pago, que se compran a una casa tipográfica o con una suscripción, ofrecen diseños más exclusivos.

De donde sea que vengan, lee la licencia. Las tipografías de pago suelen tener licencias distintas para impresión, para webs y para aplicaciones, y algunas cobran según la cantidad de visitas. Comprueba que la licencia cubra su uso en un logo, porque no todas lo permiten. Guarda una copia de la licencia junto con los archivos de tu marca y no uses una tipografía que no pagaste. Las casas tipográficas controlan, y usar una fuente sin la licencia correcta puede terminar en un reclamo.

Las tipografías en tu web

Cada grosor de una tipografía es un archivo aparte que el celular de tu visitante tiene que descargar. Tres grosores cargan más rápido que diez. Pide el formato web compacto, que se llama WOFF2, o una fuente variable, que guarda muchos grosores en un solo archivo. Cuando se pueda, deja los archivos de las tipografías dentro de tu propio sitio, para que los visitantes no dependan de la conexión a un servidor de otra empresa, y elige una tipografía de respaldo parecida para el instante antes de que cargue la tuya. Una fuente lenta puede dejar espacios en blanco o hacer que la página dé un salto, y las dos cosas dan mala imagen. Todas las webs de ejemplo de esta lección cargan sus tipografías desde sus propias carpetas.

Errores de tipografía que conviene evitar

• Demasiadas tipografías. Dos alcanzan. Tres es el límite.
• Dos tipografías casi iguales. La diferencia parece un error y no una decisión.
• Una manuscrita o de titulares para los párrafos. Se vuelve difícil de leer después de una frase.
• Texto fino y pálido sobre una foto. Desaparece.
• Una tipografía de moda o de novedad. Envejece tu marca más rápido que cualquier otra decisión.
• Olvidarte de los acentos y los símbolos. Prueba todos los idiomas en que escribes.
• Usar una tipografía sin licencia. Puede convertirse en un problema legal y económico.
• Usar tipografías distintas en cada canal. Una web, un menú y un volante deberían verse emparentados.

Tus tipografías y tu web

Las tipografías cargan con buena parte de la personalidad de una web, y tienen que funcionar en todas las pantallas. Cuando diseñamos tu sitio, definimos la tipografía de los títulos y la del texto una sola vez y las mantenemos iguales en todas las páginas, en el celular y en la computadora. Si ya tienes tipografías de marca, dinos sus nombres y envía la licencia. Si no, elegimos unas legibles que encajen con tu rubro. Puedes ver cómo distintas tipografías cambian el aire de una página en nuestros diseños.

Preguntas frecuentes