¿Qué es más importante, el tamaño de fuente de referencia o la altura de línea de referencia al crear cuadrículas basadas en una escala modular?

Estoy tratando de comprender las cuadrículas basadas en escalas modulares y cómo usarlas en el diseño web. Por lo que entiendo, hay dos formas de decidir un valor de referencia para su escala... usando su tamaño de fuente de referencia (1 rem) o usando su altura de línea de referencia (1 rem * 1.6).

Los marcos CSS como Foundation parecen preferir el tamaño de fuente de referencia y usarán ese valor en la cuadrícula de esta manera:

.myDiv {
    padding: 1rem;
    margin-bottom: 0.5rem;
}

Otros marcos CSS como Bootstrap parecen preferir la altura de línea de referencia y usarán ese valor calculado en su cuadrícula como:

// $baselineFontsize is a pixel value like 14px 
// $baselineLineHeight is a unitless number like 1.4 or 1.6

$baseline = $baselineFontsize * $baselineLineHeight;

.myDiv {
    padding: $baseline;
    margin-bottom: $baseline * 0.5;
}

// or, based on em:

.myDiv {
    padding: 1em * $baselineLineHeight;
    margin-bottom: 1em * $baselineLineHeight * 0.5;
}

¿Cuáles son las principales diferencias entre usar el tamaño de fuente y la altura de línea como referencia? ¿Cuales son las ventajas y desventajas de cada uno? ¿Conducirán a una apariencia distinta?

@DumbNic Gracias. He editado la publicación titulada en función de sus comentarios.
¿Qué es el 'tamaño de fuente de referencia'? ¿Está preguntando acerca de una cuadrícula tipográfica o una cuadrícula de diseño de página? Si es lo último, no hay una necesidad real de tener una correlación directa con el tamaño de fuente. Es solo una decisión arbitraria tomada por los diseñadores de cada sistema de cuadrícula.

Respuestas (1)

La cuadrícula de línea de base se utiliza para crear un sistema de ritmo vertical y líneas de base coincidentes entre columnas. Esto es extremadamente difícil de hacer en el diseño web por varias razones.

Una de las principales razones por las que esto es tan difícil en la web es por la altura de línea. El texto se coloca aproximadamente en el medio y puede mostrarse de manera diferente según el navegador que esté utilizando, a diferencia de los programas de diseño de impresión (InDesign), donde el texto literalmente se ajusta y la parte inferior se alinea con la línea de base.

Hay un excelente artículo en Smashing Magazine que responde la mayoría de sus preguntas sobre los pros y los contras de los diferentes métodos para configurar un sistema de cuadrícula de referencia con CSS.

En cuanto a cuál es mejor, realmente depende de lo que estés construyendo. ¿Estás creando un folleto simple, como un sitio web que quizás tenga 10 páginas? Tal vez valga la pena luchar por la perfección de los píxeles. ¿Estás creando una aplicación web donde el contenido está fuera de tu control? Quizás el sistema más simple que sea fácilmente transferible a múltiples diseñadores y desarrolladores sea el mejor.

De todos modos, ¡mucha suerte!

Buena respuesta. No solo es difícil en la web, sino que generalmente es irrelevante, no es necesario que el contenido se ajuste en columnas en una página de desplazamiento vertical.
@DumbNic No estaba diciendo que sea difícil alinear el texto, estaba diciendo que es difícil replicar un sistema de cuadrícula de referencia en la web de la misma manera que lo hace en forma impresa debido a todas las variables. Especialmente cuando estás creando un marco flexible.
@DumbNic el contexto son las cuadrículas de referencia, que es algo muy diferente a la alineación de texto/alineación vertical.
@DumbNic, es posible que solo estemos pensando en dos cosas diferentes. Una cuadrícula de línea de base para tipografía se trata de tener columnas de tipo que se adhieran a una línea de base consistente (ver: webdesignstuff.co.uk/in108/files/2012/01/… ) Es principalmente un concepto de impresión, ya que no es realmente práctico implementarlo en la web. ya que simplemente no existe el concepto de una línea de base de tipo en CSS.
@DumbNic tradicionalmente (en forma impresa) para eso era exactamente... texto que se distribuiría en columnas (periódicos, revistas, etc.). Algunos han defendido lo mismo en la web, pero en realidad nunca funciona y es discutible si es necesario. Incluso con texto separado en cada columna, tiene problemas para mezclar estilos de fuente y conservar la línea de base (encabezados, por ejemplo).
¿Qué es más importante, el tamaño de fuente de referencia o la altura de línea de referencia al crear cuadrículas basadas en una escala modular?
RespuestasAquíPolítica de privacidad1y, 0v