Bold Text en aplicaciones móviles: qué es y cómo configurar el texto en negrita

¿Qué es Bold Text en accesibilidad?

Bold Text es un ajuste del sistema de los sistemas operativos que obliga a usar un peso de fuente en negrita para todos los elementos de texto de la interfaz en lugar del peso estándar (regular o normal). A diferencia de simplemente aumentar el tamaño de la fuente, Bold Text no cambia la escala — aumenta el grosor de los trazos de las letras, haciéndolos más ricos y con más contraste sobre el fondo.

Esta función pertenece a la categoría de display accommodations — ajustes de pantalla que ayudan a las personas con discapacidad visual a percibir la información más cómodamente. Bold Text es especialmente eficaz para la baja agudeza visual (ambliopía), la hipermetropía relacionada con la edad (presbicia) y ciertas formas de dislexia donde las letras se ven dobles o borrosas con el grosor estándar.

El texto en negrita aumenta la legibilidad — la velocidad y precisión para reconocer caracteres individuales. Estudios de Usability.gov muestran que la tipografía en negrita mejora la precisión de lectura entre un 12–18% en usuarios con discapacidad visual en comparación con la tipografía regular del mismo tamaño. Sin embargo, Bold Text no reemplaza el agrandamiento del texto — ambas funciones se pueden combinar.

Diferencia entre Bold Text y el agrandamiento de fuente

La diferencia clave entre Bold Text y Dynamic Type (iOS) o Font Size (Android) es el mecanismo de efecto. El agrandamiento de fuente cambia el tamaño de las letras, mientras que Bold Text solo afecta al grosor. Al agrandar la fuente, la capacidad de la pantalla se ve afectada (cabe menos contenido en una pantalla), mientras que Bold Text preserva la cantidad de elementos visibles. Para usuarios con presbicia en etapas tempranas, Bold Text suele ser suficiente sin necesidad de agrandar el texto.

Quién necesita Bold Text

La audiencia principal de Bold Text incluye personas con ambliopía (agudeza visual reducida no corregible con gafas), presbicia (hipermetropía relacionada con la edad a partir de los 40–45 años) y ciertas formas de dislexia. La función también es útil al leer con luz solar intensa — el texto en negrita mantiene el contraste contra los reflejos. Las tecnologías de asistencia como VoiceOver y TalkBack funcionan independientemente de Bold Text — el ajuste solo afecta a la visualización.

Bold Text en iOS: configuración y principio de funcionamiento

En iOS, Bold Text es una de las funciones de accesibilidad más antiguas, introducida en iOS 7 (2013). El ajuste se encuentra en Settings > Display & Brightness > Bold Text y requiere reiniciar el iPhone: el sistema reconstruye todas las fuentes en las aplicaciones del sistema (Settings, Mail, Messages, Calendar, Notes) y las aplicaciones de terceros que usan la fuente del sistema San Francisco.

Técnicamente, iOS reemplaza el archivo de fuente del sistema San Francisco por su variante Bold (SF Pro Bold / SF Pro Rounded Bold) a nivel del framework CoreText. Después de activar Bold Text, todo el texto en pantalla — desde los encabezados de navegación hasta las etiquetas de botones — se muestra con font-weight 700 en lugar de 400. Un desarrollador no puede anular este comportamiento para los elementos del sistema, pero puede gestionar las fuentes en su propia interfaz a través de Dynamic Type.

Para los desarrolladores, cuando Bold Text está activado, todas las instancias de UIFont con textStyle (.body, .headline, .caption y otras) reciben automáticamente el peso negrita. UIFontWeight existe en dos variantes: regular (0.0) y bold (1.0). Con Bold Text activo, el sistema aumenta fontWeight entre 0.3–0.5 para cada estilo. El estado se puede comprobar mediante UIAccessibility.isBoldTextEnabled.

Comprobación de Bold Text en una aplicación iOS

Un desarrollador puede comprobar si Bold Text está activado en el dispositivo y adaptar la interfaz en consecuencia. Por ejemplo, si los encabezados de tabla ya usan negrita, al activar la función puede ser necesario reducir el peso de la fuente para evitar ruido visual. La comprobación utiliza el framework UIAccessibility.

import UIKit

class BoldTextManager {

    // Comprobando el estado de Bold Text
    static var isBoldTextEnabled: Bool {
        return UIAccessibility.isBoldTextEnabled
    }

    // Adaptando la fuente para Bold Text
    static func adjustedFont(
        textStyle: UIFont.TextStyle,
        weight: UIFont.Weight
    ) -> UIFont {
        let baseFont = UIFont.preferredFont(
            forTextStyle: textStyle
        )
        guard isBoldTextEnabled else {
            return baseFont
        }
        // Reduciendo la negrita para evitar double-bold
        let adjustedWeight: UIFont.Weight
        switch weight {
        case .bold, .heavy:
            adjustedWeight = .semibold
        case .semibold:
            adjustedWeight = .medium
        default:
            adjustedWeight = weight
        }
        return UIFont.systemFont(
            ofSize: baseFont.pointSize,
            weight: adjustedWeight
        )
    }

    // Fuente en caché con soporte Bold Text
    static func labelFont() -> UIFont {
        return adjustedFont(
            textStyle: .body,
            weight: .regular
        )
    }
}

// Suscribiéndose a cambios de Bold Text (Notificación)
NotificationCenter.default.addObserver(
    self,
    selector: #selector(boldTextStatusChanged),
    name: UIAccessibility.boldTextStatusDidChangeNotification,
    object: nil
)

@objc func boldTextStatusChanged() {
    // Actualizar interfaz al cambiar Bold Text
    updateFonts()
}

La clase BoldTextManager comprueba isBoldTextEnabled, adapta el peso de la fuente (reduce heavy/bold a semibold/medium cuando la función está activa) y se suscribe a boldTextStatusDidChangeNotification. Esto previene el efecto double-bold, donde un desarrollador ya usa negrita para los encabezados y el sistema los engrosa aún más.

Impacto en UITableView y UICollectionView

Bold Text afecta al diseño de las celdas de UITableView y UICollectionView, ya que aumentar el grosor de la fuente puede cambiar la altura de la fila. Al usar celdas de tamaño automático (estimatedRowHeight + UITableView.automaticDimension), iOS recalcula automáticamente la altura cuando cambia la fuente. Para alturas de celda fijas, el desarrollador debe llamar a reloadData() después de recibir boldTextStatusDidChangeNotification, de lo contrario el texto puede cortarse.

Improve Readability en Android: el equivalente de Bold Text

En Android, la función Bold Text se llama “Improve Readability” en la interfaz de ajustes y se encuentra en la sección de Accesibilidad. En algunas versiones de Android, especialmente en dispositivos Samsung One UI, la función se llama “High Contrast Text.” El ajuste se aplica a todos los elementos del sistema y a la mayoría de las aplicaciones de terceros.

La implementación técnica en Android difiere de iOS: en lugar de reemplazar la fuente del sistema, Android anula Typeface a nivel del sistema a través de Resources.Theme. Cuando se activa el ajuste, el sistema cambia el atributo android:textStyle para todos los elementos de texto, estableciendo bold o italic+bold. Un desarrollador puede comprobar el estado mediante Settings.Global.getFloat() o AccessibilityManager.

Comprobación de Bold Text en una aplicación Android

En Android, no existe una API directa equivalente a UIAccessibility.isBoldTextEnabled. La comprobación se realiza a través de ContentResolver y Settings.System. El ajuste se almacena en las preferencias globales como font_weight_adjustment. Para Jetpack Compose, es accesible mediante LocalDensity y fontScale.

import android.content.Context
import android.provider.Settings
import android.util.TypedValue
import androidx.compose.ui.text.font.FontWeight

class AndroidBoldTextHelper {

    // Comprobando la legibilidad mejorada mediante ajustes del sistema
    fun isBoldTextEnabled(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "font_weight_adjustment"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — adaptación de FontWeight
    fun adjustFontWeight(
        context: Context,
        original: FontWeight
    ): FontWeight {
        if (!isBoldTextEnabled(context)) return original

        return when (original) {
            FontWeight.Bold, FontWeight.ExtraBold -> FontWeight.SemiBold
            FontWeight.SemiBold -> FontWeight.Medium
            else -> original
        }
    }

    // XML View — aplicación mediante TypedValue
    fun applyBoldStyleFix(context: Context, textView: android.widget.TextView) {
        if (isBoldTextEnabled(context)) {
            val paint = textView.paint
            val fakeBold = paint.isFakeBoldText
            // Reduciendo fakeBold si ya está activado por el sistema
            if (fakeBold) {
                paint.isFakeBoldText = false
                textView.invalidate()
            }
        }
    }
}

La clase AndroidBoldTextHelper lee el ajuste del sistema font_weight_adjustment, adapta FontWeight en Jetpack Compose y elimina el fakeBold duplicado en XML View. A diferencia de iOS, Android no proporciona un canal de notificación para cambios de Bold Text — el desarrollador comprueba el ajuste al iniciar la Activity o mediante ContentObserver.

ContentObserver para rastrear cambios

Para rastrear cambios de Bold Text en tiempo de ejecución, un desarrollador de Android puede usar ContentObserver. Cuando cambia el ajuste font_weight_adjustment, el sistema notifica a ContentResolver y la aplicación puede actualizar su interfaz. Esto es importante para AccessibilityService y lanzadores personalizados que deben responder instantáneamente a los cambios de ajuste del usuario.

CSS font-weight: tipos de grosor de fuente

En el desarrollo web, el grosor de la fuente se controla con la propiedad CSS font-weight con valores que van de 100 (Thin) a 900 (Black). Los valores estándar incluyen normal = 400 y bold = 700. Bold Text en el sistema operativo no afecta directamente a CSS font-weight — los navegadores web no reciben una señal del sistema sobre Bold Text activado a nivel de CSS. Sin embargo, un desarrollador puede usar una media feature de CSS si la plataforma lo soporta.

Para iOS, Safari soporta la función multimedia -webkit-text-size-adjust pero no tiene una media query directa para Bold Text. En Android, Chrome tampoco proporciona una media query para el ajuste de texto en negrita del sistema. Se recomienda a los desarrolladores web usar prefers-contrast y prefers-reduced-motion para la adaptación, y para el texto en negrita — comprobar el ajuste mediante User-Agent o estilos de respaldo.

Uso de fuentes variables (Variable Fonts)

Las fuentes variables (OpenType Font Variations) permiten un ajuste suave del grosor de la fuente mediante CSS font-weight en el rango de 1–999 en incrementos de 1 unidad. A diferencia de las fuentes estándar donde solo están disponibles valores discretos (400, 700), las fuentes variables permiten elegir el peso óptimo para cada usuario. Se puede usar un rango más amplio para ajustes de accesibilidad.

/* Fuente variable con ajuste suave de grosor */
@font-face {
    font-family: "Inter Variable";
    src: url("/fonts/Inter-Variable.woff2")
        format("woff2-variations");
    font-weight: 100 900;
    font-stretch: 50% 200%;
}

/* Adaptación al Bold Text del sistema mediante clase */
.bold-text-enabled {
    --font-weight-body: 500;
    --font-weight-heading: 700;
}

.bold-text-enabled .text-body {
    font-weight: var(--font-weight-body);
}

.bold-text-enabled .text-heading {
    font-weight: var(--font-weight-heading);
}

/* prefers-contrast: more — enfoque alternativo */
@media (prefers-contrast: more) {
    .content {
        --font-weight-increase: 100;
    }
    .content .text {
        font-weight: calc(
            var(--font-weight-base) +
            var(--font-weight-increase)
        );
    }
}

El ejemplo de CSS muestra cómo cargar la fuente variable Inter Variable, usar propiedades personalizadas de CSS para controlar el peso y adaptarse mediante prefers-contrast: more. Las fuentes variables permiten aumentar font-weight entre 50–100 unidades cuando el Bold Text del sistema está activado sin perder calidad de renderizado. Para detectar el estado de Bold Text en el cliente, se puede usar JavaScript para comprobar el User-Agent y añadir una clase al elemento html.

Detección de Bold Text con JavaScript en una página web

Dado que CSS no proporciona una media query directa para Bold Text, los desarrolladores web usan JavaScript: crean un elemento invisible con una fuente conocida, miden su anchura, cambian el font-weight y comparan la diferencia. Si la diferencia es mayor de lo esperado, es probable que el Bold Text del sistema esté activo. Este método se usa en bibliotecas de accesibilidad para el ajuste automático de estilos.

Cómo afecta Bold Text a la accesibilidad de las aplicaciones

Bold Text aborda problemas específicos de usuarios con discapacidad visual: mejora la distinguibilidad de caracteres en la ambliopía, reduce la fatiga visual durante la lectura prolongada y compensa el bajo contraste de la pantalla bajo luz solar intensa. Según WebAIM Million (2025), el 12.3% de todas las páginas tienen texto con contraste insuficiente — Bold Text puede compensar parcialmente este defecto del lado del usuario.

Para los desarrolladores, el soporte de Bold Text es parte de los requisitos de WCAG 2.2: criterio 1.4.1 (Uso del color) y 1.4.3 (Contraste mínimo). La aplicación debe mostrarse correctamente con el ajuste de Bold Text del sistema activado sin pérdida de contenido, superposición de elementos o truncamiento de texto. Las pruebas con Bold Text activado son obligatorias al preparar la publicación en App Store y Google Play.

Recomendaciones de prueba

Al probar una aplicación con Bold Text, verifique: si todos los elementos de texto se muestran completamente (sin truncamiento), si la negrita se duplica (double-bold), si las alturas de las celdas en las tablas se recalculan correctamente y si los elementos se desplazan entre sí. Use Accessibility Inspector (Xcode) o Accessibility Scanner (Android) para detectar automáticamente problemas con Bold Text.

• Xcode Accessibility Inspector — auditoría de fuentes con simulación de modo Bold Text
• Android Accessibility Scanner — comprobación de relación de contraste y duplicación de font-weight
• UI Testing — pruebas de captura de pantalla con Bold Text activado y desactivado
• Dynamic Type testing — combinación de Bold Text + fuente agrandada

El futuro de Bold Text en plataformas móviles

Los iOS y Android modernos están evolucionando Bold Text hacia un control más preciso: iOS 18 (2024) añadió ajustes de fuente por aplicación, incluido el peso negrita, y Android 16 (2025) amplió la API font_weight_adjustment para desarrolladores. Se espera que las versiones futuras proporcionen una media query de CSS para Bold Text, eliminando la necesidad de detección con JavaScript.