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, diponible en Google Fonts.




Roboto

Roboto es la fuente oficial de Gob.pe, orientada a la fácil lectura. Es utilizada en cuerpos de texto, títulos, links, enlaces, botones y todas los componentes de las interfaces en tres diferentes estilos priorizando su legibilidad y adecuados pesos de contrastes que ayudan establecer jerarquías de visualización en los contenidos.


Características


Sans serif

Clasificacion

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

Roboto

Light

Roboto

Medium

Roboto

Bold

Weight

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.




Tamaños


Roboto

xxxl

Font-size 48 px


Título de páginas informativas.

Roboto

xxl

Font-size 36 px


Título en secciones de páginas institucionales.

Roboto

xl

Font-size 28 px


Título en secciones de páginas institucionales.

Roboto

lg

Font-size 18 px


Títulos en cards de noticias.

Roboto

md

Font-size 16 px


Párrafos en páginas informativas.

Roboto

xs

Font-size 14 px


Fechas / etiquetas.




Títulos

H1

48 px

3 rem

T

AAA (WCAG 2.0)

Contraste

15.91:1

Pantallas grandes ≥ 992px

font-family: Roboto

font-size: 3 rem

line-height: 1.15

font-weight: 700




H2

36 px

2.25 rem

T

AAA (WCAG 2.0)

Contraste

15.91:1

Pantallas grandes ≥ 992px

font-family: Roboto

font-size: 2.25 rem

line-height: 1.25

font-weight: 700




H3

24 px - 21 px

2.25 rem

T

AAA (WCAG 2.0)

Contraste

15.91:1

Pantallas grandes ≥ 992px

font-family: Roboto

font-size: 1.5 rem

line-height: 1.25

font-weight: 700





Párrafos

Font

Roboto

Tamaño

16 px / 1 rem

Line height

24 px / 1.5 rem

Para presentar una denuncia virtual por actos de corrupción, debes elaborar una solicitud de formato libre que incluya tus datos, los nombres, cargos de los involucrados y el detalle de los hechos. Si la denuncia es anónima, no necesitas dar tu información personal.

Adjunta también una carta de compromiso, con la que te pondrás a disposición del ministerio para dar mayor información.





Enlaces


Font

Roboto

Tamaño

16 px / 1 rem

Line height

24 px / 1.5 rem

Color

#0056AC

Si no recibes respuesta en 30 días hábiles, puedes acudir a la Defensoría del Pueblo.





Listas


Tamaño

16 px / 1 rem

Line height

28 px / 1.75 rem

Ejemplo de lista con viñetas:

  1. Esta es una
  2. lista con bullets
  3. sirve para listar elementos
  4. no secuenciales


Tamaño

16 px / 1 rem

Line height

28 px / 1.75 rem

Ejemplo de lista numerada:

  1. Esta es una
  2. lista con bullets
  3. sirve para listar elementos
  4. no secuenciales


Ejemplo de paso a paso:

Paso a paso

  1. Este es el primer paso
  2. Este es el segundo paso
  3. Este es el tercer paso




Divisiones de sección


División gris


1 px Color #919191


División negra


4 px Color #222222


División azul


4 px Color #0056AC