Tutoriales
Claude Opus 5.5 para saltos de tipografía en páginas de producto
Pide a Claude Opus 5.5 que diagnostique el cambio de fuente con evidencias de carga y el CSS real, no solo con una captura terminada.
Pide a Claude Opus 5.5 que diagnostique el cambio de fuente con evidencias de carga y el CSS real, no solo con una captura terminada. Compara el mismo titular antes y después de cargar la fuente prevista. El objetivo es conservar legibles la promesa del producto y el botón durante la carga, sin ocultar texto ni reducirlo hasta disimular el problema.
Captura la transición relevante
Registra ancho, navegador, idioma, familia y peso, además de una carga sin caché y otra con caché. Incluye tiempos de petición y número de líneas. Una pregunta sobre fuentes momentáneamente incorrectas ilustra cómo la caché puede ocultar el problema. Es un relato personal, no un ensayo de este procedimiento.
web.dev explica que distintas dimensiones entre la fuente web y su alternativa pueden mover contenido. Es un mecanismo que investigar, no la demostración de que cualquier botón desplazado tenga esa causa.
| Observación | Primera investigación | Atajo que evitar |
|---|---|---|
| El titular gana una línea | Anchura alternativa y peso previsto | Recortar afirmaciones aprobadas |
| La imagen se mueve antes que el texto | Dimensiones y espacio reservado | Cambiar fuentes inmediatamente |
| Solo se corta un idioma | Glifos y saltos de ese idioma | Aplicar una proporción latina a todo |
| Solo falla la primera carga | Descubrimiento y secuencia de peticiones | Informar únicamente del resultado con caché |
Convierte una captura en una pregunta medible
Supón una pantalla ficticia de 360 píxeles con 24 de margen a cada lado: quedan 312. El titular ocupa dos líneas de 40 píxeles con la alternativa y tres tras el cambio. Su altura pasa de 80 a 120: aumenta 40. Son entradas aritméticas ilustrativas, no medidas de Opus ni una puntuación CLS.
Comprueba si el CTA se desplaza esos mismos 40 píxeles y si cambia otro elemento. Mantén texto, peso, anchura y navegador. Una caja de altura fija puede reducir el movimiento en ese ejemplo y cortar una traducción larga. Prueba el texto aprobado más largo; no universalices la captura inglesa.
Elige la reparación mínima justificada
Una alternativa más parecida es una opción. MDN describe size-adjust, que ajusta la escala de glifos y métricas. No copies un porcentaje arbitrario a todos los idiomas. Mide ambas fuentes con el peso real y verifica saltos y alineación de base.
Puede bastar con corregir un peso solicitado incorrectamente o descubrir antes la fuente crítica. Adelantar todos los pesos compite con las imágenes del producto. Cambiar `font-display` modifica una compensación; no garantiza siempre identidad inmediata y ausencia de movimiento. Documenta la razón y entrega un parche CSS reversible, no un rediseño completo.
Prompt para un parche basado en evidencias
Revisa esta transición tipográfica de una página de producto.
Entradas: titular exacto e idioma, ancho/márgenes, HTML/CSS, fuente y peso previstos,
alternativa disponible, capturas sin/con caché, tiempos y rectángulos medidos de título/botón.
Separa observaciones de hipótesis; no deduzcas tiempos de una sola imagen.
Comprueba si el cambio de fuente explica el movimiento antes de proponer CSS.
Conserva texto, jerarquía, contraste, tamaño legible y comportamiento del CTA.
Propón el parche mínimo, su compensación y cómo revertirlo.
No inventes porcentajes size-adjust ni supongas métricas iguales entre escrituras.
Devuelve pruebas antes/después para primera carga, caché, fuente bloqueada,
traducción larga, pantalla estrecha y texto ampliado.
El ancho 312 y la altura de 80 a 120 son hipotéticos;
no los presentes como mediciones del navegador ni derives de ellos una puntuación CLS.La guía de Opus 5.5 sirve de referencia del modelo. Es un proceso propuesto, no una superioridad medida frente a otro modelo.
Aprueba los estados de carga
Repite la captura con las mismas condiciones tras el parche. Comprueba primera visita, repetición y petición de fuente bloqueada. El texto debe seguir siendo usable aunque el archivo nunca llegue. Prueba cada escritura compatible, títulos largos y ampliación; observa la posición del botón, no solo el aspecto del titular.
Prepara imágenes en Panelly Studio después de entender la tipografía real, para que una imagen pulida no oculte una página inestable. No se implica integración con Opus. La revisión de landing pages aborda jerarquía y la revisión de estilo de marca coherencia visual; ninguna sustituye la prueba de llegada de fuentes.
Preguntas prácticas
**¿Una captura demuestra la solución?** No muestra la transición ni una petición que nunca termina. Conserva la secuencia y sus condiciones.
**¿Puedo prometer menos CLS?** Solo después de medir con herramientas y condiciones comparables. Una mejora local no equivale automáticamente a resultados de usuarios reales.
