13 herramientas tipográficas que todos los diseñadores deberían utilizar

La tipografía es la base de cualquier diseño, ya que leer es una de las acciones más básicas que hacemos en Internet. La tipografía que elijas tiene un gran impacto en múltiples aspectos de tu sitio web, incluyendo la legibilidad y la experiencia general del usuario. Es esencial para los diseñadores y desarrolladores que conozcan los principios básicos de la tipografía para crear diseños atractivos y legibles.

En este artículo voy a compartir con vosotros algunas herramientas tipográficas para lograr una mejor experiencia en la lectura de sitios/diseños que desarrolles. Aquí tienes plugins, herramientas online, y scripts que te ayudarán a crear texto legible.

slabText

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.

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.

Rucksack

Con Rucksack puedes producir tipografia fluida alucinante gracias a la nueva propiedad responsive del tamaño de las fuentes. Crear tipografía responsive es verdaderamente sencillo con esta herramienta.

FlowType.js

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.

Fuente: hongkiat.com

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.