Text und Typografie in der mobilen Entwicklung: was es ist, welche Tools und wie es funktioniert

Text in mobilen Apps: NSAttributedString auf iOS

NSAttributedString ist die grundlegende iOS-Klasse für die Arbeit mit formatiertem Text. Sie ermöglicht das Anwenden von Attributen auf einzelne Zeichen oder Bereiche: Schriftart über UIFont, Farbe über UIColor, Zeichenabstand über kern und Zeilenabstand über NSMutableParagraphStyle. In mobilen Apps wird NSAttributedString überall verwendet — von UILabel bis zu komplexen UITextView mit Bearbeitungsunterstützung.

UIFont und Schriftartenkonfiguration

UIFont ist die Hauptklasse für die Arbeit mit Schriftarten auf iOS. Sie unterstützt Systemschriftarten, benutzerdefinierte Schriftarten und Dynamic Type. UIFont(name:size:) lädt eine Schriftart über ihren Namen, UIFont.systemFont(ofSize:weight:) lädt die Systemschriftart. UIFontDescriptor ermöglicht das Modifizieren einer vorhandenen Schriftart: Ändern der Größe, des Gewichts oder Hinzufügen einer Transformationsmatrix. Für benutzerdefinierte Schriftarten wird die .ttf-Datei zum Projekt hinzugefügt und in Info.plist unter dem Schlüssel Fonts provided by application registriert.

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 und Absatzformatierung

NSMutableParagraphStyle ist eine veränderbare Version von ParagraphStyle zur Konfiguration der Absatzdarstellung. Es steuert die Ausrichtung (alignment), den Zeilenabstand (lineSpacing), Einzüge (headIndent, tailIndent) und den Umbruchmodus (lineBreakMode). ParagraphStyle ist entscheidend für die Lesbarkeit langer Texte auf mobilen Geräten: Ein korrekter lineSpacing verhindert das Verschmelzen von Zeilen, und lineBreakMode verhindert das Abschneiden von Wörtern. Die Einstellung paragraphSpacing definiert den Abstand zwischen Absätzen.

Text in mobilen Apps: SpannableString auf Android

SpannableString ist das Hauptwerkzeug für die Textformatierung auf Android. Es arbeitet über einen Mechanismus von Span-Objekten, die jeweils für einen Aspekt verantwortlich sind: StyleSpan für fett oder kursiv, ForegroundColorSpan für Farbe, URLSpan für Links, UnderlineSpan für Unterstreichung. SpannableStringBuilder ist das Äquivalent zu NSMutableAttributedString und ermöglicht den Aufbau von Text aus mehreren Fragmenten. Das Verständnis von SpannableString ist für die Erstellung flexibler Oberflächen mit formatiertem Text in mobilen Apps unerlässlich.

Typeface und benutzerdefinierte Schriftarten auf Android

Typeface ist die Klasse für die Arbeit mit Schriftarten auf Android. Sie unterstützt die Systemschriftarten Roboto und Noto sowie benutzerdefinierte Schriftarten. Typeface.createFromResource() lädt eine Schriftart aus res/font/, Typeface.createFromAsset() aus dem assets-Ordner. Android 8.0+ unterstützt Schriftfamilien in XML, die mehrere Schriftdateien zu einer Ressource zusammenfassen. Eine benutzerdefinierte Schriftart für Text in mobilen Apps auf Android wird über das Attribut android:fontFamily oder programmatisch mit setTypeface() festgelegt.

TextMeasurer und Textmessung

TextMeasurer (API 29+) ist ein modernes Werkzeug zum Messen von Text ohne Bindung an eine View. Es berechnet Breite, Höhe und Zeichenpositionen vor dem Rendern. Bei älteren APIs wird Paint.measureText() für einzeiligen Text oder StaticLayout für mehrzeiligen Text verwendet. TextMeasurer ist besonders nützlich in benutzerdefinierten Views, wo Text über Canvas.drawText() gezeichnet wird. Korrekte Messung verhindert das Abschneiden von Zeichen in der Oberfläche.

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

Typografie in der mobilen Entwicklung: Kerning, Ligaturen und Tracking

Typografie in mobilen Apps ist eine umfassende Konfiguration von Schriftarten, Zeichenabständen und Zeilenabständen. Die richtige Typografie in der mobilen Entwicklung wirkt sich direkt auf die Lesbarkeit des Textes und die visuelle Wahrnehmung der Oberfläche aus. Sehen wir uns die wichtigsten Parameter auf beiden Plattformen an.

Kerning und Tracking

Kerning ist die Anpassung des Abstands zwischen bestimmten Zeichenpaaren (AV, To, Wa). Tracking ist der gleichmäßige Zeichenabstand für den gesamten Text oder einen Teil davon. Auf iOS wird Kerning über NSKernAttributeName festgelegt, auf Android über die letterSpacing-Eigenschaft von TextView. Negative Werte rücken Zeichen näher zusammen, positive Werte spreizen sie. Die Typografie in der mobilen Entwicklung erfordert eine sorgfältige Abstimmung dieser Parameter: Für große Überschriften wird der Zeichenabstand normalerweise vergrößert, für Fließtext bleibt er standardmäßig.

Ligaturen

Ligaturen sind spezielle Glyphen, die Kombinationen von zwei oder mehr Zeichen ersetzen: fi, fl, ffi. Auf iOS werden Ligaturen über NSLigatureAttributeName gesteuert: 0 — deaktiviert, 1 — Standard, 2 — alle verfügbar. Auf Android werden Ligaturen auf Schriftartenebene über OpenType-Funktionen gesteuert. Das Aktivieren von Ligaturen verbessert das Erscheinungsbild des Textes, insbesondere bei Serifenschriften. Die Typografie in der mobilen Entwicklung verwendet Ligaturen hauptsächlich für Überschriften und Logos.

Benutzerdefinierte Schriftarten in mobilen Apps: Laden und Konfiguration

Benutzerdefinierte Schriftarten sind eines der wichtigsten Werkzeuge zur Schaffung eines einzigartigen visuellen Stils einer App. Sie helfen, die Marke hervorzuheben und die Benutzererfahrung zu verbessern. In mobilen Apps werden benutzerdefinierte Schriftarten für Überschriften, Logos, Akzentelemente und das Corporate Design verwendet.

Variable Fonts

Variable Fonts sind eine moderne Schriftartechnologie, bei der eine einzige Datei mehrere Stile enthält: von dünn bis extra fett, von schmal bis breit. Dies reduziert die App-Größe, indem mehrere Schriftdateien durch eine ersetzt werden. Auf iOS werden Variable Fonts über UIFont mit dem Parameter weight unterstützt. Auf Android — über Typeface.Builder mit Angabe der Variabilitätsachsen wght, wdth, slnt. Die Verwendung von Variable Fonts vereinfacht die Typografie in mobilen Apps: Der Entwickler muss keine separaten Dateien für jeden Stil laden.

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

NSTextAttachment und ImageSpan

NSTextAttachment auf iOS ermöglicht das Einbetten von UIImage in NSAttributedString — das Bild wird an der Grundlinie ausgerichtet und mit dem Text verschoben. Auf Android ist das Äquivalent ImageSpan innerhalb von SpannableString. Beide Ansätze sind nützlich für Chat mit Emojis, Nachrichtenfeeds mit Symbolen und Formulare mit benutzerdefinierten Kontrollkästchen. Es ist wichtig, das Bild richtig an die Schrifthöhe anzupassen, damit Text und Grafiken harmonisch wirken.

Texteffekte, Ausrichtung und Ellipsis

Neben der grundlegenden Formatierung unterstützt Text in mobilen Apps zusätzliche visuelle Effekte: Schatten, Kontur, Durchstreichung und Unterstreichung. Diese Werkzeuge erweitern die Möglichkeiten der Typografie, erfordern jedoch eine sorgfältige Anwendung, um die Lesbarkeit zu erhalten.

Textschatten und Kontur

Textschatten auf iOS wird über NSShadow mit offset, blurRadius und color festgelegt. Kontur — über NSStrokeWidthAttributeName: negative Werte erzeugen eine Füllung mit Kontur, positive Werte nur die Kontur. Durchstreichung — NSUnderlineStyle (.single, .thick, .double). Auf Android wird der TextView-Schatten über android:shadowRadius, android:shadowDx, android:shadowDy konfiguriert. SpannableString unterstützt StrikethroughSpan und UnderlineSpan. Die Textkontur auf Android wird über OutlineSpan oder eine benutzerdefinierte Schriftart implementiert.

Ellipsis und Marquee

Ellipsis ist das Abschneiden von Text mit Auslassungspunkten, wenn der Container überläuft. Auf iOS wird es über lineBreakMode .byTruncatingTail und numberOfLines konfiguriert. Auf Android — über android:ellipsize="end" und android:maxLines. Marquee ist eine Laufschrift-Animation, die auf Android über android:ellipsize="marquee" verfügbar ist. Auf iOS gibt es kein integriertes Äquivalent — die Bibliothek MarqueeLabel wird verwendet. Ellipsis ist für alle einzeiligen Texte in mobilen Apps obligatorisch, um ein Abschneiden des Inhalts zu vermeiden.

Dynamic Type auf iOS

Dynamic Type ist ein adaptives Textsystem auf iOS, das die Schriftgröße basierend auf den Bedienungshilfen-Einstellungen des Benutzers anpasst. Verwenden Sie UIFontMetrics zum Skalieren benutzerdefinierter Schriftarten. Dynamic Type ist für barrierefreie Apps obligatorisch. Auf Android sind die Äquivalente sp-Einheiten und scaledPixels, die entsprechend den Systemtexteinstellungen skaliert werden.