Tipografía

La tipografía es un elemento central en la creación de un producto digital y un activo imprescindible de marca. Hacer un uso controlado de la tipografía y estilos de letra, contribuye además a la organización, jerarquización y visualización del contenido actuando como guía para el usuario a lo largo de toda su experiencia y como una herramienta más para la comunicación o conversión.


Familia

Aa

Repsol

Ha sido diseñada específicamente para satisfacer las necesidades de marca y expresar sus valores.

Se permite su uso exclusivamente en el color Naranja Repsol 70 sobre fondo Blanco, y Blanco sobre fondo Naranja Repsol 70.

Aa

Secundaria

Roboto es una tipografía open-sourced que destaca por su legibilidad y neutralidad en cualquier contexto digital.

El peso y el tamaño varía en función de si se utiliza como titular o cuerpo de texto. Para titular se utilizará exclusivamente el peso Medium, para cuerpo de texto el peso Regular.

Aa

Sustitución

En ocasiones será imposible utilizar las tipografías corporativas. Esto sucederá cuando trabajemos con terceros que no dispongan de Repsol Font y Roboto en sus sistemas, en el caso de utilizar herramientas de otros proveedores que presentan limitaciones (por ej: Power BI) o en textos de emails. En estos casos se utilizarán las familias tipográficas Arial.

Escalas

Para garantizar el principio de multiplataforma y consistencia, en Repsol nos aseguramos que la tipografía funcione, tanto en dispositivos pequeños como en resoluciones más grandes.

Dispositivos M-L

#FF6200 #FFF

Tamaño 60px / 3.75rem

Interlineado 72px / 4.5rem

Salto de línea 24px / 1.5rem

Interletrado -1px

Familia Repsol

Peso Regular

CSS

.rds-headline-1

SCSS

@include rds-font-style(headline-1)
#FF6200 #FFF

Tamaño 48px / 3rem

Interlineado 56px / 3.5rem

Salto de línea 24px / 1.5rem

Interletrado -0.5px

Familia Repsol

Peso Regular

CSS

.rds-headline-2

SCSS

@include rds-font-style(headline-2)
#FF6200 #FFF

Tamaño 40px / 2.5rem

Interlineado 48px / 3rem

Salto de línea 16px / 1rem

Interletrado -0.5px

Familia Repsol

Peso Regular

CSS

.rds-headline-3

SCSS

@include rds-font-style(headline-3)
#464646 #FFF

Tamaño 24px / 1.5rem

Interlineado 32px / 2rem

Salto de línea 8px / 0.5rem

Interletrado 0

Familia Roboto

Peso Medium

CSS

.rds-subheadline

SCSS

@include rds-font-style(subheadline)
#464646 #AAA #FFF

Tamaño 20px / 1.25rem

Interlineado 32px / 2rem

Salto de línea 16px / 1rem

Interletrado 0

Familia Roboto

Peso Medium

CSS

.rds-title-1

SCSS

@include rds-font-style(title-1)
#464646 #AAA #00809A #FFF

Tamaño 16px / 1rem

Interlineado 24px / 1.5rem

Salto de línea 8px / 0.5rem

Interletrado 0

Familia Roboto

Peso Medium

CSS

.rds-title-2

SCSS

@include rds-font-style(title-2)
#464646 #757575 #FFF

Tamaño 20px / 1.25rem

Interlineado 32px / 2rem

Salto de línea 16px / 1rem

Interletrado 0

Familia Roboto

Peso Regular

CSS

Próximamente
#464646 #AAA #00809A #FFF

Tamaño 16px / 1rem

Interlineado 24px / 1.5rem

Salto de línea 8px / 0.5rem

Interletrado 0

Familia Roboto

Peso Regular

CSS

.rds-body-1

SCSS

@include rds-font-style(body-1)
#464646 #AAA #00809A #FFF

Tamaño 14px / 0.875rem

Interlineado 24px / 1.5rem

Salto de línea 8px / 0.5rem

Interletrado 0.25px

Familia Roboto

Peso Regular

CSS

.rds-body-2

SCSS

@include rds-font-style(body-2)
#464646 #FFF

Tamaño 12px / 0.75rem

Interlineado 16px / 1rem

Salto de línea 8px / 0.5rem

Interletrado 0.25px

Familia Roboto

Peso Regular

CSS

.rds-caption

SCSS

@include rds-font-style(caption)

Dispositivos XS-S

#FF6200 #FFF

Tamaño 48px / 3rem

Interlineado 56px / 3.5rem

Salto de línea 24px / 1.5rem

Interletrado -0.5px

Familia Repsol

Peso Regular

CSS

.rds-headline-1

SCSS

@include rds-font-style(headline-1)
#FF6200 #FFF

Tamaño 40px / 2.5rem

Interlineado 48px / 3rem

Salto de línea 16px / 1rem

Interletrado -0.5px

Familia Repsol

Peso Regular

CSS

.rds-headline-2

SCSS

@include rds-font-style(headline-2)
#FF6200 #FFF

Tamaño 28px / 1.75rem

Interlineado 32px / 2rem

Salto de línea 8px / 0.5rem

Interletrado 0

Familia Repsol

Peso Regular

CSS

.rds-headline-3

SCSS

@include rds-font-style(headline-3)
#464646 #FFF

Tamaño 22px / 1.375rem

Interlineado 32px / 2rem

Salto de línea 16px / 1rem

Interletrado 0

Familia Roboto

Peso Medium

CSS

.rds-subheadline

SCSS

@include rds-font-style(subheadline)
#464646 #AAA #FFF

Tamaño 18px / 1.125rem

Interlineado 24px / 1.5rem

Salto de línea 8px / 0.5rem

Interletrado 0

Familia Roboto

Peso Medium

CSS

.rds-title-1

SCSS

@include rds-font-style(title-1)
#464646 #AAA #00809A #FFF

Tamaño 16px / 1rem

Interlineado 24px / 1.5rem

Salto de línea 8px / 0.5rem

Interletrado 0

Familia Roboto

Peso Medium

CSS

.rds-title-2

SCSS

@include rds-font-style(title-2)
#464646 #757575 #FFF

Tamaño 18px / 1.125rem

Interlineado 24px / 1.5rem

Salto de línea 16px / 1rem

Interletrado 0

Familia Roboto

Peso Regular

CSS

Próximamente
#464646 #AAA #00809A #FFF

Tamaño 16px / 1rem

Interlineado 24px / 1.5rem

Salto de línea 8px / 0.5rem

Interletrado 0

Familia Roboto

Peso Regular

CSS

.rds-body-1

SCSS

@include rds-font-style(body-1)
#464646 #AAA #00809A #FFF

Tamaño 14px / 0.875rem

Interlineado 24px / 1.5rem

Salto de línea 8px / 0.5rem

Interletrado 0.25px

Familia Roboto

Peso Regular

CSS

.rds-body-2

SCSS

@include rds-font-style(body-2)
#464646 #FFF

Tamaño 12px / 0.75rem

Interlineado 16px / 1rem

Salto de línea 8px / 0.5rem

Interletrado 0.25px

Familia Roboto

Peso Regular

CSS

.rds-caption

SCSS

@include rds-font-style(caption)

Recursos

Te facilitamos las tipografías de marca.

Color

Conoce la guías que giran en torno al uso del color en los productos digitales de Repsol.

Grid

Descubre cómo estructurar contenido en la página.

Recursos

Descarga y accede a todos los materiales que necesitas para trabajar con el sistema de diseño.