Saltar al contenido

Tipografía

Estable

PP Neue Montreal Variable — tres tiers de escala, cuatro pesos y tracking.

La voz tipográfica de Polen es PP Neue Montreal, tanto para display como para body, self-hosted y cargada con next/font/local. Toda la escala son tokens oficiales del sistema (colección Typography en Figma); estas páginas la renderizan directo desde esos tokens.

La escala se organiza en tres tiers, cada uno con su tamaño y su interlineado emparejado:

  • text (12–24 px) — cuerpo, UI y controles.
  • heading (32–72 px) — títulos de sección y de página.
  • display (96–192 px) — piezas de marca y hero.

Cada tier va de xs a 2xl. A eso se suman 4 pesos (regular 400, medium 500, semibold 600, bold 700) y una escala de letter spacing en px para texto en mayúsculas.

Specimen

Escribí tu propio texto y recorré la escala real: cada línea muestra su token, su tamaño y su interlineado (tamaño/interlineado).

Text

Cuerpo, UI y controles — 12 a 24 px.
text-2xl24/32

Un sistema, una voz visual.

text-xl20/30

Un sistema, una voz visual.

text-lg18/28

Un sistema, una voz visual.

text-md16/24

Un sistema, una voz visual.

text-sm14/20

Un sistema, una voz visual.

text-xs12/18

Un sistema, una voz visual.

Heading

Títulos de sección y de página — 32 a 72 px.
heading-2xl72/104

Un sistema, una voz visual.

heading-xl64/92

Un sistema, una voz visual.

heading-lg48/72

Un sistema, una voz visual.

heading-md40/64

Un sistema, una voz visual.

heading-sm36/56

Un sistema, una voz visual.

heading-xs32/52

Un sistema, una voz visual.

Display

Piezas de marca y hero — 96 a 192 px.
display-2xl192/252

Un sistema, una voz visual.

display-xl176/232

Un sistema, una voz visual.

display-lg160/212

Un sistema, una voz visual.

display-md144/192

Un sistema, una voz visual.

display-sm128/172

Un sistema, una voz visual.

display-xs96/132

Un sistema, una voz visual.

Pesos

PP Neue Montreal Variable — 4 pesos oficiales.
regular400

Un sistema, una voz visual.

medium500

Un sistema, una voz visual.

semibold600

Un sistema, una voz visual.

bold700

Un sistema, una voz visual.

Letter spacing

Para eyebrows y labels en mayúsculas. Default = xs (0).
xs0px

Un sistema, una voz visual.

sm2px

Un sistema, una voz visual.

md4px

Un sistema, una voz visual.

lg6px

Un sistema, una voz visual.

xl8px

Un sistema, una voz visual.

Reglas de uso

  • Elegí el tier por rol, no por tamaño. El cuerpo siempre sale de text, aunque un heading-xs (32) y algún text grande se parezcan.
  • El peso de trabajo es Medium (500). Regular (400) para cuerpo largo; Semibold (600) y Bold (700) para énfasis fuerte, con moderación.
  • El interlineado viene con el token — no lo ajustes a mano; usá el par tamaño/interlineado que define cada paso.
  • Letter spacing solo en mayúsculas. El texto normal usa xs (0); la escala smxl es para eyebrows y labels en caja alta.