Una guía simple para la tipografía receptiva
La gran mayoría de los artículos que se refieren al diseño receptivo se enfoca en dos áreas principales: una red fluida y flexible, y imágenes fluidas y flexibles. Lo que muchos de ellos no hablan es la tipografía.
Y, sin embargo, para la mayoría de los sitios web, el texto, el contenido, es el elemento más importante.
Por supuesto, para los sitios donde las imágenes o videos son el contenido principal, el tipo de respuesta es un poco menos importante, pero aún así no debe pasarse por alto.
La buena noticia es que la tipografía receptiva no es particularmente difícil de lograr. Solo necesitamos tomarnos un tiempo para pensar en cómo nuestro tipo debe responder a los cambios en el tamaño de la pantalla, y luego implementar esos cambios.
Principios de tipo receptivo
Hay dos principios principales para crear una tipografía receptiva efectiva. El primero es el tipo de tamaño variable. Eso significa que no solo cambia el tamaño en función del tamaño de la pantalla, sino que el usuario también puede redimensionarlo.
El segundo es la longitud de línea optimizada, que mantiene la legibilidad. Eso significa que para algunas pantallas, mantener el área de contenido más pequeña y las longitudes de línea más cortas tiene más sentido, aunque el contenido teóricamente podría extenderse más.
Tipo de tamaño variable usando rems
La mayoría de los diseñadores usan píxeles o ems para dimensionar su tipo. Los Ems son una mejor opción, ya que permiten a los usuarios cambiar el tamaño del tipo en su navegador. Pero los ems son relativos al elemento padre, lo que significa que son más complicados de usar que los píxeles, lo que se ve agravado en los diseños receptivos donde hay más tamaños y relaciones para realizar un seguimiento.
Rems ofrece una mejor alternativa a ems. Funcionan de una manera casi idéntica, a excepción de una diferencia clave: las unidades rem son relativas al html elemento, en lugar de elementos padre individuales. Esto hace que mantener el tamaño adecuado de su tipo sea mucho más sencillo.
Las unidades rem ahora son compatibles con todos los navegadores modernos más importantes, incluyendo Opera desde la versión 11.6 e IE9. Si bien es posible que desee incluir reembolsos para navegadores anteriores, existe un soporte lo suficientemente amplio para que rems los pueda usar ahora.
Como utilizará unidades rem para el tipo de tamaño, asegúrese de aplicar el restablecimiento a su html elemento y no su body elemento. Por lo tanto, debería verse así:
html { font-size:100%; }
Ahora sus unidades rem se aplicarán al tamaño de fuente predeterminado para el dispositivo.
A continuación, deberá especificar el tamaño de la fuente para cada tamaño de pantalla. Recomiendo experimentar con tamaños de fuente reales en varios dispositivos para ver qué se ve mejor. Depende en gran medida de los tipos de letra que haya seleccionado, así como de su diseño general.
Es probable que desee especificar varios tamaños de fuente en función de los diferentes tamaños de pantalla, lo cual es bastante sencillo de hacer. Como ejemplo, su CSS podría verse más o menos así:
@media (max-width: 640px) { body {font-size:1.2rem;} } @media (min-width: 640px) { body {font-size:1rem;} } @media (min-width:960px) { body {font-size:1.2rem;} } @media (min-width:1100px) { body {font-size:1.5rem;} }
De acuerdo, este es un código simplificado para este artículo, pero te da un punto de partida. Puede observar que para las pantallas más pequeñas, se especifica un tamaño de fuente ligeramente mayor. Esto se debe a que los tamaños de letra más grandes generalmente son más fáciles de leer en pantallas pequeñas.
Por supuesto, querrás hacer especificaciones adicionales para cosas como tu h1 elementos y tal. Recomiendo usar una herramienta como Especimen de fuente web para ver cómo se verá realmente tu tipo.
Mantenimiento de longitudes de línea óptimas
Si bien el tipo de tamaño variable es un concepto bastante sencillo, mantener una longitud de línea adecuada en varios dispositivos se torna un poco más complejo. Ha habido bastante debate sobre cuál es la longitud de línea óptima para la legibilidad, pero de acuerdo con el Instituto Baymard , el consenso parece estar en algún lugar entre 50 y 75 caracteres por línea.
También recomiendan utilizar un contenedor de ancho fijo para su contenido, pero eso frustra el propósito de un diseño receptivo, por lo que debemos enfocarnos de manera diferente si queremos mantener la capacidad de respuesta con longitudes de línea optimizadas.
En primer lugar, observe los diferentes tamaños de pantalla que va a diseñar y descubra qué tamaño de letra debe usar para obtener aproximadamente 50 caracteres en una línea. Para pantallas muy pequeñas, puede necesitar ir por debajo de 50 caracteres por línea para mantener un tamaño de fuente legible, pero 50 debería ser el objetivo. Esto nos da un buen punto de partida para nuestro tamaño de letra.
También debemos establecer anchos máximos (o puntos de corte) para las áreas de contenido de texto. Observe el tamaño del tipo que está utilizando para un tamaño de pantalla determinado y luego determine el ancho del contenedor de contenido cuando tenga aproximadamente 75 caracteres por línea. Esto no va a ser exacto a menos que uses una fuente monoespacia, pero deberías poder hacer una media bastante fácil. Ese se convierte en nuestro ancho máximo de contenedor.
Digamos que el tamaño de letra predeterminado para un dispositivo dado es 16px, y usted quiere que su tamaño de letra sea 20px (digamos que estamos usando una tipografía serif como Droid Serif para este ejemplo). Eso significa que especificará que el tipo sea 1.25rem. En ese tamaño, querrás un ancho de contenedor de alrededor de 675px de ancho. Esto nos da un recuento de caracteres en los años 60 en promedio, que es correcto en nuestro ancho objetivo.
Para especificar el ancho del contenedor, simplemente use este código:
@media (min-width: 950px) { .container {width:675px;} }
Puede establecer los anchos de línea máximos para cada tamaño de visualización, o solo para los específicos. Con pantallas más pequeñas, es posible que desee dejar el ancho del contenedor y permitir que el tipo se extienda por todo el ancho de la pantalla.
Ahora, con pantallas mucho más grandes, es posible que desee ver la división de su contenido en múltiples columnas. Digamos, por ejemplo, que estás trabajando con un iPad en la vista horizontal. El ancho de su pantalla es de 2048 píxeles. Estirar las líneas para llenar la pantalla hace que sea difícil de leer, pero centrar el contenido y mantener las longitudes de línea más cortas es una especie de derrota con el objetivo de ver el contenido en modo horizontal.
Entonces, en su lugar, configure su tipo en dos columnas (o incluso tres, dependiendo del tamaño de su fuente). Especificación de columnas múltiples de CSS3 hace que sea muy fácil dividir el texto en varias columnas sin tener que cambiar todo el diseño. Combine eso con consultas de medios y ahora tiene un diseño de contenido que se divide en dos o tres columnas para pantallas más grandes, manteniendo un tamaño de letra altamente legible y una longitud de línea altamente legible.
Nuevamente, el código para hacer esto es bastante simple:
@media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } }
Ahora, en pantallas de más de 1140 píxeles de ancho, obtendrá dividir su contenido en dos columnas, haciendo que las longitudes de sus líneas sean mucho más legibles.
Usar tipos de letra alternativos
Una cosa que a menudo se pasa por alto cuando se habla de tipografía receptiva es la idea de que diferentes tipos de letra pueden no funcionar bien en diferentes tamaños. Esto es especialmente cierto para las fuentes de pantalla.
¿Eso significa que debe evitar el uso de estas fuentes en sus diseños receptivos? Por supuesto no. En su lugar, solo especifique diferentes fuentes para varios elementos en sus diseños más grandes o más pequeños.
Por ejemplo, con un diseño para computadoras de escritorio, es posible que desee utilizar una fuente como League Script para tus encabezados Pero en una pantalla más pequeña, como un iPhone, tendrá que hacerlo tan grande que domine el contenido, o será muy difícil de leer.
Lo que podemos hacer aquí es usar League Script para las pantallas más grandes (iPad, escritorio, etc.), mientras cambiamos a una versión más grande de la fuente del cuerpo para pantallas más pequeñas (como el iPhone u otros teléfonos inteligentes).
Para hacer esto, simplemente especifique algo como esto:
@media (min-width:960px) { h1 {font-family:"League Script", script;} } @media (max-width:960px) { h1 {font-family:"Droid Serif", serif;} }
Por supuesto, esto se puede hacer por algo más que solo sus encabezados, también.
Conclusión
Si bien el diseño receptivo se ha centrado principalmente en las imágenes y el diseño general, la tipografía es tan importante como ambas cosas. La mejor parte es que no es particularmente difícil adaptar y optimizar su tipografía para un diseño receptivo.
Es vital que le dedique el mismo tiempo y esfuerzo que puso en otros elementos de su diseño. Mantener la legibilidad de su contenido de texto es un componente vital para crear una experiencia de usuario óptima para sus visitantes.
¿Pones tanto énfasis en la tipografía receptiva en tus diseños como lo haces con las cuadrículas y las imágenes receptivas? ¿Por qué o por qué no?