Saltar al contenido

Tamaños de fuente H1-H6 en HTML

Hacemos una revisión profunda cada una de las secciones de nuestro espacio con el objetivo de enseñarte siempre información certera y actual.

Solución:

Son definidos por cada fabricante de navegador de forma independiente.

No son uniformes en todos los navegadores y están ahí para la semántica (encabezado grande, encabezado ligeramente más pequeño, etc.).

Si observa la especificación HTML 4 para estos, no hay mención de cómo se supone que deben tener estilo, solo que debería ser. De la especificación:

Visual browsers usually render more important headings in larger fonts than less important ones.

Si desea que estos sean consistentes, debe usar una hoja de estilo de restablecimiento que los defina.

Aunque w3 ha definido una hoja de estilo predeterminada sugerida para HTML 4 con los siguientes detalles, la mayoría de los navegadores ignoran esta sugerencia:

h1               font-size: 2em; margin: .67em 0 
h2               font-size: 1.5em; margin: .75em 0 
h3               font-size: 1.17em; margin: .83em 0 
h5               font-size: .83em; margin: 1.5em 0 
h6               font-size: .75em; margin: 1.67em 0 
h1, h2, h3, h4,
h5, h6           font-weight: bolder 

(sí, no veo font-size: para h4)

Depende del navegador, como dicen otros.

Por otro lado, existe una regla en tipografía para establecer tamaños de fuente: si la fuente base tiene tamaño X, las fuentes más grandes deberían crecer exponencialmente; la forma habitual es tener tallas X*sqrt(2), X*sqrt(2)^2, X*sqrt(2)^3 y así sucesivamente, pero puede cambiar la base.

Sin embargo, las fuentes de computadora tienen algunos requisitos especiales.

Solían proporcionarse solo en forma de mapa de bits (por lo que los tamaños eran fijos), e incluso cuando se proporcionaban en forma de vector, algunos formatos preferían algunos tamaños especiales: divisible por 2 o 5 (este era el caso con las fuentes vectoriales antiguas de Amiga … ¿Agfa Intellifont?).

Incluso ahora, a los motores de fuentes les gustan más los tamaños enteros, porque sus algoritmos de sugerencias funcionan mejor.

Y parece que la gente se acostumbró a los valores elegidos debido a estas restricciones técnicas, aunque ahora los motores de fuentes mejoraron mucho.

Un posible enfoque de progresión es usar raíces cuadradas, a través de una fórmula como 2/sqrt[heading#]. Por lo tanto, tendrías:

H1 = 2/sqrt1 = 2
H2 = 2/sqrt2 = 1.414
H3 = 2/sqrt3 = 1.155
H4 = 2/sqrt4 = 1
H5 = 2/sqrt5 = 0.894
H6 = 2/sqrt6 = 0.816

Para una base de fuente de 12, eso estaría lo suficientemente cerca de 24, 17, 14, 12, 11, 10. Para otras bases, los resultados pueden estar un poco más alejados de los números enteros.

Fibonacci funcionaría bien con base 16, por lo que tendrías:

H1=32
H2=24
H3=19
H4=16
H5=14
H6=13

Si aceptas, puedes dejar un tutorial acerca de qué le añadirías a este ensayo.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *