Un tema WordPress increíble y responsive
Heading 1 – El título más importante
3rem (48px) → 4.5rem (72px)
Heading 2 – Subtítulo principal
2.25rem (36px) → 3.375rem (54px)
Heading 3 – Título de sección
1.875rem (30px) → 2.8125rem (45px)
Heading 4 – Subtítulo de sección
1.5rem (24px) → 2.25rem (36px)
Heading 5 – Título menor
1.25rem (20px) → 1.875rem (30px)
Heading 6 – El título más pequeño
1.125rem (18px) → 1.6875rem (27px)
header.entry-header .entry-title – Título del Post
Archivo: Categoría Diseño Web
Título de Página
Este es un párrafo normal con texto en negrita y texto en cursiva. El tamaño base del texto es clamp(0.6667rem → 1rem), lo que significa que escala desde aproximadamente 10.67px en móviles hasta 16px en pantallas grandes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Este es un enlace de ejemplo que demuestra el estilo de los enlaces. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Este es texto pequeño usando la etiqueta small.
Texto en negrita con b y texto en negrita con strong.
Texto en cursiva con i y texto enfatizado con em.
Lista desordenada (ul)
- Primer elemento de la lista
- Segundo elemento con más texto para ver cómo se comporta el line-height
- Tercer elemento
- Subelemento nivel 1
- Subelemento nivel 2
- Cuarto elemento
Lista ordenada (ol)
- Primer paso del proceso
- Segundo paso importante
- Tercer paso
- Subpaso A
- Subpaso B
- Paso final
Esta es una cita importante que demuestra cómo se ve el estilo blockquote con el reset tipográfico aplicado. Las citas son esenciales para destacar contenido relevante.
— Autor de la cita
Texto normal después de la cita con referencia inline usando cite.
Código inline: const ejemplo = "Hola Mundo";
Bloque de código:
function saludar(nombre) {
console.log(`Hola ${nombre}!`);
return true;
}
saludar("Desarrollador");Variables: x = y + z
Teclado: Presiona Ctrl + C para copiar
Título del Artículo del Blog
Este es un extracto del artículo que muestra cómo se ve el texto de resumen en las páginas de archivo y blog.
3 Comentarios
Deja un comentario
Calle Ejemplo, 123
28001 Madrid, España
info@ejemplo.com
Esta es una descripción de archivo que muestra cómo se ve el texto descriptivo en las páginas de categorías y archivos.
Página no encontrada – Error 404
Texto con clase capitalize
Texto solo para lectores de pantalla(El texto anterior está oculto visualmente)
Cómo usar esta página de pruebas:
- En WordPress: Crea una nueva página y pégala en modo HTML/Código
- Asegúrate de: Tener el tema Astra activo
- Carga el reset: Añade tu archivo
astra-typography-reset.css - Cambia el tamaño: Redimensiona la ventana para ver la tipografía responsive
- Inspecciona: Usa las DevTools para verificar los valores de
clamp()
Viewports a probar:
- 320px – Móvil pequeño (valores mínimos)
- 768px – Tablet
- 1024px – Desktop pequeño
- 1920px – Desktop grande (valores máximos)
- 2560px+ – 4K (valores fijos máximos)
Este es un comentario de ejemplo que muestra cómo se ven los comentarios con el reset tipográfico aplicado.