En todo proyecto elegir una tipografía adecuada es importante para el buen acabado de un proyecto de diseño. Dependiendo del proyecto es posible recurrir a las herramientas con las que podrás localizar esa tipografía que tanto te gusta, buscar nuevas combinaciones de tipos de letras o simplemente dejar volar tu imaginación e inspirarte con los ejemplos de otros trabajos.
Google Fonts es un directorio interactivo de uso libre bajo la aplicación que programa interfaces para fuentes de la web.
Es un servicio en línea que ofrece una biblioteca de fuentes por suscripción. Las fuentes pueden usarse directamente en sitios web o sincronizarse a través de Adobe Creative Cloud con aplicaciones en las computadoras del suscriptor
Los íconos de materiales son símbolos encantadores y bellamente elaborados para acciones y elementos comunes. En esta página puedes descárgalos en el escritorio para usarlos en tus productos digitales para Android, iOS y la web
DaFont es una buena opción para encontrar tipografías originales. Puedes buscar por estilo, popularidad, o por novedades, e introducir un texto de ejemplo para obtener una vista previa de la fuente antes de descargarla. Asegúrate de verificar las licencias antes de descargar las tipografías, ya que algunas no permiten el uso comercial.
Behance es una red de sitios y servicios especializada en la autopromoción, incluyendo consultoría y sitios de portafolio en línea. Es propiedad de Adobe.
Al igual que DaFont, Font Squirrel es un repositorio de fuentes, pero va un paso más allá al ofrecer fuentes completamente gratis para el uso comercial. Puedes buscar por categorías tales como Serif, Sans Serif, retro, o dibujado a mano. El buen diseño de la página hace que la búsqueda sea fácil y entretenida.
WhatTheFont! es un recurso increíble que resolverá ese problema. Tan solo tienes que subir una imagen de esa tipografía y la herramienta te dirá su nombre.
Type Genius encuentra la combinación perfecta para un tipo de letra y te ofrece ejemplos reales de tipografias que trabajan bien juntas.
Esta herramienta exhibe las mejores fuentes de Google en un escenario real. Una forma rápida y fácil de tomar una buena decisión para tus diseños.
Esta herramienta es la mayor base de datos de fuentes gratis, tanto para uso comercial como personal. Con más de 70.000 fuentes, su función de vista previa y la buena y gran cantidad de categorías que incluye, hacen de Font Park un recurso imprescindible para tus proyectos.
Una base de datos pequeña pero con estilo que incluye los tipos de letra más modernos, todos disponibles para su descarga bajo un “paga por lo que te gusta” donde se puede pagar desde $ 0 a +$ 1000.
Es otra base de datos de tipos de letra cuidadosamente seleccionadas, bonitas y gratis. Todas están elegidas a mano para asegurar la más alta calidad de estas tipografías.
Type wolf cataloga varias imágenes de tipos de letra de sitios web reales. Un gran recurso al que acudir cuando te falta inspiración.
Pero si requieres herramientas para conocer, interactuar y gestionar tipografías las siguientes te pueden ayudar:
Es una Herramienta que además de ayudarnos a averiguar las fuentes que utiliza una web, nos dirá la familia tipográfica a la que pertenece, el estilo, el tamaño, la altura de línea e incluso el color web utilizado.
Con esta herramienta podemos ver cualquier sitio de internet con una tipografía distinta. Solamente hay que seguir 3 sencillos pasos:
i. Escribir la url
ii. Elegir una tipografía
iii. y usar!
Es una herramienta que permite a los diseñadores previsualizar cómo quedarían diferentes combinaciones de fuentes en un mismo párrafo.
Es un blog que cuenta con distintos sitios web que basan su estructura y diseño en la tipografía. En él os facilitarán las fuentes que se hacen servir.
Golden Ratio Typography Calculator
Encontrar la tipografía óptima para conseguir la mejor legibilidad en nuestra web o blog requiere probar muchas configuraciones, de tamaño, alto de línea, ancho del contenido, etc.
Cada vez más son los diseñadores web que quieren prescindir de las imágenes basadas en bits como png o jpg, buscando contenido vectorial y escalable. Con esta idea se ha creado Font Awesome: Iconos escalables para nuestra web con bootstrap.
Tiff es una herramienta online para comparar tipografías, desarrollada en HTML5 y CSS3, por lo que lo único que necesitarás es un navegador web compatible, se recomienda Google Chrome o Mozilla Firefox.
Es una aplicación que sirve para definir los diferentes atributos de una fuente, ya sea tamaño, color y otras características deseadas, y obtener el código CSS para llevarlo a nuestra hoja de estilos.
Esta herramienta tan conocida por muchos, sirve para identificar tipografías a partir de una imagen. Es muy sencilla de usar, sólo con subir una imagen de la fuente que queremos identificar, el sistema nos mostrará los resultado de fuentes similares. Hay a veces que no consigue reconocerla, lo mejor es seguir sus recomendaciones (que esté lo más plano y horizontal posible, recortar el trozo donde salen las letras específicamente, mejor sobre colores planos, etc…) .
Typophile sería el complemento ideal al «What The Font» por si al final no conseguiste identificarla y además tienes bastante prisa en saberlo.
Type Genius
Type Genius es una herramienta que fue creada específicamente para ayudarnos a encontrar la perfecta combinación entre tipografías. Su funcionamiento es muy sencillo: simplemente debemos seleccionar una tipografía para comenzar y la web se encargará de encontrar una buena pareja.
Esta herramienta vendría a ser una especie de Tinder de las tipografías. Utilizando datos de Google Fonts, Font Flame nos muestra parejas de tipografías y podremos decir que nos gustan o las odiamos.
Aquí nos encontramos con algo diferente. Typ.io es una web en la que podremos ver diseños profesionales y qué tipografías han elegido para crearlos. Lo bueno es que podrás descargarlas directamente desde aquí.
slabText es un simple script que que corta los titulares en más líneas para rellenar perfectamente el espacio horizontal. El script calcula el número de caracteres ideales a establecer en cada línea dividiendo el ancho disponible según el tamaño de la fuente.
En pocas palabras, es un script divide los titulares en filas antes de cambiar el tamaño de cada fila para llenar el espacio horizontal disponible. El número ideal de caracteres para establecer en cada fila se calcula dividiendo el ancho disponible por el tamaño de fuente en píxeles; el script luego usa este recuento de caracteres ideal para dividir el título en combinaciones de palabras que se muestran como filas de texto separadas.
Gutenberg
Gutenberg es un kit tipográfico muy sencillo de utilizar, ideal para desarrolladores y diseñadores. Te ayudará a establecer el tamaño de la fuente, el espaciado y el ancho máximo. Gutenberg es un proyecto open source, así que siéntete libre de contribuir, adaptarlo o modificarlo.
Lining.js
Con el plugin Lining.js, tendrás control total sobre la tipografía de tu web. Es soportado por la mayoría d enavegadores modernos como Safari, Google Chrome, Opera y Mozilla Firefox.
Typebase.css
Typebase.css es una hoja de estilo tipográfica totalmente personalizable. Contiene tanto versión less como versión sass y se puede modificar sin problema alguno para proyectos web modernos.
FitText
FitText es un plugin que hace que el tamaño de la fuente de tu web sea flexible. Esto a ayuda a escarlar los titulares dependiendo de las resoluciones de pantalla, en otras palabras, a hacer que tu tipografía sea responsive. Esta hecho para mostrar únicamente texto de grandes dimensiones.
Kerning.js
Kerning.js te ayuda automáticamente a transformar, escalar y modificar tu tipografía con CSS. No tiene una curva de dificultad muy pronunciada, es fácil iniciarse en Kerning.js.
Typesettings.css
Typesettings.css es una plataforma para experimentar creando proyectos webs o blogs con diseños minimalistas. Todos los estilos tipográficos utilizados aquí están inspirados por la teoría básica dl diseño gráfico.
La tipografía más legible contiene entre 45 y 75 caracteres por linea pero desarrollar algo que respete esta medida es una tarea dura para los desarrolladores. Flowtype.js cambia el tamaño de tus fuentes y el espaciado en consecuencia con el ancho que tengas disponible en un elemento específico.
Blast.js
Blast.js te ayuda a separar texto para que sea más sencillo manipular la tipografía. Contiene cuatro delimitadores: carácter, palabra, frase y elemento. También detecta expresiones personalizadas y párrafos.
Typi
Typi es un saas que se utiliza para hacer que tu tipografía sea responsive de manera sencilla. Crea tamaños de fuentes y espaciados para HTML y otros elementos. También, Typi cuenta con una función de ritmo vertical para calcular los espaciados entre líneas.
State of Web Type
State of Web Type es una web que se actualiza con regularidad que ofrece datos sobre el uso de las tipografías en todo internet. Puedes usar el buscador o las categorías, para obtener información sobre, por ejemplo, el kerning, las fuentes capitales, la carga del CSS con respecto a las fuentes y mucho, mucho. Solo pide por esa boquita y state of web type te brindará la respuesta.
Typograph
Typograph es una web alucinante, y también un plugin de Sketch, que te permite un montón de opciones de edición con el texto, como por ejemplo: quitar dobles espacios o dobles saltos de carro, poner © escribiendo (c), transformar -> en →, y mucho más que tenéis que ver por vosotros mismos.
Comentarios recientes