Tipografía
La tipografía es un elemento fundamental y característico de la marca. La tipografía aporta coherencia y ritmo, y contribuye fundamentalmente a la eficacia de la comunicación. Las pautas definidas en esta sección resumen el correcto uso tipográfico en los productos de Repsol para crear jerarquías claras que ayuden al usuario a entender el interfaz y su contenido.
Fuentes
 |  |
|---|---|
| Descarga la fuente Gilroy | Descarga fuente Work Sans |
Ambas fuentes son las definidas por la Marca para entornos digitales.
Deberíamos de poder explicar como instalrse las fuentes en un documento web - las distintas formas de hacerlo
Aplicaciones
Se recomienda utilizar la fuente Repsol para encabezados y titulares.
Para bloques de texto y textos pequeños se utilizará la Titillium, tipografía de libre uso, sans serif de alta legibilidad con una relación formal con la tipografía Repsol.
Peso
El Sistema de Diseño de Repsol recomienda el uso de cuatro pesos de ambas fuentes para agregar énfasis y establecer una jerarquía dentro de los contenidos.
Como norma general los encabezados irán en Semibold, y el Body en Regular. En casos donde haya que dar más énfasis a un contenido, se utilizará el estilo Bold.
El peso Light se utilizará en componentes dónde sea necesario que el texto no destaque.
Escala de tipos
La escala tipográfica está pensada y diseñada para que funcione en todo tipo de dispositivos.
Para ello, se han creado dos escalas tipo, diferenciando entre dispositivos large (LD) o small (SD).
La escala de tipos es una combinación de 13 estilos para large device y de 9 estilos para small device, de esta forma nos aseguramos que también se cubran las resoluciones intermedias en el caso de que fuese necesario.
Por temas de accesibilidad no se debe usar un tamaño de fuente más pequeño que 14 px en small device y de 12 px en large device.
Escala de tipos Large Device
Escala de tipos Small Device
Line Height
La altura de la línea se ha definido en 8 px con respecto al tamaño de la fuente en Displays y Heading. Es decir, si el tamaño de texto es de 32 px, el line height se corresponderá con 40 px.
El line height en cuerpos de texto más pequeños, como bodys o párrafos es de 4 px, si el tamaño es de 14 px, se corresponde con 18 px.
Color de texto
Por defecto, se utilizará el color de texto primario, gris cálido oscuro base, para textos principales como encabezados y bodys.
En el caso de fondos oscuros, donde se necesite una mayor legibilidad, se utilizará el color blanco.
En otras ocasiones, y cuando el diseño lo requiera, se podrán incluir otros colores principales de la marca definidos para textos.
