Mediante el diseño web responsivo es posible adaptar los contenidos de una página web a las características de las pantallas de cada dispositivo móvil. Por motivos de espacio, la pantalla de un smartphone genera una visualización de los contenidos diferente a la pantalla de un ordenador. Especialmente en lo referente al tamaño y a la ordenación de determinados componentes de una página web, se considera que las columnas, los elementos de navegación, los elementos gráficos y la fuente deberían siempre adaptarse al formato y a la definición de la pantalla utilizada, así como ajustarse al encuadre en uso. Esto es posible gracias al diseño responsivo, que también permite reconocer el dispositivo de entrada (ratón, teclado, pantalla táctil) y la colocación correspondiente de los elementos de navegación.
Una manera muy habitual de aplicarlo es usando una cuadrícula flexible o “grid”, sobre la cual se distribuyen los diferentes elementos que componen una página web. Los ejes verticales y horizontales de una retícula elástica se ajustan a diferentes tamaños de pantalla y resoluciones y, si es necesario, se redistribuyen o se recolocan. Incluso si el tamaño de la ventana del navegador se modifica, los contenidos de la página web se distribuyen de forma óptima a cada encuadre, ventana gráfica o viewport. La base técnica del diseño responsivo la componen HTML5, CSS3 (sobre todo gracias al uso de media queries) y JavaScript. Mediante estos lenguajes de programación es posible también implementar una tipografía adaptable.
La mejor tipografía web para un diseño responsivo de páginas web
Para que un texto se ajuste a cada pantalla es necesario usar una tipografía web adaptable basada en vectores. Para ello, es posible recurrir a fuentes web preestablecidas como las de Google Fonts o Font Squirrel, que ofrecen una gran variedad de ellas de forma totalmente gratuita.
A la hora de escoger una fuente tipográfica es importante tener en cuenta que sea legible y que transmita el efecto deseado. Si en los encabezados es posible permitirse alguna libertad, no es esto lo mejor en el cuerpo del texto principal, ya que una extravagancia excesiva podría dificultar la lectura.
El color de la tipografía debería crear un contraste adecuado con el color de fondo de la página. Si es muy pálido, se corre el riesgo de que no se pueda leer. Si la elección resulta difícil, se puede recurrir a herramientas online como Colour Contrast Check o Contrast-A, con las que podemos comprobar diferentes combinaciones y experimentar con distintos tonos.