El mejor cálculo para liderar en diseño web.

Esta es un área que siempre me desagrada cuando estoy en el proceso de diseño de un sitio web. Dicho esto, estoy tratando de ser más eficiente y quería saber cuándo algunos usan una fuente sans serif o serif, ¿cómo identifica cuál sería el líder para cada navegador y el diseño en consecuencia? ¿Alguien ha usado o visto un cálculo al usar una altura de fuente de 14px que determinará el interlineado?

Respuestas (3)

La tipografía es bastante subjetiva, por lo que no estoy seguro de si existe un algoritmo para determinar un "correcto" line-heightbasado en font-face, font-size, font-weight.

Es una buena práctica realizar todas las mediciones en relación con el tamaño de fuente ( em) en lugar de un valor fijo, ya que los usuarios pueden cambiar el tamaño de fuente predeterminado en su dispositivo. Esto permite al usuario cambiar el tamaño de la fuente sin estropear el diseño.

Lo siguiente daría un liderazgo predeterminado de 17.5px:

body {
  font-size: 14px;
}
p {
  line-height: 1.25; /* The same as (14px times 1.25) for a value of 17.5px */
}

También daría automáticamente una ventaja de 15pxo 20pxsi la fuente se cambiara a 12px o 16px respectivamente.

Aquí hay un par de recursos sobre tipografía y ritmo vertical para web que he encontrado útiles:

Elementos de Estilo Tipográfico Aplicados a la Web

Componer a un ritmo vertical

Como afirma thgaskell, no hay otra 'fórmula' que, en general:

Cuanto mayor sea la longitud de la línea, mayor será el interlineado/interlineado que debe usar.

Re. "¿Alguien ha usado o visto un cálculo...": No habrá uno bueno para todos los propósitos (ver más abajo). Probablemente lo más parecido sea: las aplicaciones de Adobe tienen una proporción predeterminada de interlineado/altura de línea de 1,2 unidades de interlineado por 1 unidad de tamaño de fuente (16,8 para 14).

Eso es un cajón de sastre genérico que se ve bien en la mayoría de los lugares, pero se ve bien en ninguna parte, excepto por casualidad.

Probablemente se base en nada más que un ingeniero de Adobe en los años 80 que dijo "¿Qué tal 1.2 como una relación predeterminada de tamaño de letra inicial, Bob? Me parece bien" y Bob dice "Claro, adelante".


En cuanto a en qué basar un cálculo: vea la excelente respuesta de Alan G a la altura de línea óptima en relación con el tamaño de fuente .

Aquí hay un resumen muy parafraseado de algunas de las cosas que influyen en el liderazgo ideal como una lista, basado en la respuesta de Alan G más mis experiencias:

  • Que tipo de texto es. Los encabezados, etiquetas, subtítulos, etc. tendrán un encabezado más ajustado que el texto del párrafo del cuerpo principal: son cosas que constituyen una unidad que marca el flujo de la página, mientras que los párrafos son el flujo principal de la página.
  • El ancho de la medida (bloque de texto) y el número de líneas de párrafos. Cuanto más se deba mover el ojo horizontalmente y menos señales visuales, como saltos de párrafo cercanos, más ayuda necesitará el lector para volver a la línea correcta, en forma de espacios en blanco adicionales de un encabezado más amplio.
  • El tono deseado . En términos generales, el interlineado más ancho le da al texto un color tipográfico más claro y una sensación más aireada y accesible. Una dirección más estricta, en términos generales, parece más densa y seria. Sin embargo, hay mucho más que esto: el tono general y el ritmo de la página son el resultado del resultado general de todo combinado.
  • Características de la fuente. Generalmente hablando:
    • Las fuentes de altura x alta ya son más codiciosas en el uso del espacio vertical, por lo que normalmente (no siempre) necesitarán más interlineado.
    • Las fuentes ascendentes altas tienden a tener inherentemente más espacio para respirar, por lo que tenderá a ser posible apretar más el encabezado si es necesario antes de que se vea mal (no siempre).
    • Las fuentes más pesadas con trazos más gruesos tienen un color tipográfico más oscuro, por lo que es probable que haya menos espacio para apretar el interlineado antes de que el interlineado ajustado haga que los bloques de texto establecidos en estas fuentes se vean opresivos (no siempre)

No es que yo, o me imagino que cualquier diseñador, piense de manera consciente y mecánica en una lista de verificación como esta. Estas son solo observaciones sobre lo que influye en la sensación del texto. Lo importante es que instintivamente se siente bien y funciona.

Sin embargo, cosas como esta pueden ser una alternativa útil o un control de cordura para los casos en los que fallan los instintos.