Tekst en typografie in mobiele ontwikkeling: wat het is, welke tools en hoe het werkt

Tekst in mobiele apps: NSAttributedString op iOS

NSAttributedString is de fundamentele iOS-klasse voor het werken met opgemaakte tekst. Het maakt het mogelijk om attributen toe te passen op afzonderlijke tekens of bereiken: lettertype via UIFont, kleur via UIColor, tekenafstand via kern en regelafstand via NSMutableParagraphStyle. In mobiele apps wordt NSAttributedString overal gebruikt — van UILabel tot complexe UITextView met bewerkingsondersteuning.

UIFont en lettertypeconfiguratie

UIFont is de hoofdklasse voor het werken met lettertypen op iOS. Het ondersteunt systeemlettertypen, aangepaste lettertypen en Dynamic Type. UIFont(name:size:) laadt een lettertype op naam, UIFont.systemFont(ofSize:weight:) laadt het systeemlettertype. UIFontDescriptor maakt het mogelijk om een bestaand lettertype te wijzigen: grootte, gewicht veranderen of een transformatiematrix toevoegen. Voor aangepaste lettertypen wordt het .ttf-bestand aan het project toegevoegd en geregistreerd in Info.plist onder de sleutel 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 en alinea-opmaak

NSMutableParagraphStyle is een wijzigbare versie van ParagraphStyle voor het configureren van alineaweergave. Het regelt uitlijning (alignment), regelafstand (lineSpacing), inspringingen (headIndent, tailIndent) en de afbreekmodus (lineBreakMode). ParagraphStyle is cruciaal voor de leesbaarheid van lange teksten op mobiele apparaten: correcte lineSpacing voorkomt het samensmelten van regels en lineBreakMode voorkomt het afknippen van woorden. De instelling paragraphSpacing definieert de ruimte tussen alinea's.

Tekst in mobiele apps: SpannableString op Android

SpannableString is het belangrijkste hulpmiddel voor tekstopmaak op Android. Het werkt via een mechanisme van Span-objecten, die elk verantwoordelijk zijn voor één aspect: StyleSpan voor vet of cursief, ForegroundColorSpan voor kleur, URLSpan voor links, UnderlineSpan voor onderstreping. SpannableStringBuilder is het equivalent van NSMutableAttributedString en maakt het mogelijk om tekst uit meerdere fragmenten op te bouwen. Inzicht in SpannableString is essentieel voor het maken van flexibele interfaces met opgemaakte tekst in mobiele apps.

Typeface en aangepaste lettertypen op Android

Typeface is de klasse voor het werken met lettertypen op Android. Het ondersteunt de systeemlettertypen Roboto en Noto, evenals aangepaste lettertypen. Typeface.createFromResource() laadt een lettertype uit res/font/, Typeface.createFromAsset() uit de map assets. Android 8.0+ ondersteunt lettertypefamilies in XML, waarbij meerdere lettertypebestanden worden gecombineerd tot één bron. Een aangepast lettertype voor tekst in mobiele apps op Android wordt ingesteld via het attribuut android:fontFamily of programmatisch via setTypeface().

TextMeasurer en tekstmeting

TextMeasurer (API 29+) is een modern hulpmiddel voor het meten van tekst zonder binding aan een View. Het berekent breedte, hoogte en tekenposities vóór het renderen. Op oudere API's wordt Paint.measureText() gebruikt voor tekst op één regel of StaticLayout voor tekst op meerdere regels. TextMeasurer is vooral nuttig in aangepaste Views waar tekst wordt getekend via Canvas.drawText(). Correcte meting voorkomt het afknippen van tekens in de interface.

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 mobiele ontwikkeling: kerning, ligaturen en tracking

Typografie in mobiele apps is een uitgebreide configuratie van lettertypen, tekenafstand en regelafstand. Correcte typografie in mobiele ontwikkeling heeft direct invloed op de leesbaarheid van tekst en de visuele perceptie van de interface. Laten we de belangrijkste parameters bekijken die op beide platforms beschikbaar zijn.

Kerning en Tracking

Kerning is het aanpassen van de ruimte tussen specifieke tekenparen (AV, To, Wa). Tracking is uniforme tekenafstand voor de gehele tekst of een deel ervan. Op iOS wordt kerning ingesteld via NSKernAttributeName, op Android — via de property letterSpacing van TextView. Negatieve waarden brengen tekens dichter bij elkaar, positieve waarden spreiden ze. Typografie in mobiele ontwikkeling vereist zorgvuldige afstemming van deze parameters: voor grote koppen wordt de tekenafstand meestal vergroot, voor hoofdtekst blijft deze standaard.

Ligaturen

Ligaturen zijn speciale glyphs die combinaties van twee of meer tekens vervangen: fi, fl, ffi. Op iOS worden ligaturen beheerd via NSLigatureAttributeName: 0 — uitgeschakeld, 1 — standaard, 2 — alle beschikbaar. Op Android worden ligaturen beheerd op lettertypeniveau via OpenType-functies. Het inschakelen van ligaturen verbetert het uiterlijk van tekst, vooral bij schreeflettertypen. Typografie in mobiele ontwikkeling gebruikt ligaturen voornamelijk voor koppen en logo's.

Aangepaste lettertypen in mobiele apps: laden en configuratie

Aangepaste lettertypen zijn een van de belangrijkste hulpmiddelen voor het creëren van een unieke visuele stijl voor een app. Ze helpen het merk te benadrukken en de gebruikerservaring te verbeteren. In mobiele apps worden aangepaste lettertypen gebruikt voor koppen, logo's, accentelementen en huisstijl.

Variabele lettertypen

Variabele lettertypen zijn een moderne lettertypetechnologie waarbij één bestand meerdere stijlen bevat: van dun tot extra vet, van smal tot breed. Dit vermindert de app-grootte door meerdere lettertypebestanden te vervangen door één. Op iOS worden variabele lettertypen ondersteund via UIFont met de parameter weight. Op Android — via Typeface.Builder met specificatie van de variabiliteitsassen wght, wdth, slnt. Het gebruik van variabele lettertypen vereenvoudigt typografie in mobiele apps: de ontwikkelaar hoeft geen aparte bestanden te laden voor elke stijl.

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

NSTextAttachment en ImageSpan

NSTextAttachment op iOS maakt het mogelijk om UIImage in NSAttributedString in te bedden — de afbeelding wordt uitgelijnd op de basislijn en beweegt mee met de tekst. Op Android is het equivalent ImageSpan in SpannableString. Beide benaderingen zijn nuttig voor chat met emoji, nieuwsfeeds met pictogrammen en formulieren met aangepaste selectievakjes. Het is belangrijk om de afbeelding correct te schalen naar de lettertypehoogte, zodat tekst en afbeeldingen harmonieus ogen.

Teksteffecten, uitlijning en ellips

Naast de basisopmaak ondersteunt tekst in mobiele apps extra visuele effecten: schaduwen, contouren, doorhaling en onderstreping. Deze hulpmiddelen vergroten de mogelijkheden van typografie, maar vereisen zorgvuldige toepassing om de leesbaarheid te behouden.

Tekstschaduw en contour

Tekstschaduw op iOS wordt ingesteld via NSShadow met offset, blurRadius en color. Contour — via NSStrokeWidthAttributeName: negatieve waarden creëren vulling met contour, positieve waarden alleen de contour. Doorhaling — NSUnderlineStyle (.single, .thick, .double). Op Android wordt TextView-schaduw geconfigureerd via android:shadowRadius, android:shadowDx, android:shadowDy. SpannableString ondersteunt StrikethroughSpan en UnderlineSpan. Tekstcontour op Android wordt geïmplementeerd via OutlineSpan of een aangepast lettertype.

Ellips en Marquee

Ellips is het afkappen van tekst met puntjes wanneer de container overloopt. Op iOS wordt het geconfigureerd via lineBreakMode .byTruncatingTail en numberOfLines. Op Android — via android:ellipsize="end" en android:maxLines. Marquee is een scrollende tekstanimatie beschikbaar op Android via android:ellipsize="marquee". Op iOS is er geen ingebouwd equivalent — de bibliotheek MarqueeLabel wordt gebruikt. Ellips is verplicht voor alle eenregelige teksten in mobiele apps om inhoudsafkapping te voorkomen.

Dynamic Type op iOS

Dynamic Type is een adaptief tekstsysteem op iOS dat de lettergrootte aanpast op basis van de Toegankelijkheidsinstellingen van de gebruiker. Gebruik UIFontMetrics om aangepaste lettertypen te schalen. Dynamic Type is verplicht voor toegankelijkheidsconforme apps. Op Android zijn de equivalenten sp-eenheden en scaledPixels, die schalen volgens de systeeminstellingen voor tekstgrootte.