it-swarm-es.com

¿Es un problema si <h4>, <h5> y <h6> son más pequeños que el texto normal?

En muchos sitios web y plantillas de sitios web, el tamaño de fuente de <h4> (A veces) y <h5> Y <h6> A menudo son más pequeños que el texto normal, es decir, el de <p> sin clases adicionales.

La palabra "Nigromancia" es en realidad un encabezado de nivel 5, y me tomó pensamientos adicionales antes de darme cuenta de eso.

Al diseñar mi propio sitio web (plantillas), mantengo todos los encabezados (1 a 6) más grandes que el texto normal, con <h6> Siendo solo 1.05x tan grande como <p>, Con configuraciones de diseño adicionales como extra padding-top.

¿Sería necesario mantener todos los títulos no más pequeños que el texto normal? Me interesan principalmente los bloques de textos y no usar encabezados como subtítulos de imágenes o algo que no sea de texto.

39
iBug

Ya que <h*> significa rumbo, esto muestra una jerarquía. Los diferentes números son una clasificación de nivel de mayor a menor o de máximo a mínimo, donde <p> es el último paso.

Jerarquía: sistema en el que los miembros de una organización o sociedad se clasifican según su estado o autoridad relativa.

Esto significa:

<h1>> <h2>> <h3>> <h4>> <h5>> <h6>> <p>

Tu ejemplo es:

<h1>> <h2>> <h3>> <p>> <h4>> <h5>> <h6>

Con esto estás rompiendo el orden jerárquico poniendo <h4>, <h5> y <h6> bajo el dominio de <p>. Visualmente se verá como una nota de texto, una nota al pie, un título simple que depende del texto general o, en el peor de los casos, un error.

No es correcto o incorrecto, todo depende de la jerarquía visual que debe mostrar el texto.

36
Danielillo

El problema se basa en un error. Que los encabezados en HTML tienen algo que ver con el diseño y no lo tienen. Los elementos de encabezado HTML son para la estructura de documentos para la computadora y no tienen nada que ver con el diseño o la salida visual. Que los navegadores proporcionen diferentes tamaños de fuente se basa en CSS y no en HTML.

Entonces, esta es una pregunta de diseño más que una pregunta de UI/UX, pero debe hacer que sus tamaños de fuente sean lo que desea que sean y no depender de la elección de un navegador.

10
Rob

Bueno, el problema principal es que el anidamiento es demasiado profundo aquí. Realmente, no es fácil seguir una anidación profunda como esta, por varias razones:

  • La gente simplemente no recuerda dónde están. Anidar demasiado profundo es una mala comunicación. Por supuesto, depende del volumen del texto que tenga. Pero no debería necesitar tantos niveles en una sola página web.

  • Es difícil distinguir visualmente los encabezados. O distingues por tamaño de fuente, y esto será difícil para los lectores. O se distingue por pistas visuales (color, fuentes, adornos) y esto generalmente no es demasiado bonito; Una opción es utilizar encabezados en línea al comienzo del párrafo.

Tener un encabezado con un tamaño de fuente más pequeño que el texto normal no es un delito, siempre que el encabezado se perciba visualmente como un encabezado (las series en negrita podrían ayudar aquí). Pero en mi humilde opinión, generalmente está resolviendo el problema incorrecto.

2
yo'

Teniendo en cuenta que "Nigromancia" es un título de categoría/grupo o algo así. Creo que su intención de mostrar esta información antes del texto es no confundir al usuario cuando está leyendo. Si esto es cierto, tenga sentido esto heading tag sea más pequeño que paragraph.

PD 1: Siempre al usar heading tags, deberían ser más grandes que el párrafo porque normalmente es más importante el <p>.

PD 2: Como Google Robot no está considerando niveles más bajos de etiquetas de encabezado para clasificar su sitio web en Google. Puede considerar esta excepción sin dolor cardíaco.

PD 3: Los nombres de las etiquetas se crearon para que sea más fácil de desarrollar y leer el código. Y si este es tu caso, sé feliz y úsalo más pequeño.

0
Rafael Perozin

Los encabezados más pequeños que el texto del párrafo no son una buena práctica tipográfica/interfaz de usuario.

Usted debería dar pistas visuales sobre lo que está haciendo.

Normalmente, H1-H3 son significativamente más grandes que el texto p. con H1 de 2 a 2.4 em, y aproximadamente 15 a 25% más pequeño con números de encabezado crecientes. Por ejemplo, H2 sería 1.6 a 2 em, H3 1.2 - 1.4 em.

Pero llegas al punto de rendimientos decrecientes

Otras formas de hacer encabezados distinguibles:

  • Combinaciones de negrita/cursiva, p. Ej. H4 es 1.2 en negrita cursiva, H5 es 1.1 en cursiva.

  • Cambia los márgenes. Para mi página web, H1 y H2 quedan al ras, pero H3 y H4 usan los bordes del texto. Entonces H1 y H2 son titulares colgantes.

Escribo páginas grandes, varios miles de palabras. Todavía no he necesitado más el H4.

0