VitaCora

3. Tipografias

7 min read

Fonts Web Resources:

Download Fonts

Basic Fonts

Encontrar fuentes

OTHERS

TIPOGRAFIAS

Fuentes y Tipografías: las tipografías son las fuentes, por ejemplo roboto, arial.. mientras que las fuentes son “roboto bold”, “arial italic”…

FuenteTipografia

Tipos de tipografías

El mundo tipográfico se divide principalmente en dos grupos, Serif y Sans Serif

Serif

tienen terminaciones y detalles en cada carácter, su vez dentro de este tipo hay subgrupos como Didone, estilo antiguo, egipcio, moderna, slab…

Serif

San Serif

se distinguen por no tener estos detalles en los caracteres, a su vez también se dividen en subgrupos como; humanista, geométrica, neo grotesca, gótica

SanSerif

Monoespaciadas

son otro grupo el cual puede ser Serif o San Serif pero se caracteriza por que cada carácter dispone del mismo ancho.

Monoespaciadas

Display

Son otro grupo que puede tener características de Serif o San Serif pero están pensadas para ser vistas en lugares mucho más grandes, como títulos de carteles, textos grandes en una web, no tanto para bloques de texto.

Monoespaciadas

Info

Mientras no se tiene suficiente conocimiento tipográfico es mejor no usar más de dos tipografías/fuentes para un diseño, una vez se conocen bien las reglas.

Combinación de tipografías

El contraste es la clave para combinar tipografías, algunas de las formas más fáciles de combinar tipografías son:

Combinar 2 tipografías: San Serif + Serif.

Combinar2

Combinar 1 tipografía: Utilizar diferentes pesos.

combinar1

Combinar diferentes pesos

combinar1 combinar1

Consejo para combinar tipografías:

Intercalar pesos;

Es decir que haya al menos un salto para generar algo de contraste.

Intercalar

Mantener pocas variables;

Una para títulos, otra para subtítulos, otra para textos y en caso de ser necesario otra para “call to actions”. Esto genera jerarquía y estabilidad y sensación de profesionalidad.

Variables

Mantener el mismo tamaño;

Mismo tamaño en los diferentes bloques de texto, es decir, si hay varios títulos que tengan el mismo tamaño, lo mismo con los subtítulos y párrafos.

tamaños

Espacio negativo:

En ocasiones hay títulos en los que es mejor dejar el espacio entre letras en negativo (-5, -10, -20) siempre que no lleguen a tocarse.

Observar carteles:

Observar carteles que “no leerlos” es útil para analizar como están diseñados, compuestos, como se ha usado la tipografía, cuantos estilos hay.

Respetar jerarquía visual:

Gracias a ella se consigue guiar a los ojos del espectador de lo más a menos importante, por ello hay que buscar tipografías que permitan establecer una separación visual entre los diferentes niveles jerárquicos:

tamaños

Info

hay que tener en cuenta la fuente, variables tipográficas, tamaño espacio.

Como elegir tipografías

De la misma forma que hay que elegir el vestuario de acuerdo a la ocasión; causal, formal, extravagante…, en la tipografía pasa igual, hay que preguntarse cosas como:

  • ¿Que tan legible es?, ¿Es para un logo?, ¿Es para un cartel?, ¿Tiene los caracteres completos?, ¿Tiene Ñ? ¿Es para imprimirse o digital?…

Info

No usar fuentes sin licencia para evitar riesgos y dar preferencia a licencias OFL, PGL y Apache.

Personalidad de las tipografías:

hay tipografías más serias y formales como Times New Roman o Barkerville, las hay más modernas y minimalistas como Helvética o Inter, tambien amigables como Nunito, Quicksand.

Hay que analizar si la tipografía es seria, divertida, sus características…

Jerarquía de tipografía:

  • primario: titulares, secundario: subtítulos pequeños bloques de texto, terciario: texto principal.

  • Jugar con diferentes tipos de fuentes y estilos y sus variables como interlineado, cursiva…

  • Respetar el espacio entre elementos para mantener su importancia individual, jerarquía sobre el resto de los elementos y el principio de proximidad para ordenar.

  • Respetar como la mente percibe la información visual como un conjunto y no de forma individual para generar armonía o destacar un elemento:

  • Orden: izquierda derecha, arriba abajo, reconociendo patrones.

  • Proximidad: percibir elementos cercanos u alejados como un grupo.

  • Similitud: elementos similares en color, forma, tamaño como un grupo o categoría.

  • Continuidad: La mente tiende a seguir líneas o patrones continuos

  • Cierre: La mente completa formas incompletas o vacíos para crear un todo.

  • Ley de la figura y el fondo: La mente distingue un objeto (la figura) de su entorno.

Golden Ratio Proportions

Proporción Aurea

La proporción áurea (o número áureo, Φ) es una relación matemática aproximada de 1.618 que se encuentra en la naturaleza, el arte y la arquitectura, creando armonía visual, y está ligada a la secuencia de Fibonacci, donde la división de un número entre su anterior se acerca a Phi.

Representa una estética de belleza y equilibrio, aplicándose para dividir un todo en dos partes donde la relación entre la mayor y la menor es igual a la relación entre la mayor y el todo.

Usar la proporción aurea puede ser útil a la hora de encontrar el tamaño perfecto para diferentes elementos

Para ello hay que; Dividir el valor del elemento más grande entre 1.618, y para obtener el siguiente valor pegar el anterior y volver a dividir entre 1.618

Tipografía recomendadas

Proyectos digitales y UI:

  • Inter: esta hecha para pantallas, muy legible en tamaño pequeño y bien espaciada.
  • Roboto: tipografiad e Android, moderna, neutra y optimizada para pantallas.
  • IBM Plex Sans: cuenta con una familia de fuentes y variantes tecinas enorme.

Parrafos y bloques de texto:

  • Source sans: la familia completa de Adobe es ideal para cuerpos de texto, gratuita y versátil.
  • Merriweather: fue diseñada para ser atractiva visualmente y fácil de leer en pantalla, con una altura muy grande, formas de letra ligeramente condensadas con un acento diagonal grande, serifas muy robustas y abiertas para facilitar su lectura en textos pequeños.
  • Noto: pensada para trabajar en múltiples idiomas y entornos internacionales.

Títulos, Branding y desarrollo de marca:

  • Playfair: sofisticada, clásica, funciona muy bien en titulares con peso.
  • Space Grotesk: moderna, estilo sutil y bastante personalidad, recomendada para titulares de estilo contemporáneo.
  • Anton: San serif superbold y compacta, ideal para titulares grandes con presencia fuerte.

Para todo tipo de uso:

  • Helvética neue / Neue Hass Grotesk: clásico, neutral, limpia, profesional.

  • Monserrat: muy usada en branding, visualmente atractiva pero precaución con los pesos.

  • Archivo: diseñada para funcionar tanto en impresión como pantalla, diseño robusto y neutral, ideal para textos largos y titulares.

  • Manrope: moderna, equilibrada, para algo fresco y distinto.

Others Usefull

Tutorial - Lettering

Licencias

A la hora de instalar una tipografía lo que se adquiere es la posibilidad de uso, sin embargo la licencia puede ser limitada según el proyecto, cliente, soporte, audiencia…

Las tipografías pueden ser adquiridas en paginas como: google fonts, Adobe fonts, Datfont.

Código libre/abierto:

Ofrecen libertad para usar, modificar y redistribuir bajo ciertos requisitos, generalmente bajo el marco del “Copyleft” siendo algunas de las licencias de software libre más usadas en tipografía OFL, GPL y Apache.

Gratuitas para uso comercial

Suelen permitir el uso de la fuente en proyectos que generen ingresos a cambio de dar créditos al autor, sin embargo su uso suele ser muy limitado y suelen ser poco atractivas.

Gratuitas para uso personal:

aunque se ofrecen de forma gratuita su uso es para proyectos no lucrativos siendo un campo ambiguo de justificar.

Dominio publico: sin licencia, uso libre al no estar protegidas por la ley de propiedad intelectual ya sea porque expiraron o renunciaron a sus derechos.

De pago

Pueden dividirse según su uso permitido:

  • Licencias de escritorio: logos, diseños, envases de producto…
  • Licencias web: Paginas web, dominios contratados…
  • Licencias app: Android, IOs, Windows…
  • Licencias E-doc: Libros, revistas…
  • Licencias Digital Ads: anuncios de internet, email, marketing
  • Licencias servidores: alojar la tipografía para que terceros la usan remotamente

Info

En general todas las licencias se renuevan automáticamente, salvo las de escritorio que son de un unico pago por instalación

Graph View