HomeCasa Prompts

Escala tipográfica para un sistema de diseño con tokens y CSS fluido

Define una escala tipográfica completa: proporción justificada, tamaños, interlineados y pesos por estilo, tipografía fluida con clamp(), reglas de lectura, accesibilidad y tokens en JSON y CSS. Pensado para ChatGPT, Claude, Gemini y Microsoft Copilot. Incluye 6 variables personalizables y se copia gratis en un clic.

Intermedio · Texto · Pendiente de revisión editorial

Pensado para:

Prompt

Actúa como diseñador tipográfico y de sistemas de diseño.

Contexto:
- Producto o marca: {{producto}}
- Plataformas: {{plataformas}}
- Familias tipográficas disponibles: {{fuentes}}
- Tamaño base del texto: {{tamano_base}}
- Proporción preferida: {{proporcion}}
- Tipo de contenido predominante: {{contenido}}

Entregables:
1. Recomendación de proporción: confirma o cuestiona la indicada según el tipo de contenido (las proporciones grandes funcionan en marketing, las pequeñas en interfaces densas) y explica por qué.
2. Tabla de la escala con 8-10 estilos (display, h1-h4, cuerpo grande, cuerpo, cuerpo pequeño, etiqueta, caption): nombre del token, tamaño en px y rem, interlineado, peso, espaciado entre letras y uso recomendado.
3. Tipografía fluida para titulares con clamp(), indicando el ancho de viewport mínimo y máximo usados en el cálculo.
4. Diferencias entre móvil y escritorio, y ajustes para las plataformas indicadas.
5. Reglas de párrafo: longitud de línea de 45-75 caracteres, espacio entre párrafos y jerarquía en listas y tablas.
6. Accesibilidad: unidades rem, ampliación al 200 %, tamaños mínimos legibles, interlineado de al menos 1,5 en cuerpo y soporte del espaciado de texto exigido por WCAG 1.4.12.
7. Tokens en JSON (formato compatible con Design Tokens) y en variables CSS.
8. Cinco reglas de uso: qué hacer y qué evitar.

Restricciones:
- No inventes métricas de las fuentes (altura x, pesos disponibles); si las necesitas, márcalas como [COMPLETAR].
- Recuerda comprobar la licencia de las fuentes para web y app.
- Redondea los tamaños a valores prácticos y explica los redondeos. Si falta información clave, pregúntame antes.

Formato: tabla de la escala, bloques de código JSON y CSS, y lista de reglas.

Cómo usarlo

  1. Indica las fuentes que ya tienes licenciadas y el tamaño base. 2. Revisa si la proporción recomendada encaja con tu contenido. 3. Importa los tokens JSON en tu herramienta de tokens o copia las variables CSS a tu proyecto.

Ejemplo de uso

Producto: panel de analítica · Fuentes: Inter y JetBrains Mono · Base: 16 px · Proporción: 1,2 · Contenido: interfaz densa.

Resultado de ejemplo

1. Proporción

Confirmo 1,2 (tercera menor): en una interfaz densa con tablas, una proporción mayor dispararía el tamaño de los títulos y robaría espacio a los datos.

2. Escala (base 16 px)

TokenpxremInterlineadoPesoUso
display4831,1700Cifra destacada del panel
h1402,51,15700Título de página
h23221,2600Sección
h3281,751,25600Tarjeta
h4241,51,3600Subsección
body-lg201,251,5400Introducciones
body1611,5400Texto general
body-sm140,8751,5400Celdas de tabla
caption120,751,4500Ejes y notas

Redondeo: 1,2ⁿ da 19,2 · 23,04 · 27,65 · 33,18 · 39,81; redondeo a múltiplos de 4 para encajar en la retícula de 4 px.

3. Tipografía fluida (360-1280 px)

:root {
  --font-ui: "Inter", system-ui, sans-serif;
  --font-figures: "JetBrains Mono", ui-monospace, monospace;
  --text-body: 1rem;
  --text-h1: clamp(2rem, 1.804rem + 0.87vw, 2.5rem);
  --leading-body: 1.5;
}

Recuerda revisar las licencias de Inter y JetBrains Mono para web y apps. Métricas como la altura x: [COMPLETAR]…

Datos clave

Categoría
Diseño UI/UX · Design systems
Tipo de resultado
Texto
Nivel
Intermedio
Pensado para
ChatGPT, Claude, Gemini y Microsoft Copilot
Verificado en
Pendiente de verificación editorial
Variables
Producto o marca, Plataformas, Familias tipográficas, Tamaño base, Proporción y Contenido predominante
Idioma
Español
Precio
Gratis, sin registro
Actualizado
07/11/2026

Preguntas frecuentes

¿Qué proporción tipográfica elegir?

Para interfaces densas suelen funcionar proporciones suaves como 1,125 o 1,2; para webs de marketing o editoriales, 1,25 o 1,333 dan más contraste entre titulares y texto.

¿Por qué usar rem en lugar de px?

Porque el rem respeta el tamaño de texto que el usuario configura en su navegador, lo que mejora la accesibilidad cuando alguien necesita letra más grande.

¿Para qué sirve este prompt?

Define una escala tipográfica completa: proporción justificada, tamaños, interlineados y pesos por estilo, tipografía fluida con clamp(), reglas de lectura, accesibilidad y tokens en JSON y CSS.

¿Con qué herramientas de IA funciona?

Está pensado para ChatGPT, Claude, Gemini y Microsoft Copilot. Todavía no lo hemos verificado en estas herramientas, por lo que los resultados pueden variar entre ellas.

¿Cómo personalizo el prompt?

Pulsa «Personalizar» y rellena las variables (Producto o marca, Plataformas, Familias tipográficas, Tamaño base, Proporción y Contenido predominante). El texto se actualiza al instante y después puedes copiarlo con un clic. Los valores se guardan solo en tu navegador.

¿Necesito experiencia para usarlo?

Es de nivel intermedio: conviene que conozcas el tema para aportar buen contexto y revisar el resultado con criterio.

¿Este prompt es gratis?

Sí. Todos los prompts de HomeCasa Prompts son gratuitos, sin registro ni suscripción. Puedes usarlos también en proyectos profesionales.

¿Puedo fiarme del resultado de la IA?

Úsalo como un borrador de calidad: revisa siempre datos, cifras y afirmaciones importantes antes de publicarlos o tomar decisiones.

Prompts relacionados