() translation by (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:
1 |
<h1>Header 1</h1> |
2 |
<h2>Header 2</h2> |
3 |
<h3>Header 3</h3> |
4 |
<h4>Header 4</h4> |
5 |
<h5>Header 5</h5> |
6 |
<h6>Header 6</h6> |
7 |
|
8 |
<p>
|
9 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit iusto adipisci, cupiditate animi, itaque qui aspernatur vel corrupti labore minima, excepturi ab, fuga rem dolores. Ratione sunt autem iusto aliquid. |
10 |
</p>
|
11 |
|
12 |
<ul>
|
13 |
<li>List Item 1</li> |
14 |
<li>List Item 2</li> |
15 |
<li>List Item 3</li> |
16 |
</ul>
|
17 |
|
18 |
<ol>
|
19 |
<li>List Item 1</li> |
20 |
<li>List Item 2</li> |
21 |
<li>List Item 3</li> |
22 |
</ol>
|
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:
1 |
html
|
2 |
padding: 2rem |
3 |
|
4 |
h1, h2, h3, h4, h5, h6, p, ul, ol |
5 |
margin-top: 0 |
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.
1 |
html
|
2 |
padding: 2rem |
3 |
font-size: 24px |
4 |
font-weight: 100 |
5 |
line-height: 1.5 |
6 |
|
7 |
h1, h2, h3, h4, h5, h6, p, ul, ol |
8 |
margin-top: 0 |
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:
1 |
html
|
2 |
padding: 2rem |
3 |
font-size: 24px |
4 |
font-weight: 100 |
5 |
line-height: 1.5 |
6 |
|
7 |
h1, h2, h3, h4, h5, h6, p, ul, ol |
8 |
margin-top: 0 |
9 |
margin-bottom: 1rem |
10 |
|
11 |
h1, h2, h3, h4, h5, h6 |
12 |
margin-bottom: .5rem |
13 |
line-height: 1.1 |
¡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:
1 |
html
|
2 |
padding: 2rem |
3 |
font-size: 24px |
4 |
font-weight: 100 |
5 |
line-height: 1.5 |
6 |
@media (max-width: 900px) |
7 |
font-size: 20px |
8 |
@media (max-width: 500px) |
9 |
font-size: 14px |
10 |
|
11 |
h1, h2, h3, h4, h5, h6, p, ul, ol |
12 |
margin-top: 0 |
13 |
margin-bottom: 1rem |
14 |
|
15 |
h1, h2, h3, h4, h5, h6 |
16 |
margin-bottom: .5rem |
17 |
line-height: 1.1 |
¡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.
