HomeCasa Prompts

Escala tipográfica para um design system com tokens e CSS fluido

Define uma escala tipográfica completa: proporção justificada, tamanhos, entrelinhas e pesos por estilo, tipografia fluida com clamp(), regras de leitura, acessibilidade e tokens em JSON e CSS. Pensado para ChatGPT, Claude, Gemini e Microsoft Copilot. Inclui 6 variáveis personalizáveis e pode copiá-lo gratuitamente com um clique.

Intermédio · Texto · Pendente de revisão editorial

Pensado para:

Prompt

Atua como tipógrafo e designer de design systems.

Contexto:
- Produto ou marca: {{produto}}
- Plataformas: {{plataformas}}
- Famílias tipográficas disponíveis: {{fontes}}
- Tamanho base do texto: {{tamanho_base}}
- Proporção preferida: {{proporcao}}
- Tipo de conteúdo predominante: {{conteudo}}

Entregáveis:
1. Recomendação de proporção: confirma ou questiona a escolhida em função do conteúdo (proporções grandes funcionam em marketing, pequenas em interfaces densas) e explica porquê.
2. Tabela da escala com 8 a 10 estilos (display, h1-h4, corpo grande, corpo, corpo pequeno, etiqueta, legenda): nome do token, tamanho em px e rem, entrelinha, peso, espaçamento entre letras e uso recomendado.
3. Tipografia fluida para títulos com clamp(), indicando a largura mínima e máxima de viewport usadas no cálculo.
4. Diferenças entre telemóvel e computador e ajustes para as plataformas indicadas.
5. Regras de parágrafo: 45 a 75 caracteres por linha, espaço entre parágrafos e hierarquia em listas e tabelas.
6. Acessibilidade: unidades rem, ampliação a 200 %, tamanhos mínimos legíveis, entrelinha de pelo menos 1,5 no corpo e suporte ao espaçamento de texto exigido pelo critério WCAG 1.4.12.
7. Tokens em JSON (formato compatível com Design Tokens) e em variáveis CSS.
8. Cinco regras de utilização: o que fazer e o que evitar.

Restrições:
- Não inventes métricas das fontes (altura-x, pesos disponíveis); se precisares delas, marca-as como [PREENCHER].
- Lembra-me de verificar as licenças das fontes para web e app.
- Arredonda os tamanhos para valores práticos e explica os arredondamentos. Se faltar informação essencial, pergunta primeiro.

Formato: tabela da escala, blocos de código JSON e CSS e lista de regras.

Como utilizar

  1. Indica as fontes que já tens licenciadas e o tamanho base. 2. Confirma se a proporção recomendada se adequa ao teu conteúdo. 3. Importa os tokens JSON na tua ferramenta de tokens ou copia as variáveis CSS para o projeto.

Exemplo de utilização

Produto: painel de analítica · Fontes: Inter e JetBrains Mono · Base: 16 px · Proporção: 1,2 · Conteúdo: interface densa.

Exemplo de resultado

1. Proporção

Confirmo 1,2 (terceira menor): numa interface densa com tabelas, uma proporção maior aumentaria demasiado os títulos e roubaria espaço aos dados.

2. Escala (base 16 px)

TokenpxremAltura de linhaPesoUso
display4831,1700Número-chave do painel
h1402,51,15700Título de página
h23221,2600Secção
h3281,751,25600Cartão
h4241,51,3600Subsecção
body-lg201,251,5400Introduções
body1611,5400Texto corrente
body-sm140,8751,5400Células de tabela
caption120,751,4500Eixos e notas

Arredondamento: 1,2ⁿ dá 19,2 · 23,04 · 27,65 · 33,18 · 39,81; arredondo a múltiplos de 4 para encaixar na grelha de 4 px.

3. Tipografia 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;
}

Lembra-te de verificar as licenças da Inter e da JetBrains Mono para web e apps. Métricas como a altura-x: [PREENCHER]…

Dados-chave

Categoria
Design UI/UX · Design systems
Tipo de resultado
Texto
Nível
Intermédio
Pensado para
ChatGPT, Claude, Gemini e Microsoft Copilot
Verificado em
Pendente de verificação editorial
Variáveis
Produto ou marca, Plataformas, Famílias tipográficas, Tamanho base, Proporção e Conteúdo predominante
Idioma
Português
Preço
Gratuito, sem registo
Atualizado
07/11/2026

Perguntas frequentes

Que proporção tipográfica escolher?

Interfaces densas costumam funcionar com proporções suaves como 1,125 ou 1,2; sites de marketing ou editoriais beneficiam de 1,25 ou 1,333 para dar mais contraste entre títulos e texto.

Porquê usar rem em vez de px?

Porque o rem respeita o tamanho de texto definido pelo utilizador no navegador, o que melhora a acessibilidade para quem precisa de letra maior.

Para que serve este prompt?

Define uma escala tipográfica completa: proporção justificada, tamanhos, entrelinhas e pesos por estilo, tipografia fluida com clamp(), regras de leitura, acessibilidade e tokens em JSON e CSS.

Com que ferramentas de IA funciona?

Foi pensado para ChatGPT, Claude, Gemini e Microsoft Copilot. Ainda não o verificámos nestas ferramentas, pelo que os resultados podem variar entre elas.

Como personalizo o prompt?

Clique em “Personalizar” e preencha as variáveis (Produto ou marca, Plataformas, Famílias tipográficas, Tamanho base, Proporção e Conteúdo predominante). O texto atualiza-se instantaneamente e pode depois copiá-lo com um clique. Os valores ficam guardados apenas no seu navegador.

Preciso de experiência para o utilizar?

É de nível intermédio: convém conhecer o tema para fornecer bom contexto e rever o resultado com sentido crítico.

Este prompt é gratuito?

Sim. Todos os prompts do HomeCasa Prompts são gratuitos, sem registo nem subscrição. Pode também utilizá-los em projetos profissionais.

Posso confiar no resultado da IA?

Trate-o como um rascunho de qualidade: verifique sempre os dados, os números e as afirmações importantes antes de publicar ou tomar decisões.

Prompts relacionados