Estándares y guías para la digitalización

Guía de estilos

Tipografía

La tipografía utilizada por Gob.pe y todos los servicios digitales del Estado es Roboto. Esto incluye todos los títulos y cuerpos de texto.

Roboto es una fuente gratuita, disponible en Google Fonts.




Roboto

Es la fuente oficial de Gob.pe y está orientada a la fácil lectura. Se emplea en cuerpos de texto, títulos, links, enlaces, botones y demás componentes de las interfaces en tres diferentes estilos. Se prioriza su legibilidad y pesos adecuados de contrastes para ayudar a establecer jerarquías de visualización en los contenidos.


Características


Clasificación

Roboto es una fuente sans serif, esto significa que no tiene terminaciones o decoraciones en los extremos de las letras.

Sans Serif


Peso

Utilizamos tres pesos distintos para jerarquizar el texto de manera ordenada. La fuente en bold o en negrita es usada principalmente para destacar texto dentro de un párrafo.
Aa
Aa
REGULAR 400
MEDIUM 500
Aa
Aa
BOLD 700
EXTRABOLD 800





Títulos


Nombre

H1

H1

Font-weight

Desktop
Mobile
Extrabold/800
Extrabold/800

Font-size

Desktop
Mobile
36px/2.5rem
30px/1.875rem

Line height

Desktop
Mobile
40px/2.5rem
36px/2.5rem

Letter-spacing

Desktop
Mobile
0px
0px

Nombre

H2

H2

Font-weight

Desktop
Mobile
Bold/700
Bold/700

Font-size

Desktop
Mobile
30px/1.875rem
24px/1.5rem

Line height

Desktop
Mobile
36px/2.25rem
24px/1.5rem

Letter-spacing

Desktop
Mobile
0px
0px

Nombre

H3

H3

Font-weight

Desktop
Mobile
Bold/700
Bold/700

Font-size

Desktop
Mobile
24px/1.5rem
20px/1.25rem

Line height

Desktop
Mobile
32px/2rem
28px/1.75rem

Letter-spacing

Desktop
Mobile
0px
0px

Subtítulos

Nombre

H4

H4

Font-weight

Desktop
Mobile
Bold/700
Bold/700

Font-size

Desktop
Mobile
20px/1.25rem
16px/1rem

Line height

Desktop
Mobile
28px/1.75rem
22px/1.38rem

Letter-spacing

Desktop
Mobile
0px
0px

Subtítulos y migas de pan

Nombre

H5

H5

Font-weight

Desktop
Mobile
Medium/500
Bold/700

Font-size

Desktop
Mobile
16px/1rem
16px/1rem

Line height

Desktop
Mobile
22px/1.38rem
22px/1.38rem

Letter-spacing

Desktop
Mobile
0px
0px

Párrafos

Nombre

Paragraph

Font-weight

Desktop/Mobile
Regular/400

Font-size

Desktop/Mobile
16px/1rem

Line height

Desktop/Mobile
24px/1.5rem

Letter-spacing

Desktop/Mobile
0px

Botón

Nombre

Button

Button

Font-weight

Desktop
Mobile
Bold/700
Bold/700

Font-size

Desktop
Mobile
18px/1.25rem
16px/1rem

Line height

Desktop
Mobile
28px/1.75rem
22px/1.38rem

Letter-spacing

Desktop
Mobile
0px
0px

Etiquetas

Nombre

Tag medium

Tag bold

Font-weight

Desktop
Mobile
Medium/500
Bold/700

Font-size

Desktop
Mobile
14px/0.875rem
14px/0.875rem

Line height

Desktop
Mobile
20px/1.25rem
20px/1.25rem

Letter-spacing

Desktop
Mobile
0px
0px

Nombre

TAG REGULAR UPPERCASE

TAG BOLD UPPERCASE

Font-weight

Desktop
Mobile
Regular/400
Bold/700

Font-size

Desktop
Mobile
14px/0.875rem
14px/0.875rem

Line height

Desktop
Mobile
20px/1.25rem
20px/1.25rem

Letter-spacing

Desktop
Mobile
0px
0px