Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Typography

Guía sobre Tipografía Responsiva para Perezosos

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

La tipografía es razonablemente la parte más importante de cualquier diseño web. Un gran titular en una página en blanco podrían tener el aspecto de un sueño minimalista hecho realidad, pero, ¿qué ocurre cuando empezamos a reducir la página para dispositivos más pequeños?

¡¡¡Hnnggghh!!! Todo empieza a romperse y tiene un aspecto terrible.

Por este motivo necesitamos una tipografía responsiva. Necesitamos tipografía que se autoregule por sí misma y reduzca su tamaño en los breakpoints. Pero nadie en su sano juicio quiere pasar por el problema de modificar todas las directrices de los estilos para cada elemento tipográfico de su página.

Afortunadamente podemos cambiar el tamaño del selector html de forma que todos sus descendientes hereden un tamaño relativo menor.

Por Ejemplo

Empecemos con algo de código como ejemplo:

Aléjalo de los muros un poco añadiendo algo de margen interno a nuestro selector html, y modificaremos el margen superior, margin-top, de todos nuestros elementos tipograficos porque es realmente molesto que la parte superior de tu etiqueta h1 esté una pulgada por debajo de una imagen junto a la que se supone debería estar.

Estamos usando Stylus aquí porque, como probablemente sabrás, soy un gran fan de la concisa sintaxis de Stylus:

Buen comienzo, pero el texto grande para los textos grandes y fuentes light son una agradable tendencia ahora mismo, así que añadamos este estilo. También modificaremos alguna line-height para asegurarnos que los párrafos tengan un buen aspecto.

Corrección del Interlineado

Ahora nuestros elementos tienen un gran margin-bottom y nuestros titulares también tienen una inmensa line-height. Afortunadamente esta es una solución rápida: 

¡Así! Nuestra tipografía perezosa está terminada. Nos hemos olvidado de algunos elementos tipográficos (entrecomillados, listas de definición, etc.), pero siéntete libre de añadirlos a tu modelo conforme te topes con ellos.

Pequeños Problemas de la Ventana de Visualización o Viewport

Ahora, de nuevo, ¿qué ocurre cuando contraemos nuestro viewport? Nuestra tipografía se ve horrible. Es difícil de leer y obligará al usuario a deslizar la visualización para poder leer un párrafo completo.

Solucionemos esto añadiendo algunas media queries y cambiando el font-size de nuestros selectores html para cada breakpoint:

¡Hecho!

Ahí lo tienes, un modelo tipográfico responsivo conseguido en cinco minutos. A todos los elementos tipográficos se les ha aplicado un tamaño es relación al elemento html, así que disponiendo de un font-size más pequeño para pantallas más pequeñas lo reducimos todo proporcionalmente.

Muestra a pantalla completa en CodePen

Recursos de Lectura

Si estás particularmente interesado en convertirte verdaderamente en un experto de la tipografía responsiva, y quieres pulir este modelo con mayor detalle te recomiendo A More Modern Scale for Web Typography de Jason Pamental.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.