Dynamic Type: conceptos clave, estilos de texto y cómo funciona en iOS

Qué es Dynamic Type en iOS

Dynamic Type es una tecnología de iOS introducida en iOS 7 que permite que el texto en una aplicación se ajuste automáticamente a la configuración del tamaño de fuente del sistema. El usuario puede aumentar o disminuir la fuente en todas las aplicaciones a la vez — sin tener que cambiar la configuración dentro de cada aplicación individualmente.

Según Apple WWDC 2023, “Make Your App Visually Accessible”, más del 40% de los usuarios de iOS cambian el tamaño de la fuente respecto al estándar. Para el grupo de edad de 65+ años, esta cifra alcanza el 70%. Dynamic Type es un requisito obligatorio para la certificación de accesibilidad de App Store. La falta de soporte es un motivo de rechazo durante la revisión.

Cómo funciona: la aplicación usa UIFont.preferredFont(forTextStyle:) en lugar de UIFont(name:size:). iOS devuelve automáticamente una fuente escalada según la configuración actual del sistema. Cuando el tamaño cambia en la configuración, iOS genera una notificación UIContentSizeCategory.didChangeNotification — la aplicación debe recalcular el diseño.

Historia de Dynamic Type

Dynamic Type apareció en iOS 7 junto con el diseño plano. iOS 10 añadió soporte para fuentes personalizadas mediante UIFontMetrics. iOS 11 introdujo niveles de accesibilidad (hasta AccessibilityXXXL). iOS 15 añadió Dynamic Type en SwiftUI con soporte automático. Con cada versión, Apple refuerza los requisitos: a partir de iOS 17, las aplicaciones sin soporte de Dynamic Type reciben una advertencia al cargarse en App Store Connect.

Estilos de texto UIFont.TextStyle

iOS proporciona 8 estilos de texto, cada uno con un tamaño y grosor predefinidos para la configuración predeterminada:

Usar el estilo correcto no es solo cuestión de “apariencia”. UIFont.TextStyle.body en modo AccessibilityXXXL puede alcanzar los 53px. Si una aplicación usa una fuente fija de 17px para el body, el texto se vuelve ilegible para los usuarios que han aumentado el tamaño de la fuente.

Jerarquía visual mediante estilos

Dynamic Type no solo escala — preserva la jerarquía visual. Large Title siempre es más grande que Title 1, que es más grande que Body, independientemente del nivel de escala. Los coeficientes de escala varían: los encabezados escalan de forma más agresiva que el texto principal, para que la jerarquía se mantenga incluso en niveles de accesibilidad.

Niveles de escala

iOS admite 11 niveles de escala de texto, divididos en dos categorías:

• Tamaños estándar (5 niveles): XS, S, M, L (predeterminado), XL
• Tamaños de accesibilidad (6 niveles): accessibilityXL, accessibilityXXL, accessibilityXXXL, accessibilityXXXXL, accessibilityXXXXXL, accessibilityXXXXXXL

La diferencia entre XS y AccessibilityXXXL para el estilo body va de 14px a 53px — casi 4×. Un diseño pensado para 17px se rompe por completo a 53px: el texto se desborda, los botones se superponen, las celdas chocan entre sí.

Verificar la categoría actual en código:

let category = UIApplication.shared.preferredContentSizeCategory
// .extraSmall, .small, .medium, .large, .extraLarge ...
if category.isAccessibilityCategory {
    // Habilitar diseño alternativo
}

traitCollection y tamaño del texto

La categoría de tamaño de texto está disponible mediante traitCollection.uiContentSizeCategory. Cuando cambia la configuración del sistema, iOS llama a traitCollectionDidChange en todas las UIView. En este método, debes actualizar las fuentes y recalcular el diseño. SwiftUI lo hace automáticamente — UIKit requiere suscripción manual.

Para UICollectionView, usa UICollectionViewCompositionalLayout — ajusta automáticamente el número de columnas al ancho de la pantalla y al tamaño del texto. En niveles de accesibilidad, cambia de un diseño de dos columnas a una columna única para que el texto no se trunque y los elementos no se superpongan. Usa diseño condicional: para ancho regular — dos columnas, para compacto o accesibilidad — una columna.

Implementación en UIKit

La implementación básica en UIKit — UIFont.preferredFont(forTextStyle:). Este método devuelve una fuente escalada según la configuración actual del sistema:

titleLabel.font = UIFont.preferredFont(forTextStyle: .headline)
bodyLabel.font = UIFont.preferredFont(forTextStyle: .body)

Para fuentes personalizadas, usa UIFontMetrics:

let customFont = UIFont(name: "Montserrat-Regular", size: 16)!
titleLabel.font = UIFontMetrics(forTextStyle: .body)
    .scaledFont(for: customFont)

// Seguimiento de cambios de tamaño
NotificationCenter.default.addObserver(
    self,
    selector: #selector(preferredContentSizeChanged),
    name: UIContentSizeCategory.didChangeNotification,
    object: nil
)

Para UILabel en Interface Builder, simplemente establece la fuente como un estilo de texto y activa “Automatically Adjusts Font”. Para fuentes personalizadas, Interface Builder no admite UIFontMetrics — solo mediante código.

UIFontMetrics y curva de escala

UIFontMetrics usa la misma curva de escala que preferredFont. Puedes especificar fromTextStyle: .body, .headline, etc. Cada estilo tiene su propio coeficiente de escala. Body escala moderadamente, Large Title escala de forma agresiva. Si tu fuente personalizada se usa para texto principal, usa .body.

Dynamic Type en SwiftUI

En SwiftUI, el soporte de Dynamic Type está integrado por defecto. Todos los modificadores del sistema (.font(.body), .font(.title)) escalan automáticamente. El desarrollador no necesita llamar a UIFont.preferredFont.

Ejemplo:

Text("Texto principal")
    .font(.body)
    .lineLimit(nil)
    .minimumScaleFactor(0.5)

Para escalas personalizadas, usa DynamicTypeSize:

@Environment(\.dynamicTypeSize) var dynamicTypeSize

var body: some View {
    Text("Texto adaptativo")
        .font(.body)
        .padding(dynamicTypeSize <= .large ? 8 : 16)
}

SwiftUI actualiza automáticamente la vista cuando cambia el tamaño del texto del sistema — no se necesitan suscripciones adicionales a notificaciones.

Limitación de Dynamic Type en SwiftUI

El modificador .font(.body) solo funciona para la fuente del sistema. Para fuentes personalizadas en SwiftUI, usa Font.custom con UIFontMetrics internamente. A partir de iOS 16, SwiftUI admite DynamicTypeSize en @Environment, lo que permite adaptar el padding y la disposición.

Adaptación del diseño para fuentes grandes

Auto Layout es un requisito previo para el soporte de Dynamic Type. Los anchos y alturas fijos (>=, <=) se rompen en tamaños de accesibilidad. Usa intrinsicContentSize para UILabel — calcula automáticamente la altura para el tamaño de fuente actual.

Reglas de diseño adaptativo:

• UIStackView con distribution = fill y spacing >= 8 — los elementos se desplazarán a la siguiente línea
• UITableViewCell con automaticDimension — la altura de la celda se ajusta al contenido
• numberOfLines = 0 en UILabel — el texto no se trunca, sino que se envuelve
• Botones con edgeInsets — añade padding en niveles de accesibilidad mediante traitCollection.preferredContentSizeCategory

Para textos largos (por ejemplo, artículos, términos de uso), establece minimumScaleFactor en UILabel — esto reduce el texto como último recurso cuando Auto Layout no puede acomodar el contenido. Un valor de 0.5 significa que la fuente puede reducirse al 50% del tamaño preferido.

Ejemplo de ajuste de padding según la categoría de tamaño:

let isAccessibility = traitCollection
    .preferredContentSizeCategory.isAccessibilityCategory
stackView.spacing = isAccessibility ? 16 : 8
button.contentEdgeInsets = isAccessibility
    ? UIEdgeInsets(top: 16, left: 24, bottom: 16, right: 24)
    : UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16)

Problemas típicos de diseño en niveles de accesibilidad

Truncamiento de texto — UILabel con numberOfLines = 1 y ancho fijo trunca el texto en AccessibilityXL. Solución: numberOfLines = 0 y constraint trailing. Superposición de elementos — los botones con altura fija se superponen. Solución: UIStackView con spacing automático. Contenido fuera de pantalla — ScrollView es obligatorio para niveles de accesibilidad.

Pruebas de Dynamic Type

El Simulador de Xcode permite cambiar el tamaño del texto: en el menú del simulador, ve a Settings → Accessibility → Display & Text Size → Larger Text. Cambia entre los 11 niveles y verifica que el texto no se trunque, los botones sean accesibles y el diseño no se rompa.

Para pruebas automatizadas, usa la configuración contentSizeCategory en XCUIApplication:

func testAccessibilitySizes() {
    let app = XCUIApplication()
    app.launchArguments += [
        "-UIPreferredContentSizeCategoryName",
        "UICTContentSizeCategoryAccessibilityXXXL"
    ]
    app.launch()
    app.scrollViews.buttons["Enviar"].tap()
    XCTAssertTrue(app.staticTexts["Formulario enviado"]
        .waitForExistence(timeout: 5))
}

XCUITest con diferentes launchArguments permite verificar todos los niveles de escala en CI. No olvides probar las categorías de accesibilidad por separado — son las que más a menudo rompen el diseño. Según Apple, el 70% de los errores de Dynamic Type se encuentran específicamente en niveles de accesibilidad, porque los desarrolladores solo prueban tamaños estándar.

Accessibility Inspector: verificación de Dynamic Type

Xcode Accessibility Inspector muestra qué fuentes usa el elemento seleccionado — fijas o escalables. Si el elemento no responde a los cambios de tamaño de texto en el simulador, se está usando una fuente fija. Reemplázala con UIFont.preferredFont o UIFontMetrics.