El CSS tamaño de fuente La propiedad define el tamaño del texto en tu sitio web. Acertar con el tamaño de fuente va más allá de la mera estética, ya que influye en la legibilidad, la accesibilidad y, en última instancia, en la tasa de conversión de tu tienda.
¿Qué es el tamaño de fuente en CSS?
La tamaño de fuente La propiedad controla el tamaño del contenido de texto de un elemento. De forma predeterminada, la mayoría de los navegadores representan el texto en 16px, pero puedes ajustarlo globalmente o por elemento.
Ejemplo:
p {
font-size: 16px;
}
Puedes definir el tamaño usando unidades absolutas (como píxeles) o unidades relativas (como em or rem) La elección correcta determinará qué tan receptivo y accesible será su texto.
Unidades CSS para el tamaño de fuente
Hay varias maneras de configurar el tamaño del texto en CSS. Repasemos las más comunes y cuándo usar cada una.
1. px (píxeles)
Unidad absoluta.
- Siempre permanece fijo independientemente del tamaño de la pantalla o la configuración del usuario.
- Ideal para logotipos o elementos de interfaz de usuario que deben mantenerse coherentes.
Limitación: No se escala con el zoom del navegador del usuario ni con la configuración de tamaño de fuente base.
h1 {
font-size: 32px;
}
2. em (relativo al padre)
Unidad relativa.
- 1em equivale al tamaño de fuente del elemento padre.
- Útil para escalar texto proporcionalmente dentro de un componente.
Nota: Se puede “componer” si está anidado, 1.2 em dentro de un padre con 1.2 em da como resultado 1.44 veces el tamaño base.
p {
font-size: 1.2em;
}
3. rem (relativo a la raíz)
Relativo a la raíz (html) elemento.
- 1rem = el tamaño de fuente del elemento raíz (normalmente 16px).
- Recomendado para consistencia en todo el sitio.
- Más fácil mantener la accesibilidad y el diseño responsivo.
h1 {
font-size: 2.5rem; /* equals 40px if base font-size = 16px */
}
4. % (Relativo al padre)
Actúa de manera similar a em, define el tamaño de fuente como un porcentaje del elemento padre.
p {
font-size: 100%; /* equals parent’s font size */
}
5. vw / clamp() (Tipografía fluida)
La tipografía responsiva moderna a menudo utiliza unidades de ventana gráfica o el abrazadera() Función para hacer que el texto se adapte al tamaño de la pantalla.
h1 {
font-size: clamp(1.5rem, 2.5vw + 1rem, 3rem);
}
Esto significa:
- Tamaño mínimo de fuente = 1.5rem
- Escalas basadas en el ancho de la ventana gráfica (2.5vw + 1rem)
- Tamaño máximo de fuente = 3rem
Perfecto para titulares que lucen equilibrados en computadoras de escritorio y dispositivos móviles.
Mejores prácticas de accesibilidad y legibilidad
Una buena tipografía mejora no sólo el diseño sino también la experiencia del usuario y la accesibilidad.
- Tamaño base: Utilice al menos 16 px (1 rem) para el texto del cuerpo.
- Unidades escalables: Usa rem or em para que los usuarios puedan hacer zoom fácilmente.
- Altura de la línea: Establecer altura de línea: 1.4–1.6 Para una lectura cómoda.
- Contraste: Asegúrese de que el contraste de color coincida WCAG estándares (al menos 4.5:1 para texto normal).
- Evite textos muy pequeños En dispositivos móviles: cualquier tamaño inferior a 14 px puede reducir la legibilidad.
Ejemplo de mejores prácticas:
body {
font-size: 1rem; /* 16px base */
line-height: 1.5;
}
Tenga en cuenta que la accesibilidad también afecta directamente al SEO. Google premia las páginas legibles y optimizadas para dispositivos móviles.
Tamaño de fuente adaptable en Shopify y GemPages
Uso de la configuración del tema de Shopify
Si está utilizando un tema de Shopify, a menudo puede ajustar el tamaño de las fuentes directamente desde Tienda en línea > Personalizar > Configuración del Tema > Tipografía.
Muchos temas incluyen controles deslizantes o menús desplegables para controlar el tamaño del texto globalmente (por ejemplo, cuerpo, encabezado, texto del botón).
Uso del editor GemPages
Si necesita un control más preciso, como cambiar el tamaño de fuente solo para páginas creadas con GemPages, puede agregar CSS personalizado en el panel de configuración > pestaña Avanzada > Sección CSS.
Ejemplo: Ajustar el tamaño de la fuente raíz con consultas de medios
:root {
font-size: 100%; /* base 16px */
}
@media (max-width: 600px) {
:root {
font-size: 93.75%; /* ~15px for smaller screens */
}
}
Esto garantiza que su fuente se reduzca ligeramente en el móvil, manteniendo el equilibrio visual sin alterar el diseño.
Errores comunes y soluciones rápidas
| Error | Problema | Quick Fix |
| Mezcla de unidades px y rem | Escala inconsistente | Utilice rem en todo el sitio para mayor previsibilidad |
| Abusar ! Importantes | Difícil de anular | Utilice la especificidad CSS adecuada |
| Codificación rígida de fuentes pequeñas | Perjudica la legibilidad en dispositivos móviles | Siga la regla de base mínima de 16 px |
| Olvidando el escalamiento responsivo | El texto se ve demasiado grande o pequeño en algunos dispositivos | Agregar la extensión de abrazadera() o consultas de medios |
Preguntas frecuentes sobre el tamaño de fuente CSS
1. ¿Cuál es la mejor unidad de tamaño de fuente para usar en CSS?
Usa rem En la mayoría de los casos, se escala desde el elemento raíz, lo que lo hace responsivo y accesible.
2. ¿Cuál es el tamaño de fuente ideal para el cuerpo de los sitios web?
Aproximadamente 16 píxeles (1 rem) Para el cuerpo del texto. Puedes aumentarlo para una mejor legibilidad, especialmente en dispositivos móviles.
3. ¿Cómo cambio el tamaño de fuente en Shopify?
Volver Personalizador de temas > Ajustes de tipografíaSi su tema no ofrece esto, utilice CSS personalizado o el elemento Tipografía de GemPages.
4. ¿Un texto más pequeño es malo para el SEO?
Indirectamente, sí. Una mala legibilidad aumenta las tasas de rebote, lo que puede afectar las métricas de interacción que influyen en el SEO.
gracias por tus comentarios