Typography

Tipografías

Actualizado el 24/10/2024

En este apartado se describen:

  • Tipografía Rubik, usada en los encabezados y títulos.
  • Tipografía Open Sans, usada en el cuerpo del texto.
  • Clases CSS para encabezados (etiquetas Hn y clases propias, ej. «title-xl», «title-m»...).
  • Clases CSS para subtítulos y cuerpo de texto (ej. «subtitle-l», «body»).

Rubik

Rubik es una familia de fuentes Sans-Serif diseñada por Philipp Hubert y Sebastian Fisher en Hubert & Fisher como parte del proyecto Chrome Cube Lab. Aunque cuenta con cinco pesos distintos, sólo se han empleado dos de ellos: Medium (500) y Bold (700).

En el diseño de la ULPGC, se emplea esta fuente para encabezados y texto resaltado como el que se puede encontrar dentro de los botones.

Copyright y descarga

Su uso se hace bajo licencia SIL Open Font, lo que facilita su distribución y uso en diversos equipamientos informáticos institucionales y personales de la comunidad universitaria. Se puede descargar gratuitamente desde Google Fonts:

Descargar Rubik

Familia tipografica Rubik

Open Sans

Open Sans es una familia de fuentes Sans-Serif humanísticas diseñadas por Steve Matterson en Ascender Corp. Actualmente cuenta con un set de 897 caracteres, lo que le aporta una enorme flexibilidad para adaptarse a cualquier uso. Esta fuente ha sido optimizada para impresión, web e interfaces móviles, permitiendo una excelente legibilidad en todas sus formas. 

Esta familia cuenta con múltiples pesos, de los cuales se han empleado dos de ellos para la ULPGC: Regular (400) y Bold (700). Se emplea, principalmente, para los textos básicos como párrafos, listas, texto insertado, etc.

Copyright y descarga

Esta familia tipográfica se encuentra bajo licencia Apache 2.0, una licencia muy permisiva que permite el uso de las fuentes para cualquier propósito. Se puede descargar gratuitamente en Google Fonts:

Descargar Open Sans

Familia tipografica Open Sans

Encabezados

Estos encabezados corresponden a las etiquetas HTML <h>.

Se añade la clase "title-xxxl" para títulos que requieran un tamaño superior al ofrecido por las etiquetas. Nótese que el uso de esta clase tiene carácter excepcional y no se debe abusar del mismo.

Por otro lado, se han añadido otras clases "title-" con el objetivo de aplicar los estilos asociados a los encabezados a otras etiquetas HTML, si fuese necesario.

Title-xxxl

Familia
Rubik
(700)
Px
56
Rem
3.5
line-height
64px

Bienvenido al Design System de la ULPGC

H1 / Title-xxl

Familia
Rubik
(700)
Px
42
Rem
2.5
line-height
48px

Bienvenido al Design System de la ULPGC

H2 / Title-xl

Familia
Rubik
(700)
Px
32
Rem
2
line-height
40px

Bienvenido al Design System de la ULPGC

H3 / Title-l

Familia
Rubik
(500)
Px
24
Rem
1.5
line-height
32px

Bienvenido al Design System de la ULPGC

H4 / Title-m

Familia
Rubik
(500)
Px
18
Rem
1.125
line-height
24px

Bienvenido al Design System de la ULPGC

H5 / Title-s

Familia
Rubik
(500)
Px
16
Rem
1
line-height
20px
Bienvenido al Design System de la ULPGC

H6 / Title-xs

Familia
Rubik
(500)
Px
14
Rem
0.875
line-height
16px
Bienvenido al Design System de la ULPGC

Subtítulos y Cuerpo

Adicionalmente a los encabezados, se pueden encontrar otros estilos para textos que cumplan la función de subtítulo o el cuerpo básico de la página (body).

Subtitle-xl

Familia
Rubik
(500)
Px
32
Rem
2
line-height
40px

Universidad de Las Palmas de Gran Canaria

Subtitle-l

Familia
Rubik
(500)
Px
24
Rem
1.5
line-height
32

Universidad de Las Palmas de Gran Canaria

Body

Familia
Open Sans
(400)
Px
18
Rem
1.125
line-height
32

Bienvenido a la web institucional de la Universidad de Las Palmas de Gran Canaria