Los sitios web gubernamentales necesitan encabezados claros y coherentes, párrafos de texto muy legibles, etiquetas claras y campos de entrada fáciles de usar. Nuestras tipografías predeterminadas están diseñadas para ser legibles y pueden adaptarse a una variedad de tonos visuales.

La tipografía establece una jerarquía visual clara y garantiza que el contenido sea legible, accesible y coherente en todo InsureKidsNow.gov. Nuestra tipografía sigue los estándares del Sistema de Diseño Web de Estados Unidos (USWDS), con adaptaciones específicas a la marca y las necesidades de IKN.

Principios de tipografía:

• Use fuentes claras y legibles que funcionen bien en todos los tamaños de pantalla.
• Mantenga un espaciado uniforme entre los elementos de texto.
• Asegúrese de que haya suficiente contraste de color para efectos de accesibilidad.
• Cree jerarquía visual mediante el tamaño, el grosor y el espaciado de la fuente

Familias tipográficas y su uso

En todo InsureKidsNow.gov, usamos dos familias de fuentes principales:

1. Merriweather (una tipografía serif)
2. Source Sans Pro (una tipografía sans-serif)

Esto concuerda con las funciones definidas en USWDS, que emplea Merriweather como fuente predeterminada para los encabezados y Source Sans Pro como fuente predeterminada para el cuerpo del texto.

La forma correcta de referirse a Merriweather y Source Sans Pro en IKN mediante CSS:

"Merriweather Web", Georgia, Cambria, "Times New Roman", Times, serif

"Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif

Encabezados (H1-H6)

Los encabezados organizan el contenido y ayudan a los usuarios a revisar las páginas rápidamente. Use los niveles de encabezado en orden (no omita niveles) para mantener una estructura y accesibilidad adecuadas del documento. Los desarrolladores de contenido deben centrarse en la estructura semántica y en la aplicación coherente de los tamaños y pesos visuales definidos.

Reglas semánticas (prioridad para los implementadores de contenido)

• La jerarquía es obligatoria: los encabezados deben estar anidados lógicamente. Un H1 solo debe ir seguido de un H2, no de un H3.
• Un encabezado H1 por página: cada página de InsureKidsNow.gov debe tener un encabezado 1 (H1).
• No use encabezados para dar formato: primero se deben elegir los niveles de encabezado semántico para la estructura y la accesibilidad del documento, y luego aplicar el tamaño visual. No cambie el nivel del encabezado (por ejemplo, saltar H2 y pasar directamente a H3) simplemente para conseguir un tamaño de fuente diferente.
• Relación con el tamaño de la fuente: los elementos de encabezado nunca deben tener un tamaño de fuente igual o menor que el del elemento de párrafo estándar.
• Requisito de contenido: todos los encabezados necesitan contenido (elementos secundarios).

Nota sobre las variaciones H2/H3 y H6:

Se muestran algunos ejemplos de encabezados H2, H3 y H6 usando Source Sans Pro (Seminegrita/Negrita) con ligeras variaciones en el tamaño y la altura de línea. Estos representan diferentes componentes (como la navegación o los bloques de texto especializados), estos deben estar claramente definidos y restringidos a esos componentes.

Ejemplos de encabezados

Ejemplos de los diferentes encabezados con la información de fuente correcta: familia de fuente, color, tamaño de fuente y altura de línea.

Encabezado H1 o título de página 40px

Merriweather, Negrita, #0D76AD, 40px / 52px

Ejemplo de subtítulo H2 de segundo nivel (30 px)

Merriweather, Negrita, #661466, 30px / 39px

Clase de pantalla de inicio H2 ¡Lea nuestro último boletín informativo! 26px

Source Sans Pro, Seminegrita, #661466, 26px / 30px

Ejemplo de encabezado H3 (subtítulo) 20px

Merriweather, Negrita, #000000, 20px / 26px

Clase de pantalla de inicio H3 Involucrar a los municipios locales en Medicaid

Fuente Sans Pro, Negrita, #000000, 19px / 24px

Ejemplo de encabezado H4 de 17 px

Merriweather, Negrita, #1B1B1B, 17px / 25px

H5 Este es un subtítulo H5 Ejemplo de encabezado 15px

Merriweather, Negrita, #1B1B1B, 15px / 20px

H6 ESTE ES UN SUBTÍTULO H6 EJEMPLO DE ENCABEZADO MAYÚSCULAS 13PX

Source Sans Pro, Negrita, #1B1B1B, 13px / 17px

Arriba: Ejemplos de los distintos encabezados que se emplean en InsureKidsNow.gov.

Texto del párrafo (cuerpo del texto)

La fuente principal para el texto del cuerpo es Source Sans Pro. Los responsables de la creación de contenido deben centrarse en las pautas de legibilidad y accesibilidad.

Texto estándar del cuerpo del texto:

• Fuente: Source Sans Pro (el grosor normal es el estándar)
• Tamaño base: el estándar del CMS usa 16 px.
• Altura de línea estándar: el estándar de CMS usa 24 px (1.5 líneas de altura). USWDS también sugiere 1.5 o 1.62 (vads-font-line-height-5) para lectura extendida.

Color: el color de texto predeterminado suele ser #1B1B1B a menos que haya una razón específica para un color diferente.

Accesibilidad: si se modifica el color de texto o el fondo predeterminados, asegúrese de que la relación de contraste mínima sea de 4.5:1 para textos normales de menos de 18 pt (24 px).

Longitud/Medida: los párrafos no deben exceder los 72 ex (vads-size-line-length-5) de ancho para facilitar una lectura cómoda.

Ejemplos de texto de párrafo

Se muestra el formato de texto estándar con la información de fuente correcta: familia de fuente, color, tamaño de fuente y altura de línea.

El 30 de marzo de 2023, los Centros de Servicios de Medicare y Medicaid (CMS) otorgaron $5.9 millones en acuerdos cooperativos a siete organizaciones en seis estados autorizadas en virtud de la Ley de Ayuda para Garantizar el Acceso a los Bebés, los Niños Pequeños y los Jóvenes con Esperanza al Mantener Estable la Prestación de Seguros Médicos de 2017 (Ley NIÑOS SALUDABLES) con el propósito de aumentar la participación de niños AI/AN elegibles y sin seguro en Medicaid y el Programa de Seguro Médico para Niños (CHIP). Estos nuevos subsidios de los Acuerdos cooperativos de alcance e inscripción de nativos americanos y nativos de Alaska (AI/AN) en Vincular a los niños a una cobertura de HEALTHY KIDS en 2023 brindarán apoyo fundamental para las estrategias efectivas y específicas necesarias para inscribir y retener a los niños AI/AN sin seguro elegibles en Medicaid y el Programa de Seguro Médico para Niños (CHIP).

La ley NIÑOS SALUDABLES proporciona financiamiento continuo para actividades y estrategias destinadas a educar a las familias AI/AN sobre la disponibilidad de cobertura de salud gratuita o de bajo costo bajo Medicaid y CHIP, identificar a los niños AI/AN que probablemente sean elegibles para estos programas y ayudar a las familias (incluidos los padres y las personas embarazadas) a solicitar y renovar la cobertura.

Arriba: ejemplo de dos párrafos de texto

Enlaces (hipervínculos)

Los hipervínculos son elementos fundamentales que guían a los usuarios a través del contenido y la navegación, conectando diversas páginas internas y recursos externos. En InsureKidsNow.gov (IKN), los enlaces aparecen en el encabezado, la navegación del menú principal, la navegación izquierda, los pies de página y en todo el texto del cuerpo [consulta del usuario].

Una buena tipografía en los enlaces favorece una jerarquía visual fuerte y una buena legibilidad, lo que ayuda a los usuarios a encontrar lo que necesitan. El diseño de los enlaces debe mantener la coherencia con la paleta de colores de la marca IKN y garantizar la accesibilidad.

Enlaces estándar: los enlaces suelen distinguirse por el color y la presentación del texto (por ejemplo, mediante un subrayado). Todos los enlaces estándar deben cumplir con las siguientes especificaciones de color, que se basan en los colores de marca establecidos por IKN:

Reglas semánticas: lo siguiente debe ser una prioridad para los implementadores de contenido.

• Accesibilidad y contraste: según las normas de USWDS y CMS, es fundamental garantizar que los enlaces sean accesibles para todos los usuarios. Las Pautas de Accesibilidad para el Contenido Web (WCAG) recomiendan una relación de contraste mínima de 4.5:1 para el texto normal sobre su fondo. Los enlaces deben cumplir con este estándar en todos los estados.
• Estado de enfoque: los enlaces deben tener un contorno visual claro cuando un usuario accede a ellos mediante la tecla Tab usando el teclado. Este esquema de enfoque garantiza la accesibilidad para los usuarios de teclado y las personas con discapacidad visual. El contorno de enfoque debe ser claramente visible y coherente con otros elementos interactivos, como el contorno de enfoque #2491FF que se usa para los botones.
• Evite la superposición de funcionalidades: evite convertir los encabezados en enlaces en la mayoría de los casos, ya que la combinación de ambas funcionalidades puede confundir a los usuarios, en individuo a aquellos que dependen de lectores de pantalla para la navegación. Se puede hacer una excepción en componentes como las tarjetas, donde la tarjeta funciona como una única unidad interactiva y el encabezado vinculado es la principal llamada a la acción.
• Texto del enlace: el texto del enlace debe ser descriptivo y tener sentido fuera de contexto para ayudar a los usuarios a comprender el destino.

Enlaces externos: los enlaces que dirigen a sitios web externos (fuera de IKN.gov) requieren un indicador visual explícito para garantizar la transparencia y establecer las expectativas del usuario.

• Iconografía: los enlaces externos deben incluir un ícono, normalmente el ícono de "lanzamiento" proporcionado por USWDS, situado justo al lado del texto del enlace. El sistema de diseño del CMS también incluye una mención específica de un componente de "enlace externo de terceros".
• Color del ícono: el ícono que acompaña a un enlace externo debe tener el mismo color que el texto que lo acompaña, lo que garantiza la coherencia entre el texto y la señal visual en todos los estados del enlace (predeterminado, al pasar el cursor, activo y visitado).

Ejemplos de enlaces

Aquí se muestran diversos enlaces que existen en InsureKidsNow.gov.

Arriba: Encabezado IKN con múltiples enlaces

Las subvenciones de alcance e inscripción del programa Vincular a los Niños a una Cobertura (CKC) apoyan actividades destinadas a identificar e inscribir a niños que reúnen los requisitos para recibir Medicaid y el Programa de Seguro Médico Infantil (CHIP). Desde 2009, CMS otorgó 336.9 millones de dólares en subvenciones de alcance e inscripción de CKC a 363 entidades elegibles, incluidas organizaciones comunitarias, tribus, estados y gobiernos locales. Junto con la Campaña Nacional "Vincular a los Niños a una Cobertura (CKC)", estas actividades financian estrategias de alcance e inscripción destinadas a educar a las familias sobre la disponibilidad de Medicaid y el Programa de Seguro Médico para Niños (CHIP), y a ayudarlas directamente con el proceso de solicitud y renovación. Estas subvenciones comparten el objetivo común de ayudar a reducir el número de niños que reúnen los requisitos para recibir Medicaid y el Programa de Seguro Médico para Niños (CHIP) pero que no están inscritos.

Arriba: Texto estándar con enlaces internos; el primer enlace ya fue visitado y el texto se muestra en color ciruela IKN (#661466); el segundo enlace aún no fue visitado y se muestra en color azul IKN (#0D76AD).

Por lo general, usted debe renovar la cobertura cada año para mantenerlos cubiertos. Asegúrese de que su estado tenga su dirección postal, número de teléfono, correo electrónico u otros datos de contacto actualizados, sobre todo si se mudó en el último año. De esta manera, su estado se podrá poner en contacto con usted en relación con su cobertura de Medicaid o CHIP.

Arriba: Texto estándar con enlace externo

Arriba: Pie de página gris de IKN con múltiples enlaces internos y externos.

Arriba: Pie de página azul de IKN con enlaces internos y externos.

Listas

Las listas organizan la información en fragmentos fáciles de escanear y comprender. InsureKidsNow.gov usa tres tipos de listas: 1) listas con viñetas (sin orden específico), 2) listas numeradas con números estándar y 3) listas numeradas con números romanos. El formato de nuestra lista sigue los estándares del USWDS, con pautas específicas del IKN sobre cuándo emplear cada tipo.

Principios generales de la lista:

• Use listas para dividir párrafos densos y mejorar la facilidad de lectura
• Mantenga los elementos de la lista concisos y con una estructura paralela.
• Mantenga un puntaje y un uso de mayúsculas consistentes dentro de una lista.
• Limite el anidamiento a un máximo de 2-3 niveles para mayor claridad.

Referencia USWDS: consulte el componente de la lista USWDS para obtener especificaciones técnicas detalladas y orientación sobre accesibilidad.

Listas con viñetas (listas no ordenadas)

Las listas con viñetas presentan elementos que no tienen un orden o jerarquía específicos. Use listas con viñetas cuando el orden de los elementos no importe.

Especificaciones:

Cuándo usar listas con viñetas:

• Características, beneficios o atributos que no tienen clasificación.
• Opciones o posibilidades donde el orden no importa.
• Grupos de elementos relacionados sin secuencia
• Puntos clave o conclusiones principales

Orientación específica de IKN:

• Espacio sobre la lista: 16 px desde el párrafo anterior.
• Espacio debajo de la lista: 24 px antes del siguiente elemento.
• Color del texto: igual que el texto principal (#1B1B1B)
• Anidamiento máximo: evite más de 2 niveles siempre que sea posible; máximo 3 niveles.

Ejemplos de una lista con viñetas

Mostrar una lista con viñetas con varios niveles de sangría:

• Exámenes médicos de rutina
• Inmunizaciones
• Visitas al médico
• Trabajo de laboratorio
• Examen de salud
• Programa de bienestar
• Ejercicio y estado físico
• Orientación nutricional
• Servicios de salud mental
• Medicamentos recetados
• Servicios terapéuticos
• Atención hospitalaria y ambulatoria

Arriba: Ejemplo de una lista con viñetas con varios niveles de sangría.

Listas numeradas (listas ordenadas)

Las listas numeradas con números estándar (1, 2, 3...) presentan los elementos en una secuencia u orden específico. Use listas numeradas cuando el orden sea importante o al describir los pasos de un proceso.

Especificaciones:

Cuándo usar listas numeradas:

• Instrucciones o procedimientos paso a paso
• Procesos secuenciales que deben seguir en orden
• Elementos clasificados (de mayor a menor importancia)
• Elementos con un principio y un final claros.
• Instrucciones para completar formularios o solicitudes

Orientación específica de IKN:

• Espacio sobre la lista: 16 px desde el párrafo anterior.
• Espacio debajo de la lista: 24 px antes del siguiente elemento.
• Puntaje: use puntos luego de los números (por ejemplo, "1"). no "1)")
• Estructura de la oración: Cada elemento debe ser una oración completa o un fragmento paralelo.
• Anidamiento máximo: para mayor claridad, mantenga el anidamiento en dos niveles siempre que sea posible.

Ejemplos de una lista numerada

Mostrar una lista numerada con varios niveles de sangría:

1. Exámenes médicos de rutina
2. Inmunizaciones
3. Visitas al médico
1. Trabajo de laboratorio
2. Examen de salud
3. Programas de bienestar
1. Ejercicio y buena forma física
2. Orientación nutricional
3. Servicios de salud mental
1. Medicamentos recetados
2. Servicios terapéuticos
3. Atención hospitalaria y ambulatoria

Arriba: Ejemplo de una lista numerada en IKN

Listas numeradas con números romanos

Las listas numeradas con números romanos (I, II, III...) se emplean en documentos formales, contenido legal o para distinguir secciones principales que contienen sublistas con numeración estándar.

Especificaciones:

Cuándo usar listas con números romanos:

• Documentos de política formal o contenido legal
• Secciones o categorías principales que contienen sublistas numeradas
• Contenido jerárquico donde los números romanos indican la importancia de nivel superior.
• Al distinguir las secciones principales de los pasos detallados que se encuentran debajo de ellas.
• Pautas o reglamentos oficiales

Orientación específica de IKN:

• Espacio sobre la lista: 16 px desde el párrafo anterior.
• Espacio debajo de la lista: 24 px antes del siguiente elemento.
• Úselo con moderación: resérvelo para documentos formales o cuando sea esencial una jerarquía clara.
• Uso de mayúsculas: use números romanos en mayúsculas (I, II, III) para el primer nivel.
• Formato coherente: mantenga un formato coherente con los números estándar anidados a continuación.

Ejemplos de una lista numerada con números romanos

Se muestra una lista numerada con números romanos y varios niveles de sangría:

1. Exámenes médicos de rutina
2. Inmunizaciones
3. Visitas al médico
1. Trabajo de laboratorio
2. Examen de salud
3. Programas de bienestar
1. Ejercicio y buena forma física
2. Orientación nutricional
3. Servicios de salud mental
1. Medicamentos recetados
2. Servicios terapéuticos
3. Atención hospitalaria y ambulatoria

Arriba: ejemplo de una lista numerada con números romanos.

Navegación lateral

La barra lateral izquierda ofrece una navegación vertical jerárquica diseñada para mostrar la "subnavegación" dentro de una sección específica del sitio web. Su propósito principal es ayudar a los usuarios a ver en qué punto se encuentran dentro de una sección del sitio y a navegar fácilmente entre páginas relacionadas. Esta guía garantiza que los creadores y desarrolladores de contenido mantengan la coherencia, usabilidad y accesibilidad.

Guía de uso

El componente de navegación lateral sirve como navegación secundaria para un grupo de páginas estrechamente relacionadas.

Cuándo usar la navegación lateral

• Para mostrar una jerarquía de navegación normalmente limitada a uno o tres niveles.
• Para crear una subnavegación para una sección específica del sitio web, como, por ejemplo, en "Información de la campaña" o "Encuentre cobertura para su familia".
• Cuando se requiere una estructura de navegación para un grupo de páginas relacionadas que son altamente relevantes para el contenido que se muestra actualmente.

Cuándo considerar alternativas

• Si una sección tiene menos de cinco páginas, es posible que no sea necesaria una estructura de navegación completa.
• Si necesita que los usuarios naveguen a diferentes áreas de la misma página, use el componente "En esta página" o enlaces de anclaje internos.
• Si los enlaces no están estrechamente relacionados o no se encuentran en la misma sección del sitio web.

Reglas de contenido y estructura

La jerarquía de navegación en IKN puede ser muy extensa, mostrando a veces listas largas con niveles anidados.

1. Profundidad de la jerarquía: Procure que la jerarquía visible sea manejable. Aunque USWDS admite tres niveles (principal, secundario y terciario), los creadores de contenido deben esforzarse por minimizar la profundidad y la amplitud para evitar que los usuarios pasen por alto elementos o tengan que hacer clics excesivos.
2. Texto del enlace: El texto del enlace debe ser conciso y descriptivo. El texto debe transmitir claramente el propósito de la página de destino. El texto del enlace puede ser una versión más corta del título de la página correspondiente.
3. Indique la página actual: Use siempre el estilo apropiado (a menudo un estado "activo" o un borde resaltado) para mostrar al usuario con precisión dónde se encuentra dentro de la jerarquía de navegación.
4. Comportamiento de anidación: La barra lateral izquierda de IKN muestra niveles anidados que normalmente permanecen ocultos hasta que se activa el nivel superior correspondiente (por ejemplo, al hacer clic o expandirlo). Los desarrolladores de contenido deben asegúrese de que esta interacción sea funcional e intuitiva.
5. Apariencia del enlace: En el diseño actual de IKN, los enlaces dentro del menú de navegación izquierdo suelen emplear un color azul apagado (#0D76AD) para resaltarlos. El texto del cuerpo de este componente puede usar un color oscuro como el #212121.

Ubicación y diseño:

En las vistas de escritorio, el componente debe colocarse en la parte superior de la columna izquierda en un diseño de dos columnas.

Comportamiento móvil:

En las pantallas de los dispositivos móviles, la navegación lateral suele aparecer contraída debajo de la ruta de navegación y encima del título de la página. Se revela cuando el usuario pulsa un botón, a menudo etiquetado como "Menú de páginas relacionadas", similar a un componente de acordeón. Cuando se expande, este menú debe desplazar el contenido hacia abajo en lugar de superponerlo.

Orden de enfoque:

Para los usuarios de teclado y lectores de pantalla, la navegación lateral debe aparecer en el orden de enfoque inmediatamente luego de la ruta de migas de pan y antes del contenido principal. Los usuarios también deben tener la opción de omitir completamente esta navegación usando el enlace "Saltar al contenido principal".

Marcado semántico:

El componente debe colocarse fuera del elemento < main >, idealmente dentro de una región de referencia < aside >, para ayudar a los lectores de pantalla a definir la estructura de la página.