Testo e tipografia nello sviluppo mobile: cosa sono, quali strumenti e come funzionano

Testo nelle app mobili: NSAttributedString su iOS

NSAttributedString è la classe fondamentale di iOS per lavorare con testo formattato. Consente di applicare attributi a singoli caratteri o intervalli: font tramite UIFont, colore tramite UIColor, spaziatura tra caratteri tramite kern e interlinea tramite NSMutableParagraphStyle. Nelle app mobili, NSAttributedString è utilizzato ovunque — da UILabel a complessi UITextView con supporto alla modifica.

UIFont e configurazione del font

UIFont è la classe principale per lavorare con i font su iOS. Supporta i tipi di carattere di sistema, i font personalizzati e Dynamic Type. UIFont(name:size:) carica un font per nome, UIFont.systemFont(ofSize:weight:) carica il font di sistema. UIFontDescriptor consente di modificare un font esistente: cambiare dimensione, peso o aggiungere una matrice di trasformazione. Per i font personalizzati, il file .ttf viene aggiunto al progetto e registrato in Info.plist sotto la chiave Fonts provided by application.

let attributes: [NSAttributedString.Key: Any] = [
    .font: UIFont(name: "HelveticaNeue-Bold", size: 18) as Any,
    .foregroundColor: UIColor.darkGray as Any,
    .kern: 1.5 as Any
]
let attributedString = NSAttributedString(
    string: "Форматированный текст",
    attributes: attributes
)
label.attributedText = attributedString

NSMutableParagraphStyle e formattazione dei paragrafi

NSMutableParagraphStyle è una versione mutabile di ParagraphStyle per configurare la visualizzazione dei paragrafi. Controlla l'allineamento (alignment), l'interlinea (lineSpacing), i rientri (headIndent, tailIndent) e la modalità di troncamento (lineBreakMode). ParagraphStyle è fondamentale per la leggibilità di testi lunghi sui dispositivi mobili: un lineSpacing appropriato impedisce la fusione delle righe, e lineBreakMode impedisce il taglio delle parole. L'impostazione paragraphSpacing definisce lo spazio tra i paragrafi.

Testo nelle app mobili: SpannableString su Android

SpannableString è lo strumento principale per la formattazione del testo su Android. Funziona attraverso un meccanismo di oggetti Span, ciascuno responsabile di un aspetto: StyleSpan per grassetto o corsivo, ForegroundColorSpan per colore, URLSpan per link, UnderlineSpan per sottolineatura. SpannableStringBuilder è l'equivalente di NSMutableAttributedString, consentendo di costruire testo da più frammenti. Comprendere SpannableString è essenziale per creare interfacce flessibili con testo formattato nelle app mobili.

Typeface e font personalizzati su Android

Typeface è la classe per lavorare con i font su Android. Supporta i tipi di carattere di sistema Roboto e Noto, oltre ai font personalizzati. Typeface.createFromResource() carica un font da res/font/, Typeface.createFromAsset() dalla cartella assets. Android 8.0+ supporta le famiglie di font in XML, combinando più file di font in un'unica risorsa. Un font personalizzato per il testo nelle app mobili su Android viene impostato tramite l'attributo android:fontFamily o programmaticamente usando setTypeface().

TextMeasurer e misurazione del testo

TextMeasurer (API 29+) è uno strumento moderno per misurare il testo senza legarsi a una View. Calcola larghezza, altezza e posizioni dei caratteri prima del rendering. Sulle vecchie API, Paint.measureText() viene utilizzato per testo su una riga o StaticLayout per testo su più righe. TextMeasurer è particolarmente utile nelle View personalizzate dove il testo viene disegnato tramite Canvas.drawText(). Una misurazione corretta impedisce il taglio dei caratteri nell'interfaccia.

val spannable = SpannableString("Жирный текст с цветом")
spannable.setSpan(
    StyleSpan(Typeface.BOLD),
    0, 6,
    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
)
spannable.setSpan(
    ForegroundColorSpan(Color.RED),
    14, 19,
    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
)
textView.text = spannable

Tipografia nello sviluppo mobile: crenatura, legature e tracking

La tipografia nelle app mobili è una configurazione completa di font, spaziatura tra caratteri e interlinea. Una tipografia appropriata nello sviluppo mobile influisce direttamente sulla leggibilità del testo e sulla percezione visiva dell'interfaccia. Esaminiamo i parametri chiave disponibili su entrambe le piattaforme.

Crenatura e Tracking

La crenatura è la regolazione dello spazio tra coppie specifiche di caratteri (AV, To, Wa). Il tracking è la spaziatura uniforme tra i caratteri per l'intero testo o una sua parte. Su iOS, la crenatura viene impostata tramite NSKernAttributeName, su Android — tramite la proprietà letterSpacing di TextView. I valori negativi avvicinano i caratteri, i valori positivi li allontanano. La tipografia nello sviluppo mobile richiede una regolazione attenta di questi parametri: per i titoli grandi, la spaziatura tra caratteri viene solitamente aumentata, per il testo del corpo rimane standard.

Legature

Le legature sono glifi speciali che sostituiscono combinazioni di due o più caratteri: fi, fl, ffi. Su iOS, le legature sono controllate tramite NSLigatureAttributeName: 0 — disattivate, 1 — standard, 2 — tutte disponibili. Su Android, le legature sono controllate a livello di font tramite funzionalità OpenType. Attivare le legature migliora l'aspetto del testo, specialmente nei caratteri con grazie. La tipografia nello sviluppo mobile utilizza le legature principalmente per titoli e loghi.

Font personalizzati nelle app mobili: caricamento e configurazione

I font personalizzati sono uno dei principali strumenti per creare uno stile visivo unico per un'app. Aiutano a evidenziare il marchio e migliorare l'esperienza utente. Nelle app mobili, i font personalizzati vengono utilizzati per titoli, loghi, elementi di accento e identità aziendale.

Variable Fonts

I Variable Fonts sono una tecnologia moderna di font in cui un singolo file contiene più stili: dal sottile all'extra grassetto, dallo stretto al largo. Questo riduce le dimensioni dell'app sostituendo diversi file di font con uno solo. Su iOS, i Variable Fonts sono supportati tramite UIFont con il parametro weight. Su Android — tramite Typeface.Builder specificando gli assi di variabilità wght, wdth, slnt. L'uso dei Variable Fonts semplifica la tipografia nelle app mobili: lo sviluppatore non deve caricare file separati per ogni stile.

let customFont = UIFont(name: "CustomFont-Regular", size: 16)
let scaledFont = UIFontMetrics.default
    .scaledFont(for: customFont)
label.font = scaledFont
label.adjustsFontForContentSizeCategory(true)

NSTextAttachment e ImageSpan

NSTextAttachment su iOS consente di incorporare UIImage all'interno di NSAttributedString — l'immagine si allinea alla lineetta di base e si sposta insieme al testo. Su Android, l'equivalente è ImageSpan all'interno di SpannableString. Entrambi gli approcci sono utili per chat con emoji, feed di notizie con icone e moduli con caselle di controllo personalizzate. È importante ridimensionare correttamente l'immagine per adattarla all'altezza del font in modo che testo e grafica appaiano armoniosi.

Effetti del testo, allineamento ed ellissi

Oltre alla formattazione di base, il testo nelle app mobili supporta effetti visivi aggiuntivi: ombre, contorni, barrato e sottolineatura. Questi strumenti ampliano le possibilità della tipografia ma richiedono un'applicazione attenta per mantenere la leggibilità.

Ombra e contorno del testo

L'ombra del testo su iOS viene impostata tramite NSShadow con offset, blurRadius e color. Il contorno — tramite NSStrokeWidthAttributeName: i valori negativi creano un riempimento con contorno, i valori positivi creano solo il contorno. Il barrato — NSUnderlineStyle (.single, .thick, .double). Su Android, l'ombra di TextView viene configurata tramite android:shadowRadius, android:shadowDx, android:shadowDy. SpannableString supporta StrikethroughSpan e UnderlineSpan. Il contorno del testo su Android viene implementato tramite OutlineSpan o un font personalizzato.

Ellissi e Marquee

L'ellissi è il troncamento del testo con puntini di sospensione quando il contenitore trabocca. Su iOS, viene configurata tramite lineBreakMode .byTruncatingTail e numberOfLines. Su Android — tramite android:ellipsize="end" e android:maxLines. Marquee è un'animazione di testo scorrevole disponibile su Android tramite android:ellipsize="marquee". Su iOS non esiste un equivalente integrato — viene utilizzata la libreria MarqueeLabel. L'ellissi è obbligatoria per tutti i testi su una riga nelle app mobili per evitare il taglio del contenuto.

Dynamic Type su iOS

Dynamic Type è un sistema di testo adattivo su iOS che regola la dimensione del font in base alle impostazioni di Accessibilità dell'utente. Utilizza UIFontMetrics per ridimensionare i font personalizzati. Dynamic Type è obbligatorio per le app conformi all'accessibilità. Su Android, l'equivalente sono le unità sp e scaledPixels, che si ridimensionano in base alle impostazioni di dimensione del testo del sistema.