Mejora el diseño de tu web: Tipografía responsive

El día 1 de marzo estuve en una reunión de la Comunidad local de WordPress Madrid dando una charla sobre Tipografía Responsive.

Fue una charla relajada, de una hora y media de duración y, personalmente, la disfruté mucho porque tuvimos tiempo de profundizar en los temas que más interesaron a los asistentes.

Por el feedback que recibí, creo que quizá el aprendizaje más valioso con el que nos quedamos fue que nunca debemos declarar unidades en píxeles cuando estamos maquetando una página web. En diseño responsive, abandonamos los píxeles para adoptar medidas relativas: em, rem, vh, vm, vmin, vmax… Por lo tanto, no declaramos tamaños, sino proporciones.

Uno de los asistentes propuso un truco para que, al maquetar, 1 rem equivaliera a 10 px en lugar de 16 px, argumentando que, de esta manera, es más sencillo hacer el cálculo. Como comento en el vídeo, desaconsejo esta opción y ahora tengo oportunidad de insistir en que no tiene sentido pensar en píxeles ya que, en última instancia, es el usuario el que decide a cuántos píxeles equivale 1 rem (o 1 em). 1 rem no equivale ni a 16 píxeles ni a 10 px, sino al tamaño que el usuario tenga definido en su navegador.  De igual manera ocurre cuando utilizamos medidas relativas al viewport (ancho o alto de la pantalla o ventana).

Como conclusión: el navegador renderiza en píxeles pero nosotros declaramos en unidades relativas.

Aquí os dejo el vídeo de la charla y la presentación que utilicé.

Descripción

Ana Cirujano nos dará algunas recomendaciones de composición de textos optimizados para todos los dispositivos, que nos ayudarán a construir mejores sitios web responsive para todos los usuarios. Tipo de letra, tamaño, interlineado, ancho de línea… aprenderemos a tomar decisiones de diseño para conseguir comunicar eficazmente, que nuestros usuarios disfruten más del sitio web y que aumente el tiempo de permanencia en la página y obtengamos más visitas.

Vídeo

Presentación de diapositivas