--- title: "Colores y tipografía" slug: "colors-and-typography" updated: 2026-10-26T08:23:25Z published: 2026-10-26T08:23:25Z canonical: "docs.document360.com/colors-and-typography" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # Colores y tipografía Los ajustes de Colores y Tipografía en Document360 te permiten controlar la apariencia visual de tu sitio de la base de conocimiento, desde el tema del sitio y los colores de la marca hasta las fuentes en los artículos y la navegación. Todos los ajustes se configuran desde la personalización del sitio y se aplican a nivel de proyecto: el color de la marca fluye en CTAs, estados de selección y elementos interactivos; el color del hipervínculo controla cómo aparecen los enlaces en todos los artículos; el emparejamiento de fuentes de los artículos determina las fuentes usadas en los títulos y el contenido del cuerpo de los artículos, y las mismas fuentes aparecen en el editor para que los escritores puedan previsualizar cómo se verán los artículos cuando se publiquen; la fuente del sitio controla la navegación, los encabezados, los pies de página y controla por separado del contenido del artículo. Estos ajustes trabajan juntos para crear una experiencia visual coherente para los lectores en todas las páginas. ## Cuándo actualizar los colores y la tipografía - **Al crear una nueva base de conocimiento** , establece el color de tu marca, el color de los hipervínculos y las fuentes como parte de la configuración inicial para que el sitio refleje tu identidad desde el principio. - **Después de una actualización de marca** , si tu empresa actualiza su color principal, fuente o directrices visuales, actualiza la configuración de la base de conocimientos para mantenerse alineada. - **Cuando los lectores reporten problemas de accesibilidad** , utiliza la opción **Ajustar contraste de color para cumplir con los estándares WCAG** para aplicar automáticamente proporciones de contraste compatibles con WCAG según el color de tu marca. - **Al cambiar entre temas claros y oscuros** , los colores que funcionan en modo claro pueden no tener suficiente contraste en modo oscuro. Revisa y ajusta ambos colores de tema al activar el soporte de doble modo. - **Cuando el contenido del artículo es difícil de leer** , si los lectores encuentran que la fuente predeterminada es demasiado pequeña, densa o no coincide con tu producto, actualiza el emparejamiento de fuentes del artículo y la fuente del sitio para mejorar la legibilidad. --- ## Tema del sitio El tema del sitio controla qué modos de color están disponibles para los lectores en tu sitio de base de conocimiento. 1. Navega hasta Configuración () en la barra de navegación izquierda del portal de la base de conocimiento. 2. En el panel de navegación izquierdo, navega a Sitio de la base de conocimientos > **Personalización del sitio**. 3. En el campo **tema del sitio** , selecciona una de las siguientes opciones: - **Tanto Luz como Oscuridad** - Los lectores pueden cambiar entre modos de luz y de oscuridad usando el interruptor de tema en la cabecera del sitio. - **Solo luz** - El sitio siempre se muestra en modo luz. El interruptor del tema está oculto. - **Solo a oscuras** - El sitio siempre se muestra en modo oscuro. El interruptor de tema está oculto. 4. Haz clic **en Guardar**. ![Site customization page showing the Site theme options: Both Light and Dark, Light only, Dark only](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/site-customization.png) --- ## Colores ### Color de la marca El color de la marca es el color principal aplicado a los CTAs, estados de selección y elementos interactivos en tu sitio de base de conocimiento. 1. Navega hasta Configuración () en la barra de navegación izquierda del portal de la base de conocimiento. 2. En el panel de navegación izquierdo, navega a Sitio de la base de conocimientos > **Personalización del sitio**. 3. En la sección **de Colores** , selecciona un color usando el selector de color o introduce un código HEX en el campo **de color de la marca** . 4. Haz clic **en Guardar**. NOTA Si el **Auto ajusta el contraste de color para cumplir con los estándares WCAG** , tanto los colores claros como los oscuros del tema se configuran automáticamente según el color de tu marca. Si está desactivado, debes configurar manualmente los colores de cada tema por separado. ![Color settings section in Site customization showing Brand color and Hyperlink color options](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/site-customization-colors.png) --- ### Color del hipervínculo Puedes personalizar cómo aparecen los hipervínculos en tu sitio de base de conocimiento. Hay tres opciones disponibles: | Opción | Qué hace | | --- | --- | | **Utilizar el estándar industrial** | Aplica el color de hipervínculo predeterminado comúnmente usado | | **Usa color de marca** | Aplica el mismo color seleccionado que el color de tu marca | | **Usa un color diferente** | Te permite establecer colores por defecto, pasar el cursor y los colores visitados para los hipervínculos | Para establecer el color del hipervínculo: 1. Navega hasta Configuración () en la barra de navegación izquierda del portal de la base de conocimiento. 2. En el panel de navegación izquierdo, navega a Sitio de la base de conocimientos } > **Personalización del sitio**. 3. En la sección **de Colores** , ve a **Enlace de color** y selecciona la opción que prefieras. 4. Si **seleccionas Usar un color diferente**, configura los estados por defecto, el paso del cursor y los visitados. 5. Haz clic **en Guardar**. --- ### Contraste automático WCAG Activar el contraste automático de WCAG ajusta automáticamente los elementos de color de tu sitio para cumplir con los estándares de accesibilidad [WCAG 2.1](https://docs.document360.com/docs/es/web-content-accessibility-guidelines-wcag) , en función del color de marca que elijas. 1. Navega hasta Configuración () en la barra de navegación izquierda del portal de la base de conocimiento. 2. En el panel de navegación izquierdo, navega hasta Sitio de la base de conocimientos } > **Personalización del sitio**. 3. En la sección **de Colores** , selecciona la casilla **Auto ajustado contraste de color para cumplir con los estándares WCAG** . 4. Haz clic **en Guardar**. --- ## Tipografía ### Emparejamiento de fuentes de artículos El emparejamiento de fuentes de artículos controla las fuentes utilizadas para los títulos y el contenido de los artículos en toda tu base de conocimientos. Las fuentes seleccionadas también aparecen en el editor, para que los autores puedan previsualizar cómo se verán los artículos cuando se publiquen. 1. Navega hasta Configuración () en la barra de navegación izquierda del portal de la base de conocimiento. 2. En el panel de navegación izquierdo, navega a Sitio de la base de conocimientos } > **Personalización del sitio**. 3. En la **sección Fuentes** , selecciona un par de fuentes del **mosaico de emparejamiento de fuentes Artículo** . La primera fuente se aplica a los títulos de los artículos y la segunda al contenido del artículo. 4. Para elegir una combinación específica, haz clic **en ¿Tienes una combinación de fuentes específica en mente?** para acceder a opciones de fuentes adicionales y seleccionar fuentes para títulos y contenido individualmente. 5. Haz clic **en Guardar**. ![Fonts section in Site customization showing Article font pairing and Site font options](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/site-customization-font.png) NOTA Por ejemplo, si redactas contenido en Verdana en el portal de la Base de Conocimientos pero seleccionas Ubuntu + Open Sans como emparejamiento de fuentes del artículo, el título del artículo aparecerá en Ubuntu y el contenido en Open Sans en la base de conocimientos. --- ### Fuente del sitio La fuente del sitio se aplica en toda la navegación de la base de conocimiento, incluyendo el panel izquierdo de navegación (categorías, subcategorías, títulos de artículos), cabecera, pie de página, navegación secundaria y controles. 1. Navega hasta Configuración () en la barra de navegación izquierda del portal de la base de conocimiento. 2. En el panel de navegación izquierdo, navega a Sitio de la base de conocimientos > **Personalización del sitio**. 3. En la sección **de Fuentes** , selecciona tu fuente preferida en el desplegable **de fuentes del sitio** . 4. Haz clic **en Guardar**. NOTA Para más información sobre cómo los cambios de fuentes a nivel de proyecto afectan a los artículos existentes, fuentes obsoletas y métodos de gestión de fuentes, consulte [Gestión de fuentes en su base de conocimiento](https://docs.document360.com/docs/es/managing-fonts-in-your-knowledge-base). --- ### Fuente personalizada Si las opciones de fuente integradas no coinciden con tu marca, puedes configurar una fuente personalizada para tu sitio de base de conocimientos. Para una guía paso a paso, consulta [Cómo configurar una fuente personalizada en la base de conocimiento](https://docs.document360.com/docs/es/how-to-configure-a-custom-font-in-the-knowledge-base). --- ## Mejores prácticas - **Activa el contraste automático WCAG** si el cumplimiento de accesibilidad es importante para tu audiencia; elimina la duda de comprobar manualmente los ratios de contraste para cada combinación de colores. - **Configura primero el color de tu marca** antes de configurar los colores de los hipervínculos; si planeas usar el color de marca para los hipervínculos, primero debe guardarse la configuración de color de marca. - **Prueba tanto los modos claro como oscuro** después de hacer cambios de color: un color de marca que se ve bien en modo claro puede tener bajo contraste en modo oscuro. Usa la vista previa del sitio para comprobar ambos. - **Utiliza el emparejamiento de fuentes de artículos para mayor legibilidad** : elige un emparejamiento donde la fuente del título sea distinta de la fuente del cuerpo para crear una jerarquía visual clara. - **Evita cambios frecuentes de fuente** : cambiar de fuente después de la publicación del contenido puede afectar cómo se representan los artículos existentes, especialmente si se han aplicado estilos personalizados a nivel de artículo.