Configurar el tipo de web en una cuadrícula de referencia

El diseño web es esencialmente una evolución de los principios y teorías creadas durante la evolución de la impresión. La industria del diseño trajo muchas técnicas a la web, pero algunas tardaron más en dominarse en un entorno virtual. Desafortunadamente, no tenemos una sola plataforma para que aparezca nuestro contenido; tenemos que luchar con múltiples navegadores, sistemas operativos y tamaños de pantalla.

A medida que la web se ha desarrollado, también lo han hecho los principios de diseño que observamos. El diseño basado en cuadrículas ha aumentado en los últimos años, por lo que los diseñadores pueden diseñar su sitio de acuerdo a una cuadrícula en columnas. Los sistemas de cuadrícula han sido una forma muy popular de organizar y alinear elementos, y de agregarle orden general a una página, mediante la aplicación de la proporción y el equilibrio.

Basando nuestro conocimiento del uso de la proporción y el equilibrio, se puede utilizar otro principio de diseño de impresión: la cuadrícula de referencia.

¿Qué es una cuadrícula de referencia?

La cuadrícula de referencia es una técnica que se utiliza para mejorar tu tipografía basada en la web. Esencialmente, alinea todo tu texto a una cuadrícula vertical donde la parte inferior de cada letra se coloca en la cuadrícula, como si estuviera escribiendo en papel rayado. El resultado final es un cuerpo de texto perfectamente organizado, con un reconocimiento subconsciente del equilibrio y la congruencia.

Como dije antes, la impresión es un medio estático. Diseñar para un formato de impresión te permite especificar lo que verán todos tus espectadores. Sin embargo, debido a las plataformas alternativas en las que se puede interpretar tu diseño en la web, tu CSS inevitablemente representará la altura de tu línea y otros valores tipográficos, de manera diferente para diferentes usuarios. Para muchos diseñadores, esto resulta ser solo una conjetura y una predicción de lo que verá el usuario final.

Cuadrículas de referencia impresas

Muchos diseñadores de impresión utilizan cuadrículas de referencia junto con su conjunto de diseño, ya sea InDesign u otro. Las cuadrículas impresas se remontan a principios de la década de 1200 y no se limitan solo al diseño web. De hecho, todo, desde las cuadrículas hasta la proporción áurea (es decir, la mayoría de las teorías basadas en matemáticas) se comparten en otros aspectos de la vida, sobre todo en la arquitectura.

La cuadrícula hace posible que todos los elementos del diseño (caracteres tipográficos, fotografía, dibujo y color) se relacionen formalmente entre sí; es decir, el sistema de cuadrícula es un medio para agregar orden en un diseño. Un diseño compuesto deliberadamente tiene un efecto más claro, ordenado y exitoso que un anuncio creado al azar. Josef Müller Brockmann

Creación de una cuadrícula de referencia

Ahora, revisemos cómo creamos realmente nuestra cuadrícula de referencia.

En primer lugar, tenemos que definir una altura de línea para la cuadrícula de referencia basada en una relación con nuestro tamaño de fuente; para este ejemplo, 1:1.5 es una buena cantidad que nos ofrece un generosa ventaja del 50%. Si tuviéramos un tamaño de texto de 12px, la altura de la línea (usando esta relación de 1:1.5) sería de 18px. 150% es una buena cantidad que nos ofrece un diseño que será fácilmente leído, pero este valor puede ser diferente. Sin embargo, debes intentar ceñirte a aproximadamente un rango de 130%-160% al considerar la altura de la línea.

Antes de continuar, debes saber exactamente cómo funciona realmente la propiedad de la altura de línea de CSS. La altura de línea es la altura general y colectiva de la línea de texto, no del texto en sí. Funciona añadiendo relleno por encima y por debajo del texto para espaciarlo. Si realmente tomamos algún texto y lo ponemos en un fondo gobernado, veremos el texto colocado entre las líneas, no necesariamente en ellas.

En el CSS

Para simplificar las cosas, supongamos que nuestro texto tiene un tamaño base de 10px. Al ceñirse a nuestra proporción aproximada, eso significa que la altura de nuestra línea será de 15px, aunque podríamos variar esto. (Para hacer una nota lateral, 10px es bastante pequeño y no lo recomendaría necesariamente en la mayoría de los casos, pero lo estoy usando aquí simplemente para hacerlo más fácil en el departamento de matemáticas). Para que varios elementos encajen en nuestro sistema de cuadrícula de referencia, necesitamos configurarlos en nuestro CSS.

Sin embargo, antes de continuar, estos ejemplos asumen que estás utilizando algún tipo de restablecimiento de CSS. Si no es así, los márgenes predeterminados pueden interferir con el trabajo que hacemos hoy.

Párrafos

Para comenzar, una vez que hayamos configurado la altura de la línea, necesitamos ajustar un margen consistente debajo de cada encabezado y párrafo. Como estamos trabajando con una cuadrícula de 15px, comenzamos sobrescribiendo el margen inferior estándar de una etiqueta de párrafo (por defecto, esto es 1em que, en este caso, será 10px) para que sea el mismo que nuestra altura de línea dentro del texto. Esto crea una línea vacía proporcional debajo de cada párrafo que es igual a la altura si el texto residía allí.

1

p {

2

	margin-bottom: 15px;

3

}

Este es el resultado: un cuerpo de texto donde el margen debajo de un párrafo es igual a la altura de la línea.

Encabezados

Del mismo modo, para los encabezados, simplemente debemos seguir obedeciendo los incrementos de 15 píxeles. Simplemente etiquetando nuestro margen a un lado de la altura de línea del 150%, creamos una ruptura similar y consistente.

1

h1 {

2

	font-size: 20px;

3

	line-height: 30px;

4

	margin-bottom: 15px;

5

}

El ejemplo de la derecha tiene nuestro CSS aplicado, lo que hace que el margen bajo nuestro encabezado cumpla con nuestra cuadrícula de referencia. Dado que nuestro encabezado tiene el doble de tamaño de fuente que nuestro texto normal, ocupa dos filas en nuestra cuadrícula.

Antes de continuar, quiero señalar que es posible que tu texto no siempre se quede en la línea, si aplicaste uno a tu fondo. Sin embargo, no te preocupes, siempre y cuando la altura de la línea siga siendo la misma. Si tu texto flota en el centro de tus líneas, puedes jugar fácilmente con tus márgenes, pero no es necesario.

Listas

Ahora, ¿cómo manejamos las listas? En primer lugar, queremos aplicar nuestro margen estándar de la misma manera en que lo hicimos con nuestros párrafos. Esto le da a las pausas un nivel de coherencia con el contenido.

1

ul, ol {

2

	margin-bottom: 15px;

3

}

¡Esto está empezando a ser fácil ahora! Si aún tienes una altura de línea de 15 píxeles definida en otro lugar, tus listas encajarán bien con el resto del contenido.

Puesto que nuestra altura de línea se definió en el CSS del elemento primario, solo tenemos que definir el margen para que nuestras listas estén en funcionamiento dentro de nuestro sistema de cuadrícula de referencia.

Imágenes

En las imágenes es donde comienza a ponerse un poco más difícil. Preferiblemente, queremos tener la misma consistencia en nuestros márgenes, por lo que la imagen se trata de la misma manera que si fuera un bloque de texto. Significa que tus imágenes deben tener un tamaño en múltiplos del valor de la altura de la línea que es, en este caso, 15.

En mi ejemplo, tengo la imagen flotando hacia la derecha, por lo que tengo un margen de 15px aplicado en el lado izquierdo y en la parte inferior. Junto con nuestro margen existente debajo del párrafo, esto nos dio un margen consistente igual al resto de nuestra cuadrícula de referencia.

1

img.left {

2

	float: left;

3

	margin: 0 0 15px 15px;

4

}

Por supuesto, estos no son los únicos elementos que necesitamos modificar para cumplir con nuestra nueva cuadrícula de referencia. La clave es asegurarte de que trabajas dentro de un incremento constante, por lo que todo se limita a la misma cuadrícula. Esto puede resultar en que la armonía y el equilibrio se hagan evidentes en toda tu página web cuando se utiliza con grandes volúmenes de texto.

Nuestro ejemplo

Este es nuestro ejemplo terminado, una página web simple con párrafos, títulos, una imagen y una lista. Si quieres sacar tu regla, puedes, pero puedo asegurarte que todo sigue la cuadrícula consistente que se basa en nuestra tipografía.

Acabamos de romper la superficie del uso de cuadrículas de referencia. Puede volverse mucho más difícil cuando comienzas a intentar aplicarlos a diseños más complejos, que acaba siendo utilizado en pocos en la web. Sin embargo, es posible y puede resultar en un diseño equilibrado y proporcional que puede contribuir a una mejor experiencia del usuario final.

Conclusión

La cuadrícula de referencia es una excelente manera de agregarle algo de equilibrio y proporción a tu tipografía. Es una de esas implementaciones sutiles que pueden agregarle algo de naturalidad a tus diseños. En el caso de la cuadrícula de referencia, nuestra tipografía se vuelve consistente con el espaciado estandarizado dándole esa sensación armoniosa.

Desafortunadamente, sin embargo, todavía tenemos que luchar contra la amenaza de incompatibilidades de navegadores que pueden hacer que nuestro CSS se muestre de manera diferente para diferentes usuarios cuando navegan en navegadores, sistemas operativos o dispositivos alternativos. Esta es una tarea que no parece que esté a punto de terminar, aunque agregar una cuadrícula de referencia proporciona otras ventajas. Por ejemplo, este tipo de sistema de cuadrícula puede ayudar enormemente al escalar y, por lo tanto, obligar a un navegador a volver a renderizar tu CSS. Las cuadrículas de referencia ofrecen un poco más de flexibilidad y estímulo para que el navegador haga las cosas correctamente.

Este fue un artículo más corto de lo habitual, pero eso se debe a que realmente no hay mucho que explicar sobre las cuadrículas de referencia o mostrar sobre cómo usarlas. La verdadera magia llega cuando el diseñador ajusta y prueba para asegurarse de que su cuadrícula de referencia funciona y, sobre todo, hace que el diseño sea visualmente atractivo (un poco más). Para obtener un giro alternativo sobre las cosas, lee el artículo de A List Apart sobre este mismo tema. Hasta la próxima, ¡feliz diseño!