El tamaño de fuente de tu sitio desempeña un papel fundamental e influye en la forma en que las personas entienden e interactúan con tu contenido. Al fin y al cabo, si alguien no puede leer el texto de tus páginas y entradas, no puedes esperar que se quede — mucho menos que se suscriba a tu lista de correo electrónico o realice una compra.
Hay varias formas de cambiar el tamaño de fuente en WordPress. ¡Exploremos cada una!
Cómo entender el tamaño de fuente en WordPress
Antes de empezar a hacer cambios, es útil entender cómo funcionan los tamaños de fuente en WordPress y cómo afectan a tu sitio.
Por qué es importante el tamaño de fuente
El tamaño de fuente desempeña un papel fundamental tanto en el diseño como en la accesibilidad. Estas son las razones:
- Afecta a la legibilidad, especialmente para los visitantes que utilizan dispositivos móviles.
- Influye en la legibilidad, especialmente para los visitantes con discapacidades visuales.
- Ayuda a crear una jerarquía visual clara, lo que permite a los visitantes navegar por tu contenido y entenderlo.
Unidades de medida para el tamaño de fuente
En WordPress, puedes establecer los tamaños de fuente utilizando distintas unidades. Estas son las más comunes:
- Píxeles (px): Un tamaño fijo que no cambia según el tamaño de pantalla del visitante.
- Ems (em): Una unidad relativa basada en el tamaño de fuente del elemento principal.
- Rems (rem): Una unidad relativa basada en el tamaño de fuente del elemento raíz.
- Porcentajes (%): Al igual que los ems, son relativos al tamaño de fuente del elemento principal.
4 formas de cambiar los tamaños de fuente de WordPress
Según tu tema, tus herramientas y tu nivel de experiencia, hay varios métodos para ajustar el tamaño de fuente en WordPress.
| Método | Ideal para | Facilidad de uso | Nivel de control |
| Editor del sitio | Usuarios de temas de bloques que quieren realizar cambios globales. | Fácil | Medio |
| Personalizador de temas | Usuarios de temas clásicos con temas compatibles. | Fácil | Bajo a medio |
| Plugin | Principiantes que quieren cambiar un texto específico sin utilizar código. | Muy fácil | Bajo |
| CSS personalizado | Desarrolladores y usuarios avanzados que necesitan un control preciso. | Difícil | Alto |
Método 1: El Editor del sitio (para temas de bloques)
Si utilizas un tema de bloques, el Editor del sitio ofrece una forma sencilla de modificar los tamaños de fuente sin necesidad de tener conocimientos de programación. En tu panel de WordPress, ve a Apariencia → Editor y elige Estilos. En el panel que aparece, haz clic en el icono de Editar estilos que se parece a un lápiz. Se abrirá el panel de Estilos.
Aparecerá una lista con varios elementos visuales que puedes editar de forma global. Selecciona Tipografía.
Aquí verás una lista de fuentes y elementos individuales —como enlaces y encabezados— que puedes modificar. Elige un elemento para modificar el tamaño de fuente de ese tipo de texto en particular. En este ejemplo, elegiremos Texto, que se refiere al texto del cuerpo o de los párrafos. Despliega el menú Tamaño para ver las opciones de tamaño predeterminadas que puedes elegir. Selecciona un tamaño nuevo si quieres.
Si quieres alejarte de las opciones predeterminadas y establecer un tamaño personalizado, simplemente haz clic en el icono situado junto a Tamaño en el título. Allí puedes introducir un número específico o arrastrar el control deslizante hasta que estés satisfecho con el aspecto del texto.
Si quieres utilizar una unidad de medida diferente, haz clic en la actual — en este caso, «rem»— y elige la que quieras.
Cuando estés conforme con los tamaños de fuente, haz clic en el botón azul Guardar en la parte superior derecha.
Método 2: El Personalizador de temas (para temas clásicos)
Si no utilizas un tema de bloques, el personalizador de temas proporciona ajustes de tipografía globales para todo el sitio. Ten en cuenta que esto puede variar según el tema que utilices — algunos tienen un panel de ajustes personalizado con opciones de tipografía, mientras que otros pueden no ofrecerlas.
En tu panel de WordPress, ve a Apariencia → Personalizar. Haz clic en «Tipografía» o «Fuentes». Esto puede variar según el tema.
Después, ajusta los tamaños de fuente y la configuración como quieras. Cuando termines, pulsa Publicar para terminar. De nuevo, no todos los temas admiten la personalización del tamaño de fuente mediante el personalizador. Si este es el caso, considera utilizar un plugin o CSS personalizado.
Método 3: Usar un plugin para un control avanzado
Los plugins de WordPress son ideales para quienes quieren tener un control avanzado sobre la tipografía sin trabajar con código. Estos son un par de plugins que ofrecen esta funcionalidad:
- WP Typography: Ofrece un control detallado sobre el tamaño y el estilo del texto.
- Advanced Editor Tools: Añade opciones de fuentes avanzadas y un bloque de párrafo clásico.
Los pasos exactos que seguirás para cambiar el tamaño de fuente variarán según el plugin que elijas. Consulta su documentación para obtener una guía detallada.
Método 4: Usar CSS personalizado para obtener precisión
Si te sientes cómodo con el código, el CSS personalizado permite controlar con precisión los tamaños de fuente. Hay varias formas de trabajar con CSS, según el tema que utilices y tu nivel de experiencia. Ahora te explicaremos una de ellas.
En el panel de administración de WordPress, ve a Apariencia → Editor. Elige Estilos, después, haz clic en el icono de Editar estilos, que parece un lápiz. Selecciona los tres puntos verticales de la esquina superior derecha del panel Estilos y haz clic en CSS adicional CSS.
Ahí puedes añadir cualquier CSS que quieras. A continuación se muestra un ejemplo de código que cambia la fuente del cuerpo del sitio web y los tamaños de los encabezados H1:
p {
font-size: 16px;
}
h1 {
font-size: 32px;
}Puedes utilizar clases o IDs para seleccionar cualquier texto específico que quieras. Después, haz clic en el botón azul Guardar para publicar los cambios.
Cambiar el tamaño de fuente de áreas específicas
En muchos casos, querrás personalizar tipos de texto específicos, lo que puedes hacer utilizando CSS (o uno de los otros métodos anteriores). Estos son algunos ejemplos:
Encabezados (H1, H2, H3, etc.)
Los encabezados crean una jerarquía visual que guía a los lectores por tu contenido. Los tamaños de fuente más grandes destacan las secciones más importantes. Este es un ejemplo de cómo cambiar el tamaño del elemento H2:
h2 {
font-size: 36px;
}Texto del cuerpo
El texto del cuerpo debe ser fácil de leer en todos los dispositivos. Generalmente se recomienda un tamaño de fuente de entre 16px y 18px para las pantallas de escritorio, aunque esto puede variar según la familia de fuentes que uses. En el ejemplo siguiente, establecemos la fuente del cuerpo en 16px:
body {
font-size: 16px;
}Menús
Los menús son herramientas de navegación fundamentales y deben ser legibles en todo momento. Puedes cambiar su tamaño de fuente usando este fragmento de código:
.menu-item {
font-size: 14px;
}Prácticas recomendadas para cambiar el tamaño de fuente
Ajustar el tamaño de fuente es fácil, pero hacer los ajustes adecuados requiere una estrategia. Sigue estas pautas para obtener un resultado profesional y accesible.
Establece una escala tipográfica: No elijas tamaños al azar. Usa una escala modular (como 1.25x) para crear armonía. Si el texto del cuerpo es de 16px (1rem), tu H3 podría ser de 1.25rem, tu H2 de 1.563rem, y así sucesivamente. Esto garantiza una jerarquía visual coherente.
Prioriza la legibilidad con unidades rem: Aunque los px (píxeles) son fijos y fáciles de entender, las unidades rem son mejores para la accesibilidad. Un rem es relativo al tamaño de fuente raíz, lo que permite a los usuarios ajustar el tamaño del texto en la configuración de su navegador para mejorar la legibilidad, una señal clave de UX.
Comprueba el contraste: El tamaño de fuente perfecto no sirve de nada con un contraste de color deficiente. Usa una herramienta como el comprobador de contraste de WebAIM para asegurarte de que tu texto cumple los estándares WCAG AA o AAA sobre su fondo.
Solución de problemas comunes
Si los cambios en el tamaño de fuente no funcionan como esperabas, estos son algunos problemas comunes y sus soluciones:
Las fuentes no se actualizan
- Caché: Borra la caché de tu sitio y la caché del navegador.
- Restricciones del tema: Algunos temas pueden limitar la personalización de fuentes.
- Conflictos entre plugins: Desactiva otros plugins para identificar posibles conflictos.
Mala legibilidad
- Asegúrate de que haya un contraste adecuado entre los colores del texto y del fondo.
- Evita usar tamaños de fuente demasiado pequeños o excesivamente grandes.
Los tamaños de fuente en dispositivos móviles no son adaptables
- Usa unidades relativas como em, rem o porcentajes en tu configuración o CSS personalizado.
- Prueba tu sitio en varios dispositivos usando las herramientas para desarrolladores del navegador.
Perfecciona tu contenido con un asistente de IA y compañero de escritura
La personalización de fuentes es solo un aspecto de la creación y el mantenimiento de un sitio WordPress de alta calidad. Para lograr una eficiencia aún mayor, especialmente al crear y perfeccionar contenido, considera usar herramientas diseñadas para agilizar tu flujo de trabajo. Una de ellas es Jetpack AI Assistant.
Jetpack AI Assistant es más que un simple plugin de WordPress. Es una herramienta avanzada diseñada para simplificar y acelerar la creación de contenido. Integrada perfectamente con el editor de WordPress, actúa como tu colaborador inteligente y te ayuda a producir contenido de alta calidad en menos tiempo.
Así es como Jetpack AI Assistant puede transformar tu forma de trabajar:
- Crea contenido más rápido: Tanto si estás redactando una entrada de blog, escribiendo el contenido detallado de una página o desarrollando listas estructuradas, Jetpack AI Assistant te ayuda a generar ideas y contenido con solo unas pocas indicaciones.
- Perfecciona y ajusta el tono sin esfuerzo: Jetpack AI Assistant te permite ajustar el tono de tu texto según tus necesidades: formal, conversacional o cualquier punto intermedio.
- Genera títulos y resúmenes: ¿Tienes dificultades para encontrar el titular perfecto? Jetpack AI Assistant puede sugerir títulos atractivos y resúmenes concisos para que tu contenido destaque.
- Supera el bloqueo del escritor: Con sugerencias basadas en IA, puedes mantener el impulso incluso cuando no tengas claro cómo continuar.
Obtén más información sobre Jetpack AI Assistant.
Preguntas frecuentes
¿Cuál es el mejor tamaño de fuente para facilitar la lectura de un sitio web?
Para el texto principal de un sitio web, el mejor tamaño está entre 16 y 18 píxeles. Este rango es lo suficientemente grande para que la mayoría de las personas puedan leer cómodamente en la pantalla de un ordenador sin forzar la vista. Cualquier tamaño inferior a 16 píxeles puede ser difícil de leer, especialmente para los usuarios con discapacidades visuales. Para los encabezados, debes usar tamaños más grandes para mostrar una estructura clara. Esto ayuda a las personas a explorar tu página y encontrar rápidamente lo que necesitan.
Es importante recordar que la legibilidad también depende de otros factores. Estos incluyen el tipo de fuente que elijas, la cantidad de espacio entre las líneas de texto y el contraste de color entre el texto y el fondo. Para los dispositivos móviles, algunos diseñadores incluso recomiendan un tamaño de fuente ligeramente mayor, de hasta 20 píxeles, para facilitar la lectura en una pantalla más pequeña.
¿Cambiar el tamaño de la fuente afecta al SEO de mi sitio web?
Cambiar el tamaño de la fuente no le indica directamente a Google cómo clasificar tu sitio. Sin embargo, tiene un fuerte efecto indirecto. Cuando la fuente es fácil de leer, las personas permanecerán más tiempo en tu página y será menos probable que se vayan de inmediato.
Este comportamiento de los usuarios indica a Google que tu contenido es valioso. Con el tiempo, estas señales positivas pueden ayudar a mejorar tu posición en los resultados de búsqueda. Por eso, elegir un tamaño de fuente legible es una parte clave de un buen SEO en la página, ya que mejora la experiencia del usuario.
¿Cómo puedo cambiar el tamaño de la fuente solo en dispositivos móviles?
Para cambiar el tamaño de la fuente solo en dispositivos móviles, debes usar CSS personalizado con una consulta de medios. Una consulta de medios aplica reglas CSS solo cuando la pantalla tiene un tamaño determinado.
Por ejemplo, puedes añadir código que haga que el texto del cuerpo sea más pequeño o más grande en pantallas de menos de 600 píxeles de ancho. Esto te permite establecer un tamaño de fuente perfecto para los usuarios de ordenadores y otro tamaño optimizado para los usuarios de dispositivos móviles. Esto hace que tu sitio sea adaptable y garantiza que sea fácil de leer en cualquier dispositivo.
¿Por qué no funcionan o no aparecen mis cambios en el tamaño de la fuente?
Hay varias razones comunes para este problema. La causa más frecuente es la caché. Es posible que tu navegador o un plugin de caché de WordPress te esté mostrando una versión antigua y guardada de tu sitio. Primero, intenta borrar la caché de tu navegador y la caché de tu sitio web.
Otra razón podría ser que el CSS de tu tema de WordPress esté sobrescribiendo tus cambios. Es posible que tengas que usar un selector CSS más específico o añadir !important a tu regla, pero utiliza esta segunda opción con precaución, ya que puede crear otros problemas.
¿Cómo encuentro el selector CSS correcto para cambiar el tamaño de una fuente?
Puedes encontrar el selector CSS adecuado utilizando las herramientas para desarrolladores de tu navegador. En Chrome o Firefox, haz clic derecho en el texto que quieras cambiar y selecciona “Inspeccionar”.
Esto abrirá un panel que muestra el código HTML de ese elemento. Puedes ver su etiqueta HTML, como p o h2, y las clases o IDs CSS que tenga, como .entry-title. Después puedes utilizarlos para escribir una regla CSS específica, como h2.entry-title { font-size: 28px; }, para dirigirte precisamente a ese elemento.
¿Cómo cambio el tamaño de la fuente de una sola palabra o frase?
La forma más sencilla es utilizar el editor de bloques de WordPress. Dentro de un bloque de párrafo, puedes seleccionar la palabra o frase específica que quieras cambiar. Después, busca los ajustes del bloque en el lado derecho de la pantalla. En la sección Tipografía, puedes seleccionar un tamaño preestablecido o introducir un tamaño personalizado solo para el texto seleccionado.
Este método te ofrece un control preciso sin necesidad de escribir código personalizado, lo que facilita añadir énfasis a partes específicas de tu texto.
¿Cuál es la diferencia entre px, em y rem para los tamaños de fuente?
px significa píxeles y es una unidad de tamaño fijo. Una fuente establecida en 16px siempre tendrá una altura de 16 píxeles. em y rem son unidades flexibles. em se basa en el tamaño de fuente de su elemento principal. rem significa root em y se basa en el tamaño de fuente de todo el documento HTML.
Para los sitios web, rem suele ser la mejor opción. Permite que los visitantes cambien el tamaño de la fuente en la configuración de su navegador para mejorar la accesibilidad, y la tipografía de todo tu sitio se escalará correctamente.
¿Puedo cambiar el tamaño de la fuente en WordPress sin CSS?
Sí, puedes cambiar fácilmente el tamaño de fuente en WordPress sin usar código CSS. Si utilizas un tema de bloques moderno, puedes usar el Editor del sitio. Solo tienes que ir a Apariencia y luego a Editor. Desde allí, puedes ajustar los tamaños de fuente de todo tu sitio web o de bloques específicos, como párrafos y encabezados.
Si utilizas un tema clásico más antiguo, el Personalizador de temas suele incluir opciones de tipografía en Apariencia y luego Personalizar. Por último, puedes usar un plugin. Los plugins como Advanced Editor Tools añaden un sencillo menú desplegable de tamaño de fuente al editor, lo que te permite cambiar el tamaño de cualquier texto que selecciones.
¿Cómo puedo hacer que las fuentes de mi sitio web sean accesibles para todo el mundo?
Hacer que las fuentes sean accesibles implica dos aspectos principales. En primer lugar, elige un tamaño de fuente para el texto principal de al menos 16px. Esto garantiza que sea lo bastante grande para la mayoría de los usuarios. En segundo lugar, asegúrate de que haya suficiente contraste de color entre el texto y el fondo.
Puedes usar una herramienta online para comprobar el contraste y verificar que tus colores cumplen las directrices de WCAG. Usar unidades rem para los tamaños de fuente también es muy útil, ya que respeta la configuración del navegador del usuario si necesita aumentar el tamaño del texto para mejorar la legibilidad.
Jetpack 