Página principal » Diseño web » 15 herramientas de tipografía en línea que todos los diseñadores deben saber

    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