A tipografia do template

Cada amostra abaixo é o elemento HTML de verdade, não uma cópia fantasiada. Você copia a marcação e leva junto a semântica que o leitor de tela e o buscador enxergam.

Títulos

Seis níveis que descrevem a estrutura do documento, não o tamanho da letra. Pular um nível quebra o mapa que o leitor de tela usa para navegar.

<h1>

À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz.

<h2>

À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz.

<h3>

À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz.

<h4>

À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz.

<h5>

À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz.

<h6>

À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz.

Parágrafos

O parágrafo é a unidade de leitura. Use hr para separar assuntos e pre quando os espaços e as quebras fizerem parte do conteúdo.

<p>

O navegador colapsa os espaços e as quebras do código-fonte: escreva o texto do jeito que for confortável, porque quem monta a linha é a largura da coluna.

Uma coluna confortável fica em torno de 65 caracteres por linha. Mais larga do que isso, o olho perde a linha toda vez que volta para a esquerda.

<hr>

<pre>

projeto/
  app/
    pages/      rotas
    assets/css/ estilo
  i18n/
    locales/    es, pt-BR, en

Blocos e inline

Dois contêineres sem significado próprio. Quando existir um elemento que signifique alguma coisa, é ele que entra.

<div>

div é contêiner de bloco: começa em linha nova e ocupa toda a largura disponível. Serve para agrupar e diagramar, e não acrescenta significado nenhum.

<span>

span é contêiner inline: envolve um trecho de texto sem quebrar a linha. Serve para pintar ou marcar uma parte da frase.

Formatação

Cada efeito tem um elemento que carrega o significado. Negrito por gosto é utility; negrito porque importa é strong.

<strong>Texto de importância alta, não apenas mais grosso.

<em>Ênfase que muda o sentido da frase.

<mark>Trecho realçado pela relevância neste contexto.

<small>Nota de rodapé, aviso legal ou letra miúda.

<del>~~Texto que uma revisão retirou.~~

<ins>Texto que uma revisão acrescentou.

<sub>_{Subscrito, para fórmulas e notas.}

<sup>^{Sobrescrito, para potências e chamadas.}

Citações

Marcação para citar alguém, abreviar uma sigla, dar um endereço de contato e inverter a direção da leitura.

Semântica não é decoração: é a única parte da marcação que continua trabalhando quando o CSS não chega a carregar. Manual de estilo do EchoSistema

<q>

Uma citação curta vem dentro da frase, assim: as aspas quem coloca é o navegador, seguindo o idioma do documento

<abbr>

A linguagem da web é o HTML e a sigla leva sempre a forma completa no título.

EchoSistema, Avenida da Plataforma 42, sala 3, São Paulo

Este texto se lê ao contrário

Código

Quatro elementos que dizem de onde o texto vem: o que se escreve, o que se digita, o que a máquina responde e o que é variável.

<code>font-family: var(--font-mono)

<kbd>Ctrl + K

<samp>Compilação concluída em 3,4 s

<var>larguraDaColuna

Links

O mesmo elemento navega dentro da página, abre o e-mail, disca um telefone e sai do site. O que muda é só o destino.

Um link leva para uma âncora desta mesma página, ola@echosistema.online ou para um site externo.

O link externo abre em outra aba e vai com rel noopener: sem ele, a página aberta ganha uma referência à nossa.

Imagens

A imagem entra com a descrição e as medidas. figure amarra a imagem à legenda, e picture escolhe a fonte conforme a largura da tela.

O alt descreve o que existe na imagem; a legenda comenta o que se vê. São textos diferentes e os dois são necessários.

picture escolhe a fonte por largura ou por formato; srcset dentro de img escolhe a densidade. Aqui, acima de 40rem você vê a bandeira da Espanha no lugar da anterior.

Semânticos

Os marcos da página. Um leitor de tela salta de um para outro, e cada nome promete uma coisa diferente.

O cabeçalho da página ou de uma seção: título, logo e o que a apresenta.

<nav>

Um bloco de links de navegação principal, não qualquer lista de links.

<main>

O conteúdo próprio desta página, um só por documento.

Um trecho temático do conteúdo, com título próprio.

Uma peça que se entende sozinha, mesmo fora desta página.

<aside>

Conteúdo relacionado, porém secundário, como uma barra lateral.

O rodapé da página ou da seção: autoria, contato e links legais.

Conteúdo citado a partir do texto, com legenda opcional.

Um bloco que abre e fecha, com teclado e estado, sem uma linha de script.

<time>

Uma data ou hora que a máquina lê no atributo datetime.

A estrutura montada: os mesmos marcos, um dentro do outro, vestidos pelo sistema.

O cabeçalho da página ou de uma seção: título, logo e o que a apresenta.

Um trecho temático do conteúdo, com título próprio.

Uma peça que se entende sozinha, mesmo fora desta página.

2026-08-05

Por que preferir details a um acordeão feito à mão?

Porque o navegador já entrega teclado, foco, estado aberto e fechado, e até a busca dentro da página. O script entra só quando o comportamento pede mais do que o elemento dá.

Entidades

Quando o caractere é sintaxe do HTML ou não está no seu teclado, ele se escreve pelo nome.

Código	Sai	Quando usar
` `	␣	Espaço que não deixa a linha quebrar entre duas palavras.
`<`	<	Sinal de menor que, para mostrar marcação sem que ela seja interpretada.
`>`	>	Sinal de maior que, o fechamento do par anterior.
`&`	&	O ampersand literal, que no texto cru abre uma entidade.
`"`	"	Aspa dupla dentro do valor de um atributo.
`©`	©	Símbolo de copyright, o do rodapé.
`…`	…	Reticências como um caractere tipográfico único.
`×`	×	Sinal de multiplicação, o correto para medidas.

Codificação de URL

Um endereço só viaja em caracteres seguros. Todo o resto sai convertido em um porcento e dois dígitos.

Caractere	Codificado	Por quê
␣	`%20`	O espaço corta o endereço em servidores e em clientes de e-mail.
@	`%40`	Separa o usuário do host, então dentro de um valor ele vai codificado.
/	`%2F`	Separa os segmentos do caminho; quando é dado, vai codificado.
?	`%3F`	Abre a query string, então como texto ele vai codificado.
&	`%26`	Separa um parâmetro do seguinte dentro da query.
#	`%23`	Abre o fragmento, a parte do endereço que nunca chega ao servidor.

Atributos

O que cada elemento promete além do próprio nome. Estes oito aparecem em quase toda página.

lang

O idioma deste trecho: guia a pronúncia, as aspas e a separação silábica.

title

Texto de apoio que aparece ao passar o ponteiro; nunca a única fonte do dado.

alt

A descrição da imagem para quem não a vê, e também quando a imagem não carrega.

href

O destino do link: uma rota, uma âncora, um e-mail ou um telefone.

Um nome único no documento, destino de âncoras e de rótulos de formulário.

class

O gancho de estilo, repetível: nomeie o papel, nunca a cor.

data

Um dado próprio da aplicação, disponível no dataset do elemento.

aria

O que a acessibilidade precisa e a marcação não diz; o elemento certo sempre vence.

Famílias

Três famílias com papéis fixos. Nenhuma entra por gosto: cada uma tem o seu lugar no sistema.

Manrope

Display e corpo

Manrope monta os títulos e o texto corrido. É a voz principal do sistema.

Montserrat

Secundária

Montserrat entra na tagline e nos acentos institucionais, sempre em trechos curtos.

JetBrains Mono

Monoespaçada

JetBrains Mono para código, comandos e tudo o que se lê coluna por coluna.

Pesos

Os cinco pesos que o site carrega de verdade. Fora desta lista o navegador sintetiza, e o negrito sintético suja o traço da Manrope.

À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz. 400

À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz. 500

À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz. 600

À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz. 700

À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz. 800

Escala de espaço

Onze passos de margem e de padding, sobre uma base de 8px.

Espaço é a outra metade da tipografia: o que separa dois parágrafos é a mesma decisão que os dimensiona. O passo é 8px, e o 05 existe porque a metade dele é o único ajuste fino que aparece de verdade - abaixo disso o olho não separa 2px de 3px e a escala vira decoração.

Passo	Valor	Classes
`05`	0.25rem · 4px	`.es-margin-05` `.es-padding-05`
`1`	0.5rem · 8px	`.es-margin-1` `.es-padding-1`
`2`	1rem · 16px	`.es-margin-2` `.es-padding-2`
`3`	1.5rem · 24px	`.es-margin-3` `.es-padding-3`
`4`	2rem · 32px	`.es-margin-4` `.es-padding-4`
`5`	2.5rem · 40px	`.es-margin-5` `.es-padding-5`
`6`	3rem · 48px	`.es-margin-6` `.es-padding-6`
`7`	3.5rem · 56px	`.es-margin-7` `.es-padding-7`
`8`	4rem · 64px	`.es-margin-8` `.es-padding-8`
`9`	4.5rem · 72px	`.es-margin-9` `.es-padding-9`
`10`	5rem · 80px	`.es-margin-10` `.es-padding-10`

Classe	Propriedade	Onde aplica
`.es-margin-3`	`margin`	Os quatro lados.
`.es-margin-x-3`	`margin-inline`	Eixo horizontal, lógico: vira sozinho numa edição da direita para a esquerda.
`.es-margin-y-3`	`margin-block`	Eixo vertical, lógico.
`.es-margin-t-3`	`margin-top`	Só o topo.
`.es-margin-b-3`	`margin-bottom`	Só a base.
`.es-margin-l-3`	`margin-left`	Só a esquerda, física: não vira numa edição da direita para a esquerda.
`.es-margin-r-3`	`margin-right`	Só a direita, física.

Cada valor vem em sete formas: todos os lados, os dois eixos (-x-, -y-) e os quatro lados (-t-, -b-, -l-, -r-). Os eixos são lógicos e os lados são físicos, e a diferença é de propósito: x e y valem em qualquer direção de escrita, enquanto l e r dizem esquerda e direita e é isso que fazem. Num layout que precise virar, use os eixos. Elas são do sistema, e não do Tailwind, pelo mesmo motivo de .es-shell e .es-card: um site derivado que troque de utilitário não fica com o layout amarrado a um vocabulário de terceiros.

<div class="es-padding-3">…</div>
<div class="es-margin-y-2">…</div>
<div class="es-margin-t-4">…</div>
<div class="es-padding-x-05">…</div>

es-padding-3: o espaço fica DENTRO da borda.

es-margin-3: o espaço fica FORA da borda.

Regras

Quatro decisões que sustentam tudo o que veio antes.

Medida de leitura

Um parágrafo longo não passa de uns 65 caracteres por linha. Em coluna larga o olho perde a linha ao voltar para a esquerda.

Hierarquia

Os níveis de título descem de um em um. O tamanho se escolhe depois: primeiro vem a ordem do documento.

Peso

Dois pesos por tela bastam. Se tudo pesa, nada se destaca.

Semântica antes do estilo

Escolha o elemento pelo que ele significa e pinte depois. A utility se troca em um minuto; a semântica é o que as máquinas leem.

A tipografia do template

Títulos

À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz.

À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz.

À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz.

À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz.

À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz.

À noite, vovô Kowalsky vê o ímã cair no pé do pinguim queixoso e vovó põe açúcar no chá de tâmaras do jabuti feliz.

Parágrafos

Blocos e inline

Formatação

Citações

Código

Links

Imagens

Semânticos

Entidades

Codificação de URL

Atributos

Famílias

Pesos

Escala de espaço

Regras

Medida de leitura

Hierarquia

Peso

Semântica antes do estilo

Entrar

Criar conta

Recuperar a senha

Código	Sai	Quando usar
` `	␣	Espaço que não deixa a linha quebrar entre duas palavras.
`<`	<	Sinal de menor que, para mostrar marcação sem que ela seja interpretada.
`>`	>	Sinal de maior que, o fechamento do par anterior.
`&`	&	O ampersand literal, que no texto cru abre uma entidade.
`"`	"	Aspa dupla dentro do valor de um atributo.
`©`	©	Símbolo de copyright, o do rodapé.
`…`	…	Reticências como um caractere tipográfico único.
`×`	×	Sinal de multiplicação, o correto para medidas.

Código	Sai	Quando usar
` `	␣	Espaço que não deixa a linha quebrar entre duas palavras.
`<`	<	Sinal de menor que, para mostrar marcação sem que ela seja interpretada.
`>`	>	Sinal de maior que, o fechamento do par anterior.
`&`	&	O ampersand literal, que no texto cru abre uma entidade.
`"`	"	Aspa dupla dentro do valor de um atributo.
`©`	©	Símbolo de copyright, o do rodapé.
`…`	…	Reticências como um caractere tipográfico único.
`×`	×	Sinal de multiplicação, o correto para medidas.

Código	Sai	Quando usar
` `	␣	Espaço que não deixa a linha quebrar entre duas palavras.
`<`	<	Sinal de menor que, para mostrar marcação sem que ela seja interpretada.
`>`	>	Sinal de maior que, o fechamento do par anterior.
`&`	&	O ampersand literal, que no texto cru abre uma entidade.
`"`	"	Aspa dupla dentro do valor de um atributo.
`©`	©	Símbolo de copyright, o do rodapé.
`…`	…	Reticências como um caractere tipográfico único.
`×`	×	Sinal de multiplicação, o correto para medidas.