Sistema de Diseño
Inicio / Diseño / Tipografía

Tipografía

Familias utilizadas

Estas son las familias tipográficas definidas para el uso en proyectos digitales UdeC. Puedes descargar los archivos optimizados de cada familia para embeber en tu proyecto.

Poppins

Tipografía utilizada para títulos y textos destacados. De esta familia se utilizan los pesos 400, 500, 600 y 700, junto con sus versiones itálicas.

Descargar familia

Link a Google Fonts.

Código para embeber 

/* Poppins */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Poppins-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('Poppins-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('Poppins-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('Poppins-MediumItalic.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('Poppins-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('Poppins-SemiBoldItalic.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('Poppins-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('Poppins-BoldItalic.woff2') format('woff2');
}

Roboto

Tipografía base de <body>. Se utiliza para el cuerpo del contenido y textos generales. De esta familia se utilizan los pesos 400 y 700, junto con sus versiones itálicas.

Descargar familia

Link a Google Fonts.

Código para embeber 

/* Roboto */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Roboto-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('Roboto-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('Roboto-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('Roboto-BoldItalic.woff2') format('woff2');

Recomendación

Usar tipografías auto-hosteadas en lugar de Google Fonts mejora la evaluación en Core Web Vitals y optimiza el rendimiento general de los sitios web.

Al alojar las fuentes directamente en nuestro servidor, reducimos la necesidad de hacer peticiones a terceros, lo que disminuye la latencia y acelera la carga de la página.

Esto contribuye a una experiencia de usuario más fluida y a un mejor rendimiento, especialmente en métricas clave como Largest Contentful Paint (LCP).

Más información

Escala de tamaños

EscalaEscritorioTabletMóviles
Herosize 70px / line 80pxsize 56px / line 64pxsize 40px / line 48px
4XLsize 48px / line 56pxsize 44px / line 52pxsize 32px / line 40px
3XLsize 40px / line 48pxsize 36px / line 44pxsize 28px / line 36px
2XLsize 32px / line 40pxsize 28px / line 36pxsize 24px / line 32px
XLsize 24px / line 32pxsize 24px / line 32pxsize 20px / line 28px
Lsize 20px / line 28pxsize 20px / line 28pxsize 18px / line 26px
Basesize 18px / line 26pxsize 18PX / line 26pxsize 16px / line 24px
Msize 16px / line 24pxsize 16PX / line 24pxsize 16px / line 24px
Ssize 14px / line 20pxsize 14PX / line 20pxsize 14px / line 20px
XSsize 12px / line 16pxsize 12PX / line 16pxsize 12px / line 16px

Estilos tipográficos

Hero

Familia Poppins

Escala Hero

Peso Bold

H1

Familia Poppins

Escala 4XL

Peso Semibold

H2

Familia Poppins

Escala 3XL

Peso Semibold

H3

Familia Poppins

Escala 2XL

Peso Semibold

H4

Familia Poppins

Escala XL

Peso Semibold

H5

Familia Poppins

Escala L

Peso Medium

Body L

Familia Poppins

Escala Base

Peso Medium

Body M

Familia Roboto

Escala M

Peso Regular

Body S

Familia Roboto

Escala S

Peso Regular

Body XS

Familia Roboto

Escala XS

Peso Regular