Stylepack

Fuentes

Las fuentes que usa notion.com

notion.com compone sus titulares y su texto de cuerpo en NotionInter. NotionInter es una fuente con licencia que el sitio sirve por su cuenta. La alternativa gratuita más parecida en Google Fonts: Inter.

Medido en notion.com hace 4 días.

Abrir el paquete de diseño completoDescargar el paquete

Familias tipográficas

2 familias
NotionInter
Se usa para
h1, h2, h3, body, button, label
Origen
Autoalojada
Alternativa gratuita
Inter
Lyon Text
Se usa para
body
Origen
Autoalojada
Alternativa gratuita
Inter

CSS para reproducirlo

Variables de fuente con la alternativa gratuita en la pila, así el mismo CSS funciona con o sin la fuente con licencia.

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

Cómo se compone el texto

headline-displayQuick brown foxNotionInter / 96px / 600 / lh 100px / -4.6px
headline-lgQuick brown foxNotionInter / 22px / 700 / lh 28px / -0.25px
headline-mdQuick brown foxNotionInter / 16px / 700 / lh 24px
body-mdThe quick brown fox jumps over the lazy dogLyon Text / 18px / 400 / lh 28px
label-mdThe quick brown fox jumps over the lazy dogNotionInter / 14px / 400 / lh 20px
buttonThe quick brown fox jumps over the lazy dogNotionInter / 14px / 400 / lh 20px
Tamaños de fuente en uso
141618202242547296

Para agentes de IA

El paquete es texto plano, sin clave: descarga DESIGN.md o entrega el paquete completo a Claude Code, Cursor o Copilot con el servidor MCP.

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

Preguntas

¿Qué fuente usa notion.com?

notion.com usa NotionInter, Lyon Text. Los titulares van en NotionInter y el texto de cuerpo en NotionInter, medido en el sitio tal como se renderiza, no leído de su hoja de estilos.

¿La fuente de notion.com es gratuita?

No. NotionInter es una fuente con licencia que notion.com sirve por su cuenta. La alternativa gratuita más parecida es Inter, disponible en Google Fonts. El CSS de esta página la pone en la pila de fuentes como sustituta.

¿Cómo consigo la misma tipografía que notion.com en mi proyecto?

Descarga el paquete de diseño de notion.com en Stylepack: contiene la pila de fuentes, la escala tipográfica, cada estilo de texto y las capturas, en un formato con el que un agente de programación con IA como Claude Code o Cursor puede construir.