Hay varias formas de poner texto en un contenedor y hacer que se dimensione a sí mismo para llenar ese contenedor. Hay diferentes tecnologías que podemos usar y diferentes consideraciones en las que pensar. Vamos a contar las maneras.
Número mágico con unidades de ventana
Si establece el tipo con vw (ancho de la ventana gráfica), puede encontrar un número exacto en el que el texto se ajuste bastante al contenedor y no se rompa al cambiar el tamaño. Yo llamaría a esto un número mágico.
En este caso, font-size: 25.5vw; funciona hasta una ventana gráfica de 320px, pero aún se romperá mucho más bajo que eso.
Vea el texto ajustado a lápiz con unidades de ventana de Chris Coyier (@chriscoyier) en CodePen.
Esta es una especie de versión menos exótica de la tipografía fluida, que implica más una pizca de unidades de visualización y tamaños mínimo / máximo.
FitText
FitText de Dave Rupert está listo para el trabajo. Todavía necesita un número un poco mágico para obtener el tamaño adecuado para cualquier trabajo en particular:
Vea el texto ajustado a lápiz con FitText de Chris Coyier (@chriscoyier) en CodePen.
FitText sin jQuery
Si no está usando jQuery, hay opciones. Listado del repositorio:
- FitText no jQuery de @adactio
- Angular.js FitText.js de @patrickmarabeas
- Texto de ajuste de AMP-HTML
- FitText UMD por @peacechen
Ejemplo del primero:
Vea el texto ajustado a lápiz con FitText (sin jQuery) de Chris Coyier (@chriscoyier) en CodePen.
textFit
¡Cambie las palabras en FitText y obtendrá textFit! Es otra biblioteca de JavaScript que ajusta el tamaño de la fuente para que quepa el texto en un contenedor. Sin embargo, hay una gran advertencia aquí: textFit está diseñado para dos dimensiones. Entonces necesitas un width y height en el elemento para que haga su trabajo.
Vea el texto ajustado a lápiz con textFit de Chris Coyier (@chriscoyier) en CodePen.
apto
fitty se parece más a FitText en el sentido de que cambia el tamaño del texto para maximizarlo solo horizontalmente, pero en realidad parece que no requiere números mágicos.
Vea el texto ajustado a lápiz con fitty de Chris Coyier (@chriscoyier) en CodePen.
TextFill
TextFill está basado en jQuery y requiere un ancho, alto y un tamaño de fuente máximo configurado para funcionar. Aquí está la demostración básica con la que hemos estado trabajando:
Vea el texto ajustado a lápiz con TextFill de Chris Coyier (@chriscoyier) en CodePen.
Tipo de flujo
FlowType está diseñado para funcionar en un documento completo de texto, redimensionándolo todo de manera fluida a la vez, con tamaños mínimos y máximos de ventana gráfica. Pero puedes medirlo como quieras. También aplica un número mágico para obtener las cosas como las desea.
Consulte el texto ajustado a lápiz con FlowType de Chris Coyier (@chriscoyier) en CodePen.
Solo usa SVG
Con width: 100% y un viewBox, SVG será un cuadro de tamaño completo que cambia de tamaño con una relación de aspecto. ¡Un truco bastante bueno! Para configurar el tipo, necesitará algunos números mágicos para obtener eso viewBox justo y empuja el texto en el lugar correcto, pero es factible sin dependencias, al igual que la demostración de unidades de ventana gráfica.
Vea el texto ajustado a lápiz con SVG de Chris Coyier (@chriscoyier) en CodePen.