Cómo ajustar el tamaño de un encabezado en CSS: guía sencilla de propiedades de fuente

PDF download Descargar el PDF
Una guía simple para cambiar el tamaño de fuente de tus etiquetas de encabezado en CSS
PDF download Descargar el PDF

¿Quieres asegurarte de que los encabezados de texto de tu sitio web tengan el tamaño correcto en todos los navegadores web? HTML proporciona 6 niveles de encabezados para sitios web, que varían desde H1 (el más grande) hasta H6 (el más pequeño). Si quieres aumentar o disminuir el tamaño de tus H1, H2, H3, u otras etiquetas, puedes configurar el tamaño utilizando CSS. Esta guía de wikiHow te enseñará la forma más confiable y accesible de cambiar el tamaño de fuente del encabezado en tu sitio web empleando la propiedad font-size en CSS. Y si utilizas WordPress, también te mostraremos cómo ajustar el tamaño de fuente del encabezado en el editor CSS, así como también en el editor de bloques.

Cosas que deberías saber

  • Puedes especificar el tamaño de la fuente de las etiquetas de un encabezado (H1, H2, etc.) utilizando la propiedad font-size en CSS.
  • Para asegurarte de que los encabezados luzcan correctamente en todos los navegadores, utiliza unidades de medida relativas como em , rem y vh .
  • Si utilizas WordPress, puedes dirigirte a Apariencia > Personalizar > CSS adicional para agregar los tamaños de encabezados de tu preferencia.
Método 1
Método 1 de 3:

Utilizar la propiedad font-size en CSS

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e9\/13572106-1.jpg\/v4-460px-13572106-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e9\/13572106-1.jpg\/v4-728px-13572106-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Al emplear la propiedad font-size en CSS, puedes modificar el tamaño de fuente del encabezado empleando dos formas distintas:
    • En unidades relativas: Para un diseño web accesible, generalmente deberás ajustar la fuente respecto a otros elementos. Esto garantizará que el tamaño de los encabezados se adecúe de manera automática cuando el usuario cambie el tamaño de la ventana.
    • En unidades absolutas: si quieres ser específico con respecto a la cantidad de píxeles (px), puntos (pt), pulgadas (in), u otros tamaños específicos, puedes emplear unidades absolutas. No obstante, esto puede causar problemas en lo referente a diseño web responsivo, pues el usuario no podrá ajustar el tamaño del texto en su navegador, incluso al ampliar la página. [1]
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1f\/13572106-2.jpg\/v4-460px-13572106-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1f\/13572106-2.jpg\/v4-728px-13572106-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Para asegurarte de que los tamaños del encabezado sean constantes sin importar el tamaño de la pantalla del usuario, cíñete a las unidades relativas. Las unidades relativas más comunes que usarás con la propiedad font-size son las siguientes:
    • em: ajusta el tamaño del encabezado en lo referente al tamaño de fuente del elemento. Utilizar em es excelente debido a que cambia el tamaño de la fuente con base en la fuente que el lector esté utilizando en su computadora, teléfono o tablet. [2]
      • Por ejemplo, si utilizas font-size: 1.2em , aumentarás el tamaño del encabezado 1,2 veces o un 20 % más grande que el tamaño predeterminado. [3]
      • Asimismo, si la etiqueta del encabezado se encuentra dentro de otro elemento que tiene un tamaño de fuente en específico, como div , utilizar font-size: 1.2em en el código del encabezado haría que el tamaño del encabezado sea un 20 % más grande que el tamaño de fuente especificado en el div .
    • rem: es similar a em , pero cambia el tamaño con base en el tamaño de fuente del elemento raíz (html) en lugar del elemento principal. Si configuras el tamaño del encabezado utilizando rem como unidad de medida, siempre se ajustará con base en el elemento raíz, aun cuando el encabezado se encuentre en el interior de otro contenedor.
      • Por ejemplo, si el tamaño de fuente del cuerpo HTML está configurado en 100 %, utilizar font-size: 5rem en tu H1 haría que el tamaño del encabezado sea 5 veces más grande que la fuente predeterminada.
    • vh : los cambios basados en la altura de la ventana gráfica (el área de la pantalla visible para el usuario). [4]
      • Por ejemplo, font-size: 10.0vh hace que la fuente seal el 10 % de la altura de la ventana gráfica.
    • vw: al igual que vh , vw ajusta el tamaño con respecto a la ventana gráfica, pero con base en el ancho en lugar de la altura.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/29\/13572106-3.jpg\/v4-460px-13572106-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/29\/13572106-3.jpg\/v4-728px-13572106-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Después de elegir una unidad de medida, puedes cambiar el tamaño de un encabezado creando (o editando uno que ya exista) un elemento para la etiqueta del encabezado en el archivo CSS de tu sitio web o en el editor CSS de WordPress . Estos son algunos ejemplos que puedes ver para empezar:
    • Por ejemplo, si quieres cambiar el tamaño del H1 para que sea el 20 % del tamaño de la ventana gráfica, deberías utilizar lo siguiente: 
       h1 
 { 
 font-size 
 : 
 20 
 vh 
 ; 
 }
    • En este ejemplo, utilizaremos CSS para ajustar también el tamaño de la etiqueta del encabezado H2, el cual queremos que sea un poco más pequeña que las etiquetas H1. Hagamos que sea el 17 % de la altura de la ventana gráfica: 
       h1 
 { 
 font-size 
 : 
 20 
 vh 
 ; 
 } 
 h2 
 { 
 font-size 
 : 
 17 
 vh 
 ; 
 }
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/17\/13572106-4.jpg\/v4-460px-13572106-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/17\/13572106-4.jpg\/v4-728px-13572106-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    En este ejemplo, cambiaremos el tamaño de fuente de H1, H2 y H3 con respecto al tamaño de fuente establecido en el elemento HTML: 
     html 
 { 
 font-size 
 : 
 100 
 % 
 ; 
 } 
 h1 
 { 
 font-size 
 : 
 3.5 
 rem 
 ; 
 } 
 h2 
 { 
 font-size 
 : 
 2.75 
 rem 
 ; 
 } 
 h3 
 { 
 font-size 
 : 
 2 
 rem 
 ; 
 }
    Anuncio
Método 2
Método 2 de 3:

Editar CSS para encabezados en un tema de WordPress

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b7\/13572106-5.jpg\/v4-460px-13572106-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b7\/13572106-5.jpg\/v4-728px-13572106-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Si vas a diseñar un sitio de WordPress y quieres configurar el tamaño de los encabezados para todo el sitio, puedes utilizar el Personalizador en el panel de WordPress para cambiar el CSS del tema. [5]
    • Si aún no lo has hecho, consulta el primer método para saber cómo cambiar el tamaño del encabezado co nCSS.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3b\/13572106-6.jpg\/v4-460px-13572106-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3b\/13572106-6.jpg\/v4-728px-13572106-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Verás esta opción ubicada en el panel izquierdo.
    • Si aún no lo has hecho, haz clic en Mi sitio para abrir tu sitio y poder editarlo.
    • Si has instalado WordPress en tu propio servidor dedicado o compartido, también podrías editar directamente el archivo CSS, ya sea descargándolo a través de FTP o editándolo en tu navegador. El archivo que buscas se llamará custom.css o style.css y debería ubicarse en el directorio principal de tu tema.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a7\/13572106-7.jpg\/v4-460px-13572106-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a7\/13572106-7.jpg\/v4-728px-13572106-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Verás esta opción debajo de Apariencia en el panel izquierdo. [6]
    • Algunos temas de WordPress te permiten cambiar los tamaños del encabezado sin tener que editar directamente el CSS. Si ves un área llamada “Encabezados”, puedes utilizar los menús para ajustar los tamaños de los encabezados.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/61\/13572106-8.jpg\/v4-460px-13572106-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/61\/13572106-8.jpg\/v4-728px-13572106-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Verás esta opción en el panel izquierdo. Esto abrirá un editor CSS que te permitirá agregar tus propias adicionales personalizadas al CSS existente del tema.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/76\/13572106-9.jpg\/v4-460px-13572106-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/76\/13572106-9.jpg\/v4-728px-13572106-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    A medida que escribes o pegas los tamaños de encabezado que prefieras utilizando la propiedad font-size en el campo, verás una previsualización en el panel derecho. La previsualización también te mostrará los cambios en los diferentes tamaños de pantalla.
    • El CSS que ingreses aquí anulará cualquier otra configuración de CSS en tu tema. [8] En otras palabras, si el tamaño del H1 está fijado en 20px en el tema y lo configuras en 2,75rem en CSS adicional, tus cambios tendrán prioridad.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/57\/13572106-10.jpg\/v4-460px-13572106-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/57\/13572106-10.jpg\/v4-728px-13572106-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Después de editar el CSS global para tu tema, los nuevos tamaños de encabezado se aplicarán a todo el sitio web de WordPress.
    Anuncio
Método 3
Método 3 de 3:

Cambiar el tamaño del encabezado en el editor de bloques de WordPress

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f5\/13572106-11.jpg\/v4-460px-13572106-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f5\/13572106-11.jpg\/v4-728px-13572106-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Si vas a editar una página o publicación en WordPress utilizando el editor de bloques, puedes ajustar de manera sencilla el tamaño de cada una de las etiquetas de encabezado (H1, H2, H5, etc.) de manera individual. Esto actualizará de forma automática el CSS para el encabezado que hayas seleccionado. Si no ves la barra lateral Configuración a la derecha del editor, haz clic en el ícono del menú Configuración ubicado en la esquina superior derecha para que aparezca.
    • A diferencia de al editar el CSS para el tema, el editor de bloques únicamente te permitirá cambiar el tamaño del encabezado en la publicación o página que esté abierta para edición.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3c\/13572106-12.jpg\/v4-460px-13572106-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3c\/13572106-12.jpg\/v4-728px-13572106-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Al hacer clic en el encabezado, el tipo de encabezado (p.ej., H1) aparece en la ventana emergente.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/30\/13572106-13.jpg\/v4-460px-13572106-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/30\/13572106-13.jpg\/v4-728px-13572106-13.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Por ejemplo, si seleccionas XXL , el encabezado seleccionado se ajustará al tamaño más grande.
    • Es mejor mantener los tamaños de encabezados uniformes; H1 debería ser el más grande, seguido de H2, etc.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8c\/13572106-14.jpg\/v4-460px-13572106-14.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8c\/13572106-14.jpg\/v4-728px-13572106-14.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ahora puedes seleccionar otro encabezado en la página y ajustar su tamaño de manera natural.
    • Ajustar un encabezado no cambiará el tamaño de todos los encabezados de la página. In En otras palabras, "agrandar" un H1 no hará que todos los demás H1 sean "grandes". Necesitarás cambiar individualmente el tamaño de cada encabezado.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2f\/13572106-15.jpg\/v4-460px-13572106-15.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2f\/13572106-15.jpg\/v4-728px-13572106-15.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ahora los nuevos tamaños de encabezado serán visibles para todos los lectores.
    Anuncio

Consejos

  • El software de lectura de pantalla emplea etiquetas de encabezado (p.ej., H1, H2, etc.) para pasar de sección en sección en la página. Por ello, es importante no omitir ningún nivel de encabezado y mantenerlos todos en orden numérico. Los lectores de pantalla pueden omitir secciones con encabezados anidados. [8]
  • También puedes utilizar unidades de medida tales como vh y vw para establecer el tamaño de otros elementos, incluyendo imágenes de encabezados, cuadros de texto, imágenes de fondo , menús desplegables y más.
Anuncio

wikiHows relacionados

Cómo
buscar y averiguar acerca de algo usando una imagen
Cómo
obtener la contraseña de Facebook de alguien
Cómo
ver quién está conectado a tu red inalámbrica
Cómo
desactivar Fortinet
Cómo
olvidar algo horrible que viste en internet
Cómo
desbloquear ventanas emergentes (pop ups)
Cómo
bloquear una página web en todos los navegadores
8 formas de navegar una versión antigua de un sitio web
Cómo
convertir una tarjeta de regalo en dinero en efectivo
Cómo
revisar el historial de navegación en un router wifi
Cómo
crear enlaces pequeños
Cómo
desbloquear sitios bloqueados
Cómo
ingresar en una pagina Web bloqueada
Cómo
desbloquear Fortinet
Anuncio

Referencias

  1. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
  2. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
  3. ↑ https://www.w3.org/TR/css-values-3/
  4. ↑ https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
  5. ↑ https://wordpress.com/support/editing-css/
  6. ↑ https://wordpress.com/support/customizer/
  7. ↑ ttps://wordpress.com/support/editing-css
  8. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

Acerca de este wikiHow

En otros idiomas
Esta página ha recibido 532 visitas.

¿Te ayudó este artículo?

Anuncio