Acceso a las actualizaciones   Solicitar

El generador de escalas tipográficas

EscalaFont es la herramienta en la nube que tiene todo lo que necesitas para crear una escala tipográfica, selecciona el tipo de proporción, el tamaño base, la familia tipográfica, el grosor de la letra y obtén un resultado visual con los niveles. Copia el resultado en código CSS y la configuración de TailwindCss.

Estas funcionalidades son y serán siempre gratis.

Comienza ahora

No requiere iniciar sesión

Código al instante

Copiar y pegar

Impulsa tu negocio de +50 empleados

Visualiza

Todos los tamaños

Arrow
Hero Img

Resultados a un clic de distancia

La herramienta de diseño tipográfico que necesitas

Visualiza en tiempo real el resultado del cálculo de la escala tipográfica que se obtiene partiendo del tamaño del texto base o cuerpo de texto y la proporción que desees usar. Utiliza el resultado como guía de estilos para tu diseño web o editorial (Major second, Major Third, Major Fourth y muchos más).

Hero Img

Soluciones EscalaFont

Ventajas de Escala Font

Las soluciones de digitalización ofrecidas abarcan desde herramientas de oficina virtual hasta gestión de redes sociales. Estas soluciones están diseñadas para satisfacer diversas necesidades empresariales.

descriptive text
Escala de tamaños de fuentes

Obtén la vista previa y las medidas de los tamaños de cada tipo de título, encabezado y cuerpo de texto.

descriptive text
Medidas en píxel, rem y puntos

Cambia la unidad de medida a rem o pt según el soporte o contexto en el que vas a trabajar. Puedes usar la escala para Diseño Web y para Diseño Impresa, haciéndolo compatible para todo tipo de Diseñador.

descriptive text
Vista previa web/blog e impresa

Una vez tengas la escala deseada, podrás ver cómo quedan los tamaño en una vista previa real de sitio web/blog y en una página impresa. Visualiza el resultado al instante.


Estas ventajas serán siempre gratis

Accecede a las nuevas funciones

Entérate cuando esté disponible

Escala Font está en su versión beta abierta al público. Si quieres estar actualizado de los lanzamientos y novedades, suscríbete ahora y no te pierdas nada. Serás el primero en probar lo nuevo de la herramienta. ¡Prometido!

Suscríbete ahora

¿Por qué usar una escala de tipografía?

Una escala de fuentes nos brinda consistencia y contraste a lo largo de todo el diseño de la aplicación o impreso. En el proceso de diseño siempre es necesario definir los tamaños que tendrán los niveles de lectura, título, subtítulo, párrafo o lo que en otras palabras en diseño web y front-end HTML/CSS serían los encabezados h1, h2, h3, p, small y el resto. Con EscalaFont tendrás la guía de estilo de tipografía al instante con solo configurar un par de parámetros.

Ten en cuenta que partimos del texto base, cuerpo de texto o etiqueta, en pantalla el aconsejable es de 16px, pero siempre puedes variar en dependencia de tus necesidades. Este tamaño sería de 12pt en soportes impresos.

Una vez obtenido el tamaño base seleccionamos la proporción o factor de escala, también conocido como el radio. por ejemplo el Major Second es 1,125, esto significa que para obtener los siguientes tamaños, en ascendente o descendente se multiplicará la base por el radio y así sucesivamente para obtener las diferentes proporciones o jerarquías.

Hero Img

Misión y visión

¿Por qué surge Escala Font?

Este proyecto surge como una alternativa a Type Scale para ayudar a los diseñadores y programadores webs que no pueden pagar una herramienta solamente para obtener el código de configuración css o Tailwindcss para su proyecto.

+100
Usuarios
Lista de espera
6
Parámetros
Personalizar Escala
Logo escalafont imagen de perfil
100%
Satisfacción
Esperada

Sobre el diseño de escalas y la App

Preguntas frecuentes

¿Puedo calcular una escala tipográfica personalizada?

Si, por supuesto. De momento Escala Font solamente usa 8 tipos de proporciones de escala o radios, aquellos que se consideran estándar, sin embargo tu puedes crear tu propia escala siguiendo la fórmula de cálculo de escala tipográfica. Solo tienes que multiplicar o dividir el tamaño base por el radio que escojas.

Por ejemplo, si tu base es de 16px y el radio de proporción que quieres seleccionar es 1.125, al multiplicarlo te dará 18px como resultado, este será el tamaño ascendente resultando un H6. El próximo tamaño ascendente se obtendrá multiplicando 18px por 1.125 y así sucesivamente.

En algunos casos la multiplicación te dará números poco precisos como 20.25px, el h5 del ejemplo anterior. A pesar de que en Escala Font te mostramos los números con comas, es recomendable que lo redondees para obtener un número entero.

¿Las escalas tipográficas son responsive?

Si escoges una escala tipográfica con poco contraste es posible que se adapte bien a cualquier dispositivo.

El problema ocurre cuando usas una escala de alto contraste como el Golden Ratio y algunos encabezados no se adaptan correctamente a un ancho pequeño de pantalla.

Actualmente Escala Font no te da por defecto una solución responsive a la escala seleccionada. Si te podemos aconsejar que alternes entre escalas tipográficas para ordenador o escritorio, por ejemplo usar Major third para monitor y Minor Third para móvil, o usar la misma proporción de escala pero en Monitor usar de base 16px y en móvil usar de base 14px. Puedes crear ambas escalas y copiar los valores en la App de Escala Font al instante.

¿Puedo solicitar una funcionalidad que necesito en la App?

¡Totalmente sí! La misión de Escala Font es poder ayudar a la mayor cantidad de personas posibles tanto en asuntos tipográficos como en soluciones en la aplicación web. Si tienes alguna sugerencia o solicitud no dudes en escribirme completando el formulario del siguiente enlace. Formulario de solicitud.

Ahora Suscríbete y sé el primero

¿Ya estás inscrito a la lista de novedades?

Si aún no lo has hecho es el momento, las próximas actualizaciones serán privadas durante los primeros meses y solo disponible para los suscriptores.

Solicitar