Stylepack

Fontes

As fontes que o mercury.com usa

O mercury.com usa arcadiaDisplay nos títulos e arcadia no texto corrido. arcadiaDisplay é uma fonte licenciada que o próprio site serve. A alternativa gratuita mais próxima no Google Fonts: Inter.

Medido no mercury.com há 4 dias.

Abrir o pacote de design completoBaixar o pacote

Famílias de fontes

2 famílias
arcadiaDisplay
Usada em
h1, h2
Origem
Auto-hospedada
Alternativa gratuita
Inter
arcadia
Usada em
body, label, button
Origem
Auto-hospedada
Alternativa gratuita
Inter

CSS para reproduzir

Variáveis de fonte com a substituta gratuita na pilha, para que o mesmo CSS funcione com ou sem a fonte licenciada.

:root {
  --font-heading: "arcadiaDisplay", "Inter", sans-serif; /* Inter stands in for arcadiaDisplay */
  --font-body: "arcadia", "Inter", sans-serif; /* Inter stands in for arcadia */
  --font-size-base: 12px;
}

Como o texto é composto

headline-displayQuick brown foxarcadiaDisplay / 49.3472px / 480 / lh 54.2819px
headline-lgQuick brown foxarcadiaDisplay / 28px / 480 / lh 33.6px / 0.42px
headline-mdQuick brown foxarcadia / 24px / 400 / lh 1.4
body-mdThe quick brown fox jumps over the lazy dogarcadia / 12px / 400 / lh 16.8px / 0.24px
label-mdThe quick brown fox jumps over the lazy dogarcadia / 16px / 400 / lh 24px
buttonThe quick brown fox jumps over the lazy dogarcadia / 16px / 480 / lh 21.6px
Tamanhos de fonte em uso
121618284249

Para agentes de IA

O pacote é texto puro, sem chave: busque o DESIGN.md ou entregue o pacote inteiro ao Claude Code, Cursor ou Copilot pelo servidor MCP.

curl -s https://stylepack.ai/packs/mercury.com/DESIGN.md

Perguntas

Qual fonte o mercury.com usa?

O mercury.com usa arcadiaDisplay, arcadia. Os títulos são compostos em arcadiaDisplay e o texto corrido em arcadia, medidos no site como ele é renderizado, não lidos da folha de estilos.

A fonte do mercury.com é gratuita?

Não. arcadiaDisplay é uma fonte licenciada que o próprio mercury.com serve. A alternativa gratuita mais próxima é Inter, disponível no Google Fonts. O CSS desta página a coloca na pilha de fontes como substituta.

Como ter a mesma tipografia do mercury.com no meu projeto?

Baixe o pacote de design do mercury.com no Stylepack: ele traz a pilha de fontes, a escala tipográfica, todos os estilos de texto e as capturas de tela, em um formato que um agente de código com IA, como Claude Code ou Cursor, consegue usar para construir.