15 herramientas de tipografía en línea que todos los diseñadores deben saber
La tipografía es la base de cualquier diseño, porque la lectura es una de las cosas más básicas que hacemos en la web. La tipografía que elija tiene un impacto en múltiples aspectos de un sitio web, incluyendo legibilidad, estado de ánimo y la experiencia del usuario en general. Es esencial para los diseñadores y desarrolladores Conocer los principios básicos de la tipografía. a crear diseños agradables legibles.
Ya hemos hablado de las herramientas de emparejamiento de fuentes, y hoy compartiremos con usted las herramientas de tipo que le permitirán lograr una mejor experiencia de lectura en los sitios web que construye o diseña..
Aquí están los complementos, herramientas en línea y scripts que le ayudarán a crear titulares impresionantes y texto legible limpio.
Tipo de plato
No tomará las decisiones de diseño por usted, pero definirá el marcado correcto con el estilo para las plantillas tipográficas comunes. También le puede dar consejos sobre cómo aplicar el estilo a la copia de texto correctamente..
Revisa: Demo | Documentación
Gutenberg
Gutenberg es un kit de inicio de tipografía flexible y fácil de usar para desarrolladores y diseñadores. Le ayudará a establecer el tamaño del tipo de base, la altura de la línea y el ancho máximo. Gutenberg es un proyecto de código abierto, así que siéntase libre de contribuir, adaptarlo y modificarlo..
Revisa: Demo | Documentación
Lettering.js
Lettering.js es un complemento de jQuery que le da control sobre el tipo de kerning. Le permite obtener diseño editorial con facilidad y administrar el código. El sitio web presenta ejemplos asombrosos de tipografías hechas con este complemento para inspirarse..
Revisa: Demo | Documentación
Typebase.css
Typebase.css es una hoja de estilo de tipografía personalizable. Contiene versiones saas y menos y se modifica fácilmente en proyectos web modernos.
Revisa: Demo | Documentación
FitText
FitText es un complemento que hará que los tamaños de fuente de su sitio web sean flexibles. Le ayudará a lograr titulares escalables para varias resoluciones de pantalla; en otras palabras, haga su tipografía sensible. Está hecho para mostrar sólo texto enorme.
Revisa: Demo | Documentación
Kerning.js
Kerning.js lo ayuda a transformar, escalar y modificar automáticamente su tipografía con CSS. Es fácil comenzar con Kerning.js.
Revisa: Demo | Documentación
Tipografía.css
Typesettings.css es tu área de juegos para crear proyectos web o blogs minimalistas. Todos los estilos de tipografía utilizados aquí están inspirados en conceptos básicos de diseño gráfico..
Revisa: Demo | Documentación
Mochila
Con Rucksack puede producir una increíble tipografía fluida gracias a una nueva propiedad sensible en el tamaño de fuente. Crear una tipografía responsiva es excepcionalmente fácil.
Revisa: Demo | Documentación
FlowType.JS
La tipografía más legible contiene entre 45 y 75 caracteres por línea, pero encontrar el equilibrio es una tarea difícil para los desarrolladores. FlowType.JS cambia el tamaño de la fuente y, posteriormente, la altura de la línea en función del ancho de un elemento específico.
Revisa: Demo | Documentación
Blast.js
Blast.js te ayudará a separar los textos para facilitar la manipulación de la tipografía. Contiene 4 delimitadores integrados: carácter, palabra, oración y elemento. También puede coincidir con expresiones y frases personalizadas..
Revisa: Demo | Documentación
texto de la losa
slabText es un script simple que divide los titulares en filas para completar perfectamente el espacio horizontal disponible. La secuencia de comandos calcula un número ideal de caracteres para establecer en cada fila al dividir el ancho disponible por el tamaño de fuente del píxel.
Revisa: Demo | Documentación
Tipo de escala
Con Type Scale puede obtener una vista previa y elegir la escala de tipo correcta para su proyecto. No hay reglas, solo juega con el tamaño de fuente, la escala y las diferentes fuentes web.
Revisa: Demo | Documentación
Tipográfico
Tipográfico le ayuda a hacer tipografía sensible. Todo lo que necesita hacer es seleccionar algunas fuentes, establecer algunas configuraciones y obtendrá una tipografía agradable y agradable..
Revisa: Demo | Documentación
Tipi
Typi es una mezcla de saas que puede usar para hacer tipografía sensible con facilidad. Crea tamaño de fuente y alturas de línea para HTML y otros elementos. Además, Typi tiene una función de ritmo vertical para calcular alturas de línea.
Revisa: Documentacion
Forro.js
Con el complemento Lining.js, obtendrá un control completo sobre la tipografía web. Es compatible con los navegadores más populares como Safari, Google Chrome, Opera y Mozilla Firefox.
Revisa: Demo | Documentación
Bono: 2 más herramientas!
Estado del tipo de web
State of the Web Type es un sitio web que ofrece datos actualizados sobre el soporte para tipos y funciones en la web. Puede usar la búsqueda o las categorías, como kerning, espacio entre mayúsculas, carga de fuentes CSS, y más para encontrar exactamente lo que necesita.
Tipografia
Typograph es un asombroso complemento web y de boceto que te permite poner espacios sin descanso después de las palabras de una letra, conecta el número y la unidad. También elimina espacios dobles, entradas, puntos y otros errores tipográficos, para que pueda lograr una tipografía limpia y hermosa que sea fácil de leer.
Revisa: Documentacion