Sistema tipografico

Tipografia fluida con clamp(), escala modular Major Third (1.250). Piso 320px/16px, techo 1240px/18px. Redimensiona el navegador para ver la fluidez en accion.

Principios
01
Tipografia fluida con clamp()
Cada tamano se interpola entre un piso (movil) y un techo (desktop):
clamp(min, preferred, max)
Piso: viewport 320px, base 16px. Techo: viewport 1240px, base 18px. El texto se adapta suavemente — sin breakpoints, sin saltos.
02
Escala modular Major Third
Sn = Base × 1.250n
Cada nivel es ×1.25 el anterior. 8 niveles, de small (n=-2) a display (n=5). Sin tamanos arbitrarios.
03
2 familias, roles claros
Instrument Serif (italic y regular) para Display y H1–H3 — la voz editorial.
Geist (400–700) para H4–H6, body, UI — la voz funcional.
Geist soporta peso 300 — se usa para lectura principal y nav inactivo.
04
Line-height por contexto
Display: 1.05 — puro impacto visual.
Headings H1–H3: 1.15 — compacto pero respirable.
Subheadings H4–H6: 1.3 — transicion heading a body.
Body: 1.55 — lectura comoda.
Escala fluida — Major Third × clamp()
--text-small 10px → 12px El veloz zorro marron salta sobre el perro perezoso Geist n=-2
--text-h6 13px → 14px El veloz zorro marron salta sobre el perro perezoso Geist n=-1
--text-body 16px → 18px El veloz zorro marron salta sobre el perro perezoso Geist n=0
--text-h4 20px → 23px El veloz zorro marron salta sobre el perro Geist n=1
--text-h3 25px → 28px El veloz zorro marron salta Instrument n=2
--text-h2 31px → 35px El veloz zorro marron Instrument n=3
--text-h1 39px → 44px El veloz zorro Instrument n=4
--text-display 49px → 55px El veloz Instrument n=5
Roles semanticos
Display
El grito visual
Instrument Serif italic
V-Dashboard
Hola, Mari
size:var(--text-display)
weight:400
lh:1.05
ls:-0.03em
clamp(3.052rem, 2.919rem + 0.663vw, 3.433rem)
Usos
Display — numerico
KPI principal
Instrument Serif regular
V-Dashboard
$12,450Ingresos mes
142hHoras productivas
68%Margen bruto
size:var(--text-display)
weight:400
ls:0.05em
H1
El nombre del tema
Instrument Serif regular
Riders
Corporacion Fomenthum
size:var(--text-h1)
lh:1.15
ls:-0.02em
clamp(2.441rem, 2.335rem + 0.531vw, 2.747rem)
H2
Seccion principal
Instrument Serif regular
V-Dashboard
Rentabilidad mensualFinanzas
size:var(--text-h2)
lh:1.15
ls:-0.02em
clamp(1.953rem, 1.868rem + 0.425vw, 2.197rem)
H3
Subseccion
Instrument Serif regular
V-Dashboard
RetainersV-CrewMercury USD
size:var(--text-h3)
lh:1.15
clamp(1.563rem, 1.495rem + 0.340vw, 1.758rem)
H4
Titulo de card
Geist semibold
Todo
Bancolombia COPMercury USDDeuda con Mariana
size:var(--text-h4)
weight:600
lh:1.3
clamp(1.25rem, 1.196rem + 0.272vw, 1.406rem)
H5
Agrupador interno
Geist semibold
Todo
Resumen del periodo
size:var(--text-h5) = var(--text-body)
weight:600
lh:1.3
H6
Label funcional
Geist semibold
Todo
Distribucion por proyecto
size:var(--text-h6)
weight:600
lh:1.3
clamp(0.8rem, 0.765rem + 0.174vw, 0.9rem)
Overline
Etiqueta sobre el titulo
Geist bold uppercase
V-Dashboard
ProyectoHorasIngresoMargen
Tronex24h$3,20072%
Fomenthum18h$2,10065%
size:var(--text-small)
weight:700
transform:uppercase
ls:0.25em
Body
Texto de lectura principal
Geist regular (400)
Todo

Viceversable es un estudio de branding que transforma la identidad de marcas a traves de estrategia, diseno y storytelling. Cada proyecto pasa por tres fases: Explore, Create y Activate.

Este es texto secundario con peso 400 — usado para descripciones complementarias, notas y contenido de soporte que no requiere la misma prominencia.

size:var(--text-body)
weight:300 principal / 400 secundario
lh:1.55
max-width:38rem
clamp(1rem, 0.957rem + 0.217vw, 1.125rem)
Small / Caption
La letra pequena
Geist regular (400)
Todo
Actualizado hace 3 minutos Mar 25, 2026 · 14:32 Periodo: Ene 2026 — Mar 2026
size:var(--text-small)
weight:300
color:rgba(18,15,32,0.45)
clamp(0.64rem, 0.612rem + 0.139vw, 0.72rem)
Estilos complementarios
Badge
Tag de estado
V-Dashboard
ExploreCreateActivate Activo Pendiente
Nav Item
Navegacion
V-Dashboard · Voiceverse
RentabilidadV-CrewFinanzasRiders
size:var(--text-h6)
weight:300 / 500 activo
.text-serif-italic
Clase utilitaria — mezcla en linea
Global

Cada proyecto pasa por tres fases: Explore, Create y Activate.

La marca que cuenta historias gana

Agrega .text-serif-italic a cualquier <span> para cambiar a Instrument Serif italic sin afectar el peso.

font-family:var(--font-display)
font-style:italic
weight:hereda del padre
Wordmark
Logo tipografico
Voiceverse
Voiceverse
Todos los tokens
Escala fluida (clamp)
Token
Valor
--text-small
clamp(0.64rem, 0.612rem + 0.139vw, 0.72rem)
--text-h6
clamp(0.8rem, 0.765rem + 0.174vw, 0.9rem)
--text-body
clamp(1rem, 0.957rem + 0.217vw, 1.125rem)
--text-h5
= var(--text-body)
--text-h4
clamp(1.25rem, 1.196rem + 0.272vw, 1.406rem)
--text-h3
clamp(1.563rem, 1.495rem + 0.340vw, 1.758rem)
--text-h2
clamp(1.953rem, 1.868rem + 0.425vw, 2.197rem)
--text-h1
clamp(2.441rem, 2.335rem + 0.531vw, 2.747rem)
--text-display
clamp(3.052rem, 2.919rem + 0.663vw, 3.433rem)
Pesos
Token
Valor
Usado en
--fw-light
300
Geist — sin uso (cae a 400)
--fw-regular
400
Geist body, Instrument Serif
--fw-medium
500
Sin uso activo (reservado)
--fw-semibold
600
Geist H4–H6, badges, nav activo, KPI labels
--fw-bold
700
Geist overline
Letter-spacing
Token
Valor
Usado en
--ls-display
-0.03em
Display
--ls-heading
-0.02em
H1, H2
--ls-badge
0.03em
Badges, KPI labels
--ls-kpi
0.05em
Numeros hero KPI
--ls-overline
0.25em
Overline (th, labels)
Line-height
Token
Valor
Usado en
--lh-display
1.05
Display
--lh-heading
1.15
H1–H3 (Instrument Serif)
--lh-subhead
1.3
H4–H6 (Geist)
--lh-body
1.55
Body, small, UI
Font style
Token / Clase
Valor
Uso
--font-style-serif
normal
Default Instrument Serif (H1–H3, KPI)
.text-serif-italic
italic
Mezclar Instrument italic en cualquier linea
.r-display
italic (fijo)
Display siempre italic — tono editorial
.r-wordmark
italic (fijo)
Logo tipografico siempre italic