2011-05-20 9 views

Respuesta

31

La propiedad CSS 'line-height' en realidad acepta un valor numérico puro, que resolverá la altura de línea en función del tamaño de fuente establecido. Si desea utilizar la proporción áurea (1.61803399), puede configurarla como la altura de la línea en el cuerpo.

 
body { 
    font: 100%/1.618 sans-serif; 
    } 

Como ejemplo, configuración de la fuente de tamaño de un H1 a 24px produciría una línea de altura de 39px (redondeado de 38.832).

+0

Para cualquier tamaño de fuente, la altura de la línea debe aumentar a medida que aumenta el ancho de la línea también –

+0

@Tom Care para elaborar, ¿Tom? El uso de un valor sin unidad le dice al navegador que ajuste la altura de la línea de acuerdo con el tamaño de la fuente. No estoy seguro de dónde entra el ancho de línea para jugar aquí, pero estaría interesado en sus pensamientos ampliados. – amustill

+1

A medida que aumenta el ancho de la línea, el texto se vuelve más difícil de leer porque la altura de la línea no se ha aumentado para compensar el efecto del ancho. Hay 3 dimensiones tipográficas: tamaño de fuente, altura de línea y ancho de línea. ¿Qué sucede si quiere usar un tamaño de fuente de 16 píxeles con un ancho de contenido de 550 píxeles? ¿Cuál debería ser la altura de línea ajustada en este caso? Según usted es 25.88, pero el óptimo es 25.00. Esto es solo una lectura adicional;) ​​ –

14

Sé que esto es una cuestión de edad, pero por si acaso alguien todavía está en busca de referencias, esto (impresionante) Golden Ratio Typography Calculator

+6

Pero te pierdes este ** [artículo de awsone] (http://www.pearsonified.com/2011/12/golden-ratio-typography.php) ** del autor de esa calculadora de relación áurea awsone –

+0

Actualmente estoy recibiendo un error de JavaScript en mi consola que '$' no está definido, parece que se han olvidado de cargar jQuery o algo así. –

0

¿Fue type-scale.com? Yo uso esto para calcular todo lo mío. Proporciona tamaño de fuente y altura de línea.

0

Aquellos que buscan establecer explícitamente la line-height con la proporción áurea , puede utilizar:

Esto aumentará proporcionalmente con diferentes tamaños de fuente.

Cuestiones relacionadas