O que só cresce e o que vai e volta.
Catraca é a peça que gira para um lado só. A parte de um site que serve para usar se comporta assim: a navegação ganha itens, a busca aparece onde não existia, o texto aumenta, e nada disso volta atrás. Na Aesop o menu foi de 4 para 11 itens; na Patagonia, de 2 para 9.
A parte que serve para parecer se comporta como um balanço. O título da Glossier saiu do negrito para o peso normal e perdeu a serifa. O da Casper fez o caminho contrário: engrossou e ganhou serifa. As duas mudanças aconteceram no mesmo período, em lojas do mesmo tipo.
Itens no menu: sobe em todas
Número de itens na navegação principal, captura antiga e 2026.
Peso do título: sem direção comum
Peso da fonte do título principal (300 é leve, 700 é negrito).
O tamanho do título também não tem direção: Glossier foi de 36 para 48 e depois para 20 a 32px; Saatva, de 36 para 40, 40 e 44px. A base resistiu: 5 das 8 lojas com série histórica mantiveram a mesma sans principal por oito anos.
Quatro combinações num card de produto
Interface em sans em 23 de 24 lojas, quase tudo em peso 400. A diferença está na segunda voz: serifa no nome do produto, mono no preço, ou nenhuma.
Produtos e preços são inventados. O que vem da pesquisa: variantes em botões ou amostras de cor (7 de 7 telas), nota em estrelas ao lado do título (5 de 7), foto em paisagem para colchão e móveis, retrato para moda, quadrado para beleza. Quando o texto não é preto, ele está na cor da marca: marrom na Saatva, verde na Tok&Stok.
O texto cresceu até 20px e parou
A lição das publicações serve a qualquer página institucional de leitura: corpo serifado, por volta de 20px, numa coluna de cerca de 620px.
A universidade abriu as inscrições para o primeiro semestre do ano que vem. As provas acontecem em dezembro, e o resultado sai antes do Natal. Quem já fez o Enem pode usar a nota das últimas edições e pular a redação. A secretaria confere os documentos em até dois dias úteis.
Georgia e Arial são as fontes reais de 2014. As de 2026 são próprias dos jornais; aqui aparecem em substitutas gratuitas. Nenhuma publicação diminuiu o texto nem trocou serifa por sans no corpo.
Dois polos: engenharia e marca quente
A escolha acompanha o que a marca precisa provar. Capacidade técnica pede sans com mono sobre fundo escuro; acolhimento pede serifa display sobre fundo claro e quente.
Marcas, textos e números dos dois exemplos são inventados. A pesquisa não tem série histórica dos sites premiados, então aqui há um retrato de 2026, sem "antes".
Na loja, o que se move é conteúdo
Lojas e publicações movem carrossel e vídeo. A animação de interface é marca dos sites premiados, e custa nota de acessibilidade.
Loja: carrossel com botão de pausa
Graza e Aesop oferecem botão para pausar a animação do herói. Zara e IKEA não carregam biblioteca de animação detectável.
Premiado: texto revelado letra a letra
Nos 9 premiados verificados, a nota média de acessibilidade é 6,78 contra 7,91 de animação. Dividir o texto em letras atrapalha leitores de tela, então cabe numa linha de herói e não no corpo.
Serifa ou não, por tipo de site
| Onde | Com serifa | Sem serifa | Mono |
|---|---|---|---|
| Loja | Só no nome do produto e no título de campanha.Colchão Aurora | Interface e texto, quase sempre em peso 400 e 14px.Adicionar ao carrinho · Frete grátis | Rótulos e preços.R$ 129,00 · 30 ML |
| Publicação e texto longo |
Corpo do texto e títulos.A universidade abriu as inscrições. | Menus, datas, assinatura, legendas.Assine · 14 nov 2026 · 6 min de leitura | Só como acento de rótulo e metadado.EDITORIA · 1.240 PALAVRAS |
| Institucional de produto |
Título display nas marcas de consumo.Wear your best life | Título e texto na maioria; grotesca neutra.Securing the skies | Segunda voz "de engenharia".FPS:: 60 · LCP:: 1.2s |
| Portfólio premiado |
Só como acento itálico; nunca voz principal.Yakushev | Neo-grotesca como voz principal, em display gigante.NOTHIN' | Ficha técnica e rótulos pequenos.[ ABOUT ] [ WORKS ] |
O que é medido e o que é leitura nossa.
Medido
- Fontes, tamanhos e pesos de 24 lojas e 15 artigos, lidos do estilo que o navegador aplicou em cada página (Chrome, janela de 1440 × 900, em 14 nov 2026).
- A série histórica: 8 lojas de 2018 a 2026 e 5 publicações de 2014 a 2026, pelas capturas do arquivo da web.
- As contagens dos 18 portfólios e dos 18 sites de produto, feitas no código de cada site, sem abrir a página.
- As notas de acessibilidade e de animação, que são as do próprio júri do prêmio.
Leitura nossa
- "Catraca" e "balanço" são o nosso resumo. Com 8 lojas e 5 publicações, é um padrão observado, não uma lei.
- As fontes dos mockups são substitutas gratuitas, e os tons de creme, azul-marinho e marrom são aproximações.
- O título da Allbirds em serifa é inferência: a medição diz que a serifa entrou e que o título tem 24px, mas não diz em qual família ele está.
- Indicar serifa para universidade, saúde e casa é extrapolação das marcas de consumo. Não há site desses setores na amostra.
Onde isso pode estar errado.
Só dois prêmios
"Premiado" aqui quer dizer Awwwards e CSS Design Awards. A inscrição é paga e o júri é formado por premiados anteriores, então a amostra mede o gosto de quem faz sites, não o que vende.
Só tela grande
Todas as medidas são de desktop. No Guardian, três em cada quatro leitores estão no celular, onde tamanho e coluna são outros.
Série curta
A história tem 8 lojas e 5 publicações, quase todas dos Estados Unidos e da Europa. Várias capturas antigas perderam imagens ou estilo, e só comparamos a página inicial.
Premiados sem abrir a página
Nos portfólios e sites de produto lemos o código, não a tela. Textura, espaçamento e ritmo da animação ficaram de fora, e não há série histórica deles: por isso a seção institucional não tem "antes".
Isto se aplica ao seu caso?
Conte em duas linhas que site você precisa refazer ou medir. A primeira conversa serve para ver se a medição resolve o seu caso, e, se não resolve, dizemos.
← Caderno de pesquisa · stickybit.com.br
- Amostras coletadas em 14 nov 2026: 24 lojas e 24 publicações abertas em navegador; 18 portfólios e 18 sites de produto premiados no Awwwards e no CSS Design Awards, lidos no código.
- Série histórica pelas capturas do Wayback Machine: lojas de 2018 a 2026, publicações de 2014 a 2026.
- Usabilidade de página de produto e de navegação: Baymard Institute, avaliação de 2026.
- Adoção de técnicas na web em geral: Web Almanac 2025 e relatórios do HTTP Archive.
- Nossas páginas: Depois do papel, a matéria viva (design para a web) · E-commerce para agentes de IA.