Adaptar un texto a un contenedor con CSS

En ésta entrada vamos a explicar como ajustar o adaptar cualquier texto a un contenedor, de manera que será responsivo en cualquier resolución adaptándose al tamaño del propio contenedor que lo contenga, es decir, si tú tienes un contenedor con un texto dentro y no quieres tener que hacer media queries para el resto de resoluciones, te voy a dar diferentes formas de hacerlo:

• Usando unidades de viewport:

Si establece el tipo con vw unidades (ancho de ventana), puede encontrar un número exacto donde el texto se ajusta bastante al contenedor y no se rompe al cambiar el tamaño. Llamaría a esto un número mágico. En este caso, font-size: 25.5vw;funciona a una vista de 320px, pero aún se romperá mucho más bajo que eso.

• Usando jQuery FitText:

FitText de Dave Rupert está listo para el trabajo. Todavía necesita un "magic number" (número mágico) para obtener el tamaño correcto para cualquier trabajo en particular. Es muy sencillo de utilizar y está mantenido, por lo que es una buena opción fácil y sencilla para no tener que tocar CSS y terminar pronto con ello añadiendo las librerías y usando la documentación de su github.

• Usando FitText sin jQuery:

Si no queremos utilizar jQuery para usar FitText tenemos varias alternativas. Podemos usar javascript para aplicar fitText, si trabajamos con angular usar una librería propia de angular o usar FitText UMD. Ahora dejaré un ejemplo de cómo hacerlo con la primera alternativa:

• Usando textFit con Javascript:

¡Intercambia las palabras en FitText y obtendrás textFit ! Es otra biblioteca de JavaScript que ajusta los tamaños de fuente para adaptar el texto a un contenedor. Sin embargo, aquí hay una gran advertencia: textFit está diseñado para dos dimensiones. Por lo tanto, necesita un width y height sobre el elemento. Ahora veremos un sencillo ejemplo:

• Usando la librería fitty:

Fitty se parece más a FitText en que cambia el tamaño del tipo para maximizarlo solo horizontalmente, pero en realidad parece no requerir números mágicos.

• Usando FlowTypeJs:

FlowType está diseñado para funcionar en un documento de texto completo, redimensionándolo todo de forma fluida a la vez, con tamaños de ventana de visualización mínimos y máximos. Pero puedes verlo como quieras. También aplicas un "magic numbers" para obtener las cosas como quieres. Toda la documentación completa está en los enlaces e incluyen sencillos ejemplos para practicar.

• Usando solo SVG:

Con width: 100%y a viewBox, SVG será un cuadro de tamaño completo que cambiará de tamaño con una relación de aspecto. Truco bastante bueno! Para establecer el tipo, necesitará algunos magic numbers para hacerlo viewBox

bien y empujar el texto al lugar correcto, pero es factible con cero dependencias.

Todos éstos ejemplos están acompañados de sus fuentes para poder entender todo lo que se muestra, ya que es más fácil ver los ejemplos del desarrollador para poder entender completamente cómo funciona.

Son diferentes alternativas que debemos barajar cuando estamos creando una plataforma web y necesitamos éste tipo de recursos.