Tipografía

Los pesos, tamaños y formatos de letra definidos sirven para jerarquizar el contenido y organizar la información.

Índice de apartados de esta página

• Alineación
• Peso del texto
• Color del texto
• Saltos de línea
• Enlaces
• Longitud de línea en escritorio

Alineación #

• Los pesos, tamaños y formatos de letra definidos sirven para jerarquizar el contenido y organizar la información.

  Correcto

  Utiliza texto alineado a la izquierda.

• Los pesos, tamaños y formatos de letra definidos sirven para jerarquizar el contenido y organizar la información.

  Incorrecto

  No utilices texto justificado.

• Los pesos, tamaños y formatos de letra definidos sirven para jerarquizar el contenido y organizar la información.

  Incorrecto

  No utilices texto alineado a la derecha.

Peso del texto #

• Título del bloque

  Los diferentes pesos, tamaños y formatos de letra definidos sirven para jerarquizar el contenido y organizar la información.

  Correcto

  Utiliza bold para títulos o encabezados.

  Utiliza semibold para resaltar ciertos conceptos de un párrafo.

  Utiliza regular para el resto de párrafo.

• Título del bloque

  Los diferentes pesos, tamaños y formatos de letra definidos sirven para jerarquizar el contenido y organizar la información.

  Incorrecto

  No utilices otro peso para títulos o encabezados que no sea bold.

  No utilices bold en párrafos.

Color del texto #

• Texto principal

  Texto secundario

  Correcto

  Utiliza el color de contenido black para títulos y párrafos en general.

  Utiliza el color de contenido neutral-dark para textos secundarios.

• Texto principal

  Texto secundario

  Incorrecto

  No utilices otros colores ni tonos. Puede dar algunos problemas de legibilidad y accesibilidad.

Saltos de línea #

• Los diferentes pesos, tamaños y formatos de letra definidos sirven para jerarquizar el contenido y organizar la distinta información.

  Correcto

  Las líneas se van apilando de manera natural y automática.

• Los pesos, tamaños y <br>
  formatos de letra definidos sirven para jerarquizar el contenido y organizar la distinta in-<br>
  formación.

  Incorrecto

  No utilices saltos de línea manuales con <br>, ya que genera problemas de accesibilidad.

  No cortes palabras.

Enlaces #

• • Enlace con color primario
  • Enlace con color de alerta.
  Correcto

  Inserta enlaces subrayados y con color azul de interacción primary-base (.c-link) o de estado alert-base (.c-link--alert) si enlaza a errores.

• • Enlace sin subrayado
  • Enlace con otro color
  • Texto sin enlace
  Incorrecto

  No insertes enlaces sin subrayar ni con otros colores.

  No utilices el color azul de interacción primary-base para texto que no enlaza.

• Enlace al documento: Modelo de finanza (PDF, 20Kb).

  Correcto

  Si enlazas a un archivo en línea o a una descarga directa, debes poner su nombre y entre paréntesis su formato y tamaño en Kb o Mb.

  Utiliza un title si se abre en ventana nueva.

• Tienes el documento aquí.

  Incorrecto

  Evita enlazar documentos a palabras sueltas. Especifica y detalla qué es lo que el usuario se va a encontrar al entrar al enlace.

Longitud de línea en escritorio #

• 
  Correcto

  Utiliza una longitud de línea hasta el 75% del ancho de la página para una legibilidad óptima.

• 
  Incorrecto

  No utilices una longitud de línea de más del 75% del ancho de la página. Empeora la legibilidad.