Typography Scalepor Owl-Listener

Typography Scale Skill.

Crie uma hierarquia legível a partir de um pequeno conjunto de estilos de texto documentados.

Design de UI
Tipografia

Revisão da fonte · Typography ScaleSKILL.md

Tarefa Design de UI Produz • Uma escala de estilos de texto nomeados, com tamanho, peso, altura de linha e espaçamento entre letras. • Atribuição de funções de fonte para corpo de texto, títulos e texto técnico. • Regras de uso responsivo e verificações com conteúdo real. Antes de começar Exige os arquivos de fonte reais ou as fontes disponíveis na plataforma para uma validação visual significativa.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Construa um sistema tipográfico coerente

Uma referência de sistema tipográfico que abrange tamanhos modulares, peso, entrelinha, espaçamento entre letras, funções de fonte e uso responsivo.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Typography Scale combina relações de tamanho com peso, altura de linha e espaçamento entre letras. Ela trata um sistema tipográfico como mais do que uma sequência de tamanhos de fonte: uma legenda, um parágrafo de corpo, um título e uma linha de destaque exigem funções e condições de uso diferentes.

A fonte inclui exemplos de proporções modulares e escolhas de funções de fonte, além de orientações para dispositivos móveis sobre títulos e medida de leitura. Essas são regras iniciais para testar com conteúdo real. Ela não afirma que uma proporção matemática, por si só, garanta tipografia legível em todas as fontes ou escritas.

Entregas esperadas

Uma escala de estilos de texto nomeados, com tamanho, peso, altura de linha e espaçamento entre letras.
Atribuição de funções de fonte para corpo de texto, títulos e texto técnico.
Regras de uso responsivo e verificações com conteúdo real.

Ver o briefing de exemplo

Do briefing à revisão

01
Escolha a relação base
Selecione uma linha de base para o corpo e uma proporção adequadas ao conteúdo e à marca existente.
02
Defina estilos completos
Combine cada tamanho com peso, entrelinha, espaçamento entre letras e uma função de uso clara.
03
Teste texto real
Verifique títulos longos, parágrafos de corpo e larguras de dispositivos móveis; evite criar tamanhos desnecessários para corrigir casos isolados.

02 Quando usar

Quando usar

Exige os arquivos de fonte reais ou as fontes disponíveis na plataforma para uma validação visual significativa.

Boa opção

Estilos de texto inconsistentesÚtil quando um produto acumulou títulos e rótulos quase duplicados.
Fundamentos de novas UIsEstabelece as funções tipográficas antes que as telas inventem suas próprias escalas.

Limites a verificar

Não é apenas medida de leituraO comprimento da linha importa, mas esta skill trata de um sistema tipográfico mais amplo.
Não é uma licença de fonteA escolha e o uso de fontes ainda exigem licenciamento adequado e disponibilidade na plataforma.

Traga estes insumos

Fontes e marcaInforme as famílias aprovadas, os pesos disponíveis e as restrições existentes.
Amostras de conteúdoInclua rótulos, títulos, parágrafos, código ou exibições numéricas realistas.
Contextos de telaDescreva os requisitos de dispositivos móveis, interfaces densas e leitura longa.

03 Decisões importantes

Decisões que importam

Estilos carregam funções
Casos de uso documentados reduzem decisões arbitrárias entre tamanhos vizinhos.
Dispositivos móveis sem reduzir tudo
A fonte distingue reduzir os títulos de preservar um tamanho de corpo legível.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a configuração

Use o método de instalação documentado no repositório e mantenha todos os arquivos complementares referenciados. Esta entrada descreve um método de design focado, não um aplicativo executável.

Arquivo de origem upstream

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/typography-scale/SKILL.md

Exige os arquivos de fonte reais ou as fontes disponíveis na plataforma para uma validação visual significativa.

Comece com uma única entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use typography-scale em um aplicativo de leitura para pesquisa com texto de artigos, anotações, rótulos de navegação e trechos de código. Defina uma escala modular contida, com valores de estilo completos e comportamento de títulos em dispositivos móveis. Teste com os títulos e parágrafos longos fornecidos, em vez de texto de preenchimento.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

Todo estilo inclui mais do que um valor de tamanho de fonte.
As funções de texto frequentes usam um conjunto limitado de estilos.
Títulos longos e texto de corpo continuam legíveis em larguras estreitas.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída no pacote nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Leia o guia de início rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Proprietário da fonte: Owl-Listener
Repositório: Owl-Listener/designer-skills
Arquivo da skill: ui-design/skills/typography-scale/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · 9a6930cf84a8

Resumo editorial da fonte

Uma referência de sistema tipográfico que abrange tamanhos modulares, peso, entrelinha, espaçamento entre letras, funções de fonte e uso responsivo.

Resumo original de OpenDesign, com base na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Uma escala modular escolhe a fonte?

Não. A proporção organiza os tamanhos; a escolha da fonte e a renderização real ainda exigem julgamento.

Todos os tamanhos de desktop devem diminuir em dispositivos móveis?

A fonte sugere reduzir os títulos, preservando um tamanho de corpo legível e ajustando o comprimento da linha.

Quantos estilos devem ser usados regularmente?

A fonte recomenda limitar o uso rotineiro a um pequeno conjunto, documentando funções adicionais, como legendas ou texto de destaque.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Ver skills de design