La tipografía es posiblemente la parte más importante del diseño de cualquier sitio web. Un enorme encabezado en una página en blanco puede parecer un sueño minimalista hecho realidad, pero ¿qué sucede cuando empezamos a reducir nuestra página para dispositivos más y más pequeños??

Hnnggghh !!! Todo se rompe y se ve terrible.

Por eso necesitamos tipografía responsiva. Necesitamos una tipografía que se ajuste para reducir los puntos de interrupción. Pero nadie en su sano juicio quiere pasar por todos los problemas de restablecer todos sus estilos de referencia para cada elemento tipográfico en su página..

Por suerte podemos cambiar el tamaño de la html Selector para que todos sus descendientes hereden un tamaño relativamente más pequeño..

Por ejemplo

Vamos a empezar con un ejemplo de marcado de fregadero de cocina:

Encabezado 1
 
Encabezado 2
 
Encabezado 3
 
Encabezado 4
 
Encabezado 5
 
Encabezado 6
 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprenda la forma de iusto adipisci, cupiditate animi, itaque qui aspernatur vel corrupti labore minima, exceptturi ab, fuga rem dolores. Ratione sunt autem iusto aliquid. 
 
 
Artículo de la lista 1
 
Artículo de la lista 2
 
Artículo de la lista 3
 
 
 
Artículo de la lista 1
 
Artículo de la lista 2
 
Artículo de la lista 3
 

Empújelo un poco de las paredes rellenando nuestro html selector, y vamos a restablecer el margen superioren todos nuestros elementos tipográficos porque es realmente molesto cuando la parte superior de su h1 la etiqueta es aproximadamente una pulgada por debajo de una imagen a la que se supone que se sienta al lado Todo lo demás permanecerá en el navegador predeterminado por ahora.

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

Relleno html: 2rem h1, h2, h3, h4, h5, h6, p, ul, ol margen superior: 0

Buen comienzo, pero el texto enorme para texto grande y fuentes ligeras es una tendencia muy buena ahora, así que vamos a agregar eso. También vamos a lanzar en algunos altura de la línea para asegurarnos de que nuestros párrafos se vean bien.

Relleno html: tamaño de fuente 2rem: peso de fuente 24px: 100 altura de línea: 1.5 h1, h2, h3, h4, h5, h6, p, ul, ol margen superior: 0

Arreglo de altura de línea

Pero ahora nuestros elementos tienen una enorme margen inferior en ellos y nuestros encabezados tienen una enormealtura de la línea también. Por suerte esta es una solución rápida:

Relleno html: tamaño de fuente 2rem: peso de fuente 24px: 100 altura de línea: 1,5 h1, h2, h3, h4, h5, h6, p, ul, ol margen superior: 0 margen inferior: 1rem h1, h2, h3, h4, h5, h6 margen inferior: .5rem line-height: 1.1

¡Ahí! Nuestra tipografía perezosa está completa. Nos perdimos bastantes elementos tipográficos (blockquotes, listas de definición, etc.), pero siéntase libre de agregarlos a la plantilla al encontrarlos..

Problemas con las ventanas más pequeñas

Ahora, de nuevo, ¿qué sucede cuando contratamos nuestra ventana gráfica? Nuestra tipografía se ve terrible. Es difícil de leer y requerirá que el usuario deslice varias veces solo para leer un párrafo.

Así que vamos a arreglar eso agregando algunas consultas de medios y cambiando nuestra html selector de tamaño de fuente en cada punto de quiebre:

Relleno html: 2rem tamaño fuente: 24px font-weight: 100 line-height: 1.5 @media (max-width: 900px) font-size: 20px @media (max-width: 500px) font-size: 14px h1, h2 , h3, h4, h5, h6, p, ul, ol margin-top: 0 margin-bottom: 1rem h1, h2, h3, h4, h5, h6 margin-bottom: .5rem line-height: 1.1

Voila! 

Ahí lo tienes, una tipografía receptiva en cinco minutos. Todos los elementos tipográficos están dimensionados en relación al html elemento, por lo que al tener un menor html Tamaño de letra en pantallas más pequeñas, reducimos todo proporcionalmente..

Demostración de pantalla completa en CodePen.

Otras lecturas

Si estás particularmente interesado en De Verdad una tipografía completa y receptiva, y quiero adaptar esta plantilla en más detalle. Recomiendo encarecidamente A More Modern Scale for Web Typography por Jason Pamental.