Share
El diseño web es esencialmente una evolución de los principios y teorías creados 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 dominar 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 con una cuadrícula de columnas. Los sistemas de cuadrícula han sido una forma muy popular de organizar y alinear elementos, y de agregar orden general a una página, aplicando proporción y equilibrio..
Basándonos en 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.
La cuadrícula de línea de base es una técnica que se utiliza para mejorar su tipografía basada en la web. Esencialmente, alinea todo el texto a una cuadrícula vertical donde la parte inferior de cada letra se coloca en la cuadrícula, al igual que la escritura 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 le permite especificar lo que verán todos sus espectadores. Sin embargo, debido a las plataformas alternativas en las que su diseño puede ser interpretado en la web, su CSS inevitablemente representará la altura de su línea y otros valores tipográficos, de manera diferente para diferentes usuarios. Para muchos diseñadores, esto resulta ser solo una suposición y predecir lo que verá el usuario final.
Muchos diseñadores de impresión utilizan cuadrículas de referencia junto con su suite de diseño, ya sea InDesign u otro. Las cuadrículas impresas se remontan a principios de 1200 y no están restringidas 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 las matemáticas) se comparte en otros aspectos de la vida, especialmente en la arquitectura..
La cuadrícula hace posible que todos los elementos del diseño (caracteres de tipo fotográfico, fotografía, dibujo y color) se relacionen formalmente; es decir, el sistema de cuadrícula es un medio para introducir orden en un diseño. Un diseño deliberadamente compuesto tiene un efecto más claro, más ordenado y más exitoso que un anuncio hecho al azar. - Josef M? Ller Brockmann
Ahora, veamos cómo creamos realmente nuestra cuadrícula de línea de base.
En primer lugar, tenemos que definir una altura de línea para la cuadrícula de línea de base en una proporción con nuestro tamaño de fuente; para este ejemplo, 1: 1.5 es una buena cantidad que nos ofrece una generosa ventaja del 50%. Si tuviéramos un tamaño de texto de 12px, la altura de la línea (usando esta relación 1: 1.5) sería de 18px. 150% es una buena cantidad que nos ofrece un diseño que será fácil de leer, pero este valor puede ser diferente. Sin embargo, debe intentar mantener un rango aproximado de 130% -160% cuando considere la altura de la línea.
Antes de continuar, debe saber exactamente cómo funciona realmente la propiedad de altura de línea CSS. La altura de línea es la altura total y colectiva de la línea de texto, no el texto en sí. Funciona agregando relleno arriba y debajo del texto para espaciarlo. Si realmente tomamos un texto y lo colocamos en un fondo reglado, veremos el texto colocado entre las líneas, no necesariamente en ellas..
Para simplificar las cosas, supongamos que nuestro texto tiene un tamaño base de 10 px. Al mantener nuestra proporción aproximada, eso significa que nuestra altura de línea será de 15px, aunque podríamos variar esto. (Para hacer una nota al margen, 10px es bastante pequeño y no lo recomendaría necesariamente en la mayoría de los casos, pero lo uso aquí simplemente para hacerlo más fácil en el departamento de matemáticas). Para poder adaptar varios elementos a nuestro sistema de cuadrícula de línea de base, necesitamos configurarlos en nuestro CSS.
Sin embargo, antes de continuar, estos ejemplos asumen que estás usando algún tipo de restablecimiento de CSS. Si no lo está, los márgenes predeterminados podrían interferir con el trabajo que hacemos hoy.
Para comenzar, una vez que hayamos configurado la altura de la línea, debemos ajustar un margen consistente debajo de cada encabezado y párrafo. Ya que estamos trabajando con una cuadrícula de 15px aquí, comenzamos sobrescribiendo el margen inferior estándar de una etiqueta de párrafo (por defecto, este es 1em que, en este caso será 10px) para ser el mismo que la altura de nuestra 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í.
p margen inferior: 15px;
De manera similar, para los encabezados, simplemente necesitamos continuar obedeciendo los incrementos de 15 píxeles. Simplemente marcando en nuestro margen la altura de línea del 150%, creamos un corte similar y consistente.
h1 font-size: 20px; línea de altura: 30px; margen inferior: 15px;
Antes de continuar, quiero señalar que es posible que su texto no siempre aparezca en la línea, si ha aplicado uno a su fondo. Sin embargo, no se preocupe, siempre que la altura de la línea siga siendo la misma. Si su texto flota en medio de sus líneas, puede jugar fácilmente con sus márgenes, pero no es necesario.
A continuación, ¿cómo manejamos las listas? En primer lugar, queremos aplicar nuestro margen estándar de la misma manera que lo hicimos con nuestros párrafos. Esto le da a los descansos un nivel de consistencia con el contenido..
ul, ol margen inferior: 15px;
¡Esto está empezando a ser fácil ahora! Si aún tiene una altura de línea de 15px definida en otro lugar, sus listas encajarán bien con el resto del contenido.
Las imágenes son donde empieza 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 sus imágenes deben ser dimensionadas en múltiplos de su valor de altura de línea, que es, en este caso, 15.
En mi ejemplo, tengo la imagen flotando hacia la derecha, así que tengo un margen de 15 px aplicado al lado izquierdo y al fondo. Además de nuestro margen existente debajo del párrafo, esto nos dio un margen consistente igual al resto de nuestra cuadrícula de base.
img.left float: left; margen: 0 0 15px 15px;
Por supuesto, estos no son los únicos elementos que debemos modificar para cumplir con nuestra nueva cuadrícula de línea de base. La clave es asegurarse de que trabaja dentro de un incremento consistente, para que todo esté restringido a la misma cuadrícula. Esto puede hacer que la armonía y el equilibrio se hagan evidentes en su página web cuando se utiliza con grandes cuerpos de texto..
Aquí está nuestro ejemplo completo, una página web simple con párrafos, títulos, una imagen y una lista. Si quieres sacar tu regla, puedes hacerlo, 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 línea de base. Puede ser mucho más difícil cuando empiezas a aplicarlos a diseños más complejos, que terminan siendo pocos en la web. Sin embargo, es posible y puede dar como resultado un diseño equilibrado y proporcional que puede contribuir a una mejor experiencia del usuario final..
La cuadrícula de línea de base es una excelente manera de agregar un cierto equilibrio y proporción a su tipografía. Es una de esas implementaciones sutiles que pueden agregar una sensación natural a sus diseños. En el caso de la cuadrícula de línea de base, nuestra tipografía se vuelve consistente con el espaciado estandarizado que le da esa sensación armoniosa.
Sin embargo, desafortunadamente, todavía tenemos que luchar contra la amenaza de incompatibilidades de navegador 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 finalizar, aunque agregar una cuadrícula de línea de base proporciona otras ventajas. Por ejemplo, este tipo de sistema de cuadrícula puede ayudar enormemente a la hora de escalar y, por lo tanto, obligar a un navegador a volver a renderizar su CSS. Las cuadrículas de línea de base ofrecen un poco más de flexibilidad y estímulo para que el navegador haga las cosas correctamente.
Este ha sido un artículo más corto de lo habitual, pero eso se debe a que las cuadrículas de línea de base no tienen mucho que explicar o mostrar cómo usarlas. La verdadera magia se produce cuando el diseñador realiza ajustes y pruebas para asegurarse de que su cuadrícula de referencia funciona y, sobre todo, hace que el diseño sea visualmente atractivo (algo más). Para un giro alternativo a las cosas, lea el artículo de A List Apart sobre este tema. Hasta la próxima, feliz diseño.!
Accentsconagua