Saltar al contenido principal

4.4. Tipografía

Los criterios para realizar el casting de tipografías, son los siguientes:

1. La tipografía de palo seco. La gráfica se basa en el concepto de simpleza establecido por Francesco Cirillo, jugando con elementos geométricos y simples. Las características de una tipografía de palo seco geométrica o grotesca, cumplen con el requisito.

2. Números tabulares. Como los números están animados, es crucial que cuente con números tabulares, ya que el cambio de números provocaría que la composición "baile" y que tenga un aspecto poco cuidado.

3. Tipografía variable. Por cuestiones estéticas, eficiencia y porque la tecnología lo permite.

4. Debe funcionar bien en cuerpos pequeños y grandes

Todas las tipografías comparadas

La selección resultante es la siguiente:

Circular de Lineto1#

La primera fuente que me vino a la cabeza. Cumple con los requisitos, aunque no es variable. Las características geométricas encajan con la gráfica establecida. Una opción segura y clásica, que cuenta con el hándicap de que ya ha sido demasiado utilizada.

Atlas de Commercial Type2#

Otra excelente opción, en el mismo caso de la Circular, no cuenta con una versión variable. La altura de la X es muy elevada, por lo que es perfecta para utilizarla en textos pequeños. Las ascendentes elevadas y las descendentes cortas la hacen ligera, creando composiciones espaciosas. Los ojos de las letras son muy grandes, esto favorece la legibilidad en cuerpos pequeños.

Recursive de Arrow Type3#

Se aleja de los criterios definidos, pero es un claro ejemplo de las posibilidades que tienen las fuentes variables y su futuro como estándar en el entorno web e incluso en el área del print. Tiene un diseño atrevido y con gran personalidad, incluso con su variante "Casual". Aun que no se puede aprovechar, define muy bien el estándar de las características que debe poseer una fuente variable.

ITC Avant Garde Gothic de ITC4#

Múltiples caracteres y con una personalidad, a mi parecer, retro futurística. Tiene demasiada personalidad para este proyecto. También está ligada a una estética retro futurista, que no interesa para el proyecto.

Avenir de LinoType5#

Una tipografía similar a Circular en cuanto a cualidades. Cuenta con terminales más rectas o diagonales. Le pueden dar al diseño un carácter serio y neutro.

Matter de Displaay6#

Formas clásicas de las sans serif, con un toque más atrevido. Una colección de pesos interesante. Poco común y con versión de fuente variable. Una de las posibles candidatas.

FK-Display de Florian Karst7#

Formas con una personalidad futurista. Tiene unos detalles ligeramente ligados a las famosas trampas de tinta, que tanto se están popularizando.

Inter de Rasmus Anderson (Open Source)8#

Tipografía por excelencia utilizada por diversos proyectos de código abierto. Perfecta para interfaces, pero con poca personalidad. Inspirada en la tipografía del sistema de Apple San Francisco. Buena elección como tipografía de soporte.

Manrope de Mikhail Sharanda (Open Source)9#

Una tipografía similar a Inter, pero con un carácter más neo futurista. Quedando muy bien en interfaces que requieran de números. Tiene ciertos defectos en algunos de sus caracteres, pero tiene una interesante variedad de pesos.

PT Root UI de Paratype10#

Esta fuente se encuentra en un punto intermedio entre Inter y Manrope. Dispone de una amplia variedad de caracteres. Tiene una variedad de pesos limitada.

NAME SANS de Arrow Type11#

Aunque está bajo desarrollo, es una sans-serif con una personalidad discreta pero presente y con una extrema gama de pesos y variable. Reúne gran parte de las cualidades distribuidas en las tipografías previamente comentadas. En el siguiente apartado se comenta más en detalle, el por qué de su elección y los caracteres en detalle.

NAME SANS de Arrow Type#

Name Sans es una interpretación moderna de los mosaicos de nombres del metro de Nueva York. Es una tipografía que ofrece tres familias: Display, Standard y Text. Estas tres versiones permiten que sea utilizada en diferentes tamaños, siendo perfecta para utilizar solo una fuente en la interface sin perder su personalidad.

Styles of Name Sans v0.5

↑ Estilos de Name Sans v0.5, imagen cortesía de la fundición Arrow Type.

Para experimentar y conocer la tipografía en detalle recomiendo visitar su mini site: name.arrowtype.com y conocer sus detalles en este blog post.

Testeo y previsualización de fuentes variables#

Para poder observar todas las características de las fuentes variables12 se ha utilizado la herramienta Font Gauntlet, de la fundición suiza Dinamo13. Con esta herramienta se puede simular y jugar rápidamente con los diferentes ejes variables de cada tipografía. A continuación se muestra un ejemplo con la tipografía escogida.

Dinamo font gauntlet preview


  1. Lineto. (s. f.). Lineto.com. Circular by Lineto. Recuperado 26 de marzo de 2021, de https://lineto.com/typefaces/circular?tab=specimen&text=hamburgerfonstiv&font=dDJf05SeVdb&tracking=0#book
  2. Commercial Type » Catalog » Atlas Grotesk Medium. (s. f.). Atlas Grotesk Medium. Recuperado 26 de marzo de 2021, de https://commercialtype.com/catalog/atlas_grotesk/medium
  3. Type, A. (s. f.). Recursive Sans & Mono. Recursive by Arrow Type. Recuperado 26 de marzo de 2021, de https://www.recursive.design
  4. Font Family Page. (s. f.-b). ITC Avant Garde Gothic. Recuperado 11 de abril de 2021, de https://www.myfonts.com/fonts/itc/avant-garde-gothic/
  5. Font Family Page. (s. f.-c). Avenir. Recuperado 11 de abril de 2021, de https://www.myfonts.com/fonts/linotype/avenir/
  6. Matter. (2021, 23 febrero). Displaay Type Foundry. https://displaay.net/typeface/matter/
  7. Florian Karsten Typefaces. (s. f.). FK Display | Florian Karsten Typefaces. FK Display. Recuperado 11 de abril de 2021, de https://fonts.floriankarsten.com/fk-display
  8. Anderson, R. (s. f.). Inter font family. Rsms.Me/Inter. Recuperado 11 de abril de 2021, de https://rsms.me/inter/
  9. Sharanda, M. (s. f.). Manrope -- free sans-serif variable font. Manrope. Recuperado 11 de abril de 2021, de https://manropefont.com/
  10. Paratype, Inc. (s. f.). PT Root UI. PT Root UI. Recuperado 11 de abril de 2021, de https://www.paratype.com/fonts/pt/pt-root-ui/vf
  11. Arrow Type. (2021, 26 mayo). The Story of Name Sans, So Far. The Arrow Type Blog. https://blog.arrowtype.com/name-sans-v05/
  12. Introduction to variable fonts on the web. (s. f.). web.dev. Recuperado 19 de marzo de 2021, de https://web.dev/variable-fonts/
  13. Janes, R. & Dinamo Typefaces. (2019). DINAMO Font Gauntlet (v0.8) Font Gauntlet ofrece una selección de funciones para probar y analizar los tipos de letra durante el proceso de diseño y se ha creado específicamente pensando en las fuentes variables, lo que permite una vista previa animada de todos sus ejes combinados. DINAMO Font Gauntlet. https://dinamodarkroom.com/gauntlet/