FUENTES COMPACTAS
Creado martes 25 marzo 2025
Inter
Descripción: Diseñada específicamente para interfaces web, tiene caracteres compactos y bien proporcionados. Funciona maravillosamente para encabezados y texto en cuerpos compactos.
- Ventaja: Muy flexible, con un diseño moderno y ajustable.
font-family: 'Inter', sans-serif;
line-height: 1.2;
/* Compacta el espacio entre líneas */
letter-spacing: -0.01em;
/* Ajusta el kerning, ligeramente negativo para más densidad */
Montserrat
Descripción: Esta fuente tiene un diseño geométrico y es compacta por naturaleza. Puedes hacerla más densa ajustando kerning y line-height.
Ventaja: Muy versátil y estilizada, popular en diseño moderno.
Ajuste Sugerido en CSS:
font-family: 'Montserrat', sans-serif;
line-height: 1.15;
letter-spacing: -0.02em;
<link rel=”preconnect” href=”https://fonts.googleapis.com%E2%80%9D>
<link rel=”preconnect” href=”https://fonts.gstatic.com%E2%80%9D crossorigin>
<link href=”https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=PT+Sans+Narrow:wght@400;700&display=swap%E2%80%9D rel=”stylesheet”>
Nunito
Descripción: Redondeada y moderna, pero su versión “Nunito Sans” tiende a ser más compacta.
Ventaja: Se siente amigable y profesional al mismo tiempo.
Ajuste Sugerido en CSS:
font-family: 'Nunito Sans', sans-serif;
line-height: 1.2;
letter-spacing: -0.01em;
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=PT+Sans+Narrow:wght@400;700&display=swap" rel="stylesheet">
PT Sans Narrow
Descripción: Es una variante más compacta y estilizada de PT Sans. Ideal para diseños que requieren mayor densidad visual.
Ventaja: Da un toque clásico pero con gran legibilidad.
font-family: 'PT Sans Narrow', sans-serif;
line-height: 1.1; /* Muy compacto */
letter-spacing: -0.01em;
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap" rel="stylesheet">