1. Perceivable · 1.4 Distinguishable

1.4.12 — Text Spacing

Level AA

Engineering guidance on this page is adapted from Appt.org (Appt Foundation), used under the CC BY-SA 4.0 license. In keeping with that license, the adapted content on this page is likewise available under CC BY-SA 4.0. "Appt" is a registered trademark of the Appt Foundation; this page is not affiliated with or endorsed by Appt.

Adjust text spacing

On Android, you can use the following attribute to increase text spacing:

letterSpacing: set spacing between letters
lineHeight: set spacing between lines
lineSpacingExtra: increase spacing between lines
lineSpacingMultiplier: multiply spacing between lines
marginBottom: set spacing between paragraphs

xml

<TextView
    android:text="Appt"
    android:letterSpacing="3sp"
    android:lineHeight="20sp"
    android:lineSpacingExtra="5sp"
    android:lineSpacingMultiplier="1.5"
    android:layout_marginBottom="20dp"/>

In Jetpack Compose, you can use the following properties to change text spacing:

letterSpacing): set spacing between letters
lineHeight): set spacing between lines
baselineShift): change how much text is shifted up from current baseline
LineHeightStyle.Alignment: defines how text is aligned in the space provided by the line height
padding.padding(androidx.compose.ui.unit.Dp)): set spacing between paragraphs

kotlin

Text(
    text = "Appt",
    style = TextStyle(
        letterSpacing = 3.sp,
        lineHeight = 20.sp,
        baselineShift = BaselineShift(1.5F),
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Proportional,
        )
    ),
    modifier = Modifier
        .padding(bottom = 20.dp)
)

On iOS, you can use NSMutableParagraphStyle for paragraphs:

lineSpacing: set spacing between lines
lineHeightMultiple: multiply distance between lines by a number
paragraphSpacing: set spacing between paragraphs

To adjust the spacing between letters you can use the NSKernAttributeName attribute.

swift

let style = NSMutableParagraphStyle()
style.lineSpacing = 20
style.lineHeightMultiple = 1.5
style.paragraphSpacing = 20

let attributedString = NSAttributedString(string: "Appt", attributes: [
    .paragraphStyle:  style,
    .kern: 3.0
])
element.attributedText = attributedString

In SwiftUI, text spacing can be achieved using a combination of modifiers:

lineSpacing): set spacing between lines
kerning): set spacing between characters
padding): simulate paragraph spacing if needed.

swift

Text("SwiftUI Text Example")
    // Line spacing
    .lineSpacing(20)
    // Letter spacing
    .kerning(3) 
    // Simulate paragraph spacing
    .padding(.bottom, 10)

With Flutter, it is possible to set spacing in text with TextStyle. This can be done globally in the ThemeData or within a Text via the style parameter.

With the TextStyle class you can use the following attributes for spacing in the text:

height: set spacing between lines.
letterSpacing: set extra spacing between letters.
wordSpacing: adds extra spacing to whitespace.

dart

TextStyle(
  height: 1.5,
  letterSpacing: 3.0,
  wordSpacing: 5.0
);

React Native has a couple of attributes to adjust text spacing:

letterSpacing: set spacing between letters
lineHeight: set spacing between lines
paddingVertical: set spacing between paragraphs

jsx

<Text style={{
  letterSpacing: 3,
  lineHeight: 32,
  paddingVertical: 6
}}>Appt</Text>

In MAUI, there are a few properties to adjust text spacing:

CharacterSpacing: Set spacing between characters.
LineHeight: Set spacing between lines.
Padding: Set padding between paragraphs.

You can also make a Platform Behavior to use even more properties from native Android and iOS elements.

Usage (C#)

csharp

var label = new Label
{
    CharacterSpacing = 3,
    LineHeight = 32,
    Padding = 10
};

xml

<Label CharacterSpacing="3" LineHeight="32" Margin="10" Padding="10" />

Xamarin Forms has a couple of attributes to adjust text spacing:

CharacterSpacing: set spacing between characters.
LineHeight: set spacing between lines.
Padding: set padding between paragraphs

You can also make a CustomRenderer to use even more properties from native Android and iOS elements. For more information see:

xml

<Label CharacterSpacing="3" LineHeight="32" Margin="10" Padding="10" />

Support bold text

On Android, you can use the fontWeightAdjustment property on Android 12 and higher. The property returns an integer between 1 and 1000, which indicates the current user preference for increasing font weight. The constant FontStyle.FONT_WEIGHT_BOLD has a value of 700.

kotlin

fun Context.prefersBoldFont(): Boolean {
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
        return false
    }
    return resources.configuration.fontWeightAdjustment >= FontStyle.FONT_WEIGHT_BOLD
}

In Jetpack Compose, you can use fontWeightAdjustment property on Android 12 and higher. The property returns an integer between 1 and 1000, which indicates the current user preference for increasing font weight. The constant FontStyle.FONT_WEIGHT_BOLD has a value of 700.

kotlin

@Composable
fun prefersBoldFont(): Boolean {
    val context = LocalContext.current
    val configuration = LocalConfiguration.current
    return if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
        false
    } else {
        configuration.fontWeightAdjustment >= FontStyle.FONT_WEIGHT_BOLD
    }
}

In SwiftUI, the legibilityWeight environment variable can be used to check whether the user prefers bold text. By default, SwiftUI views automatically adapt to this preference. However, if you have manually set a specific font weight in your view, you should include a condition to check and respect the system's bold text setting to ensure readability.

swift

@Environment(\.legibilityWeight) private var legibilityWeight

var body: some View {
    Text("Welcome to Appt")
        .fontWeight(legibilityWeight == .bold ? .bold : .regular)
}

On React Native, the isBoldTextEnabled() method of AccessibilityInfo can be used to check whether the user prefers bold text.

Note: it only checks the preference on iOS. Android is not yet supported.

jsx

import { AccessibilityInfo } from "data/en/text-bold/react-native";

if (AccessibilityInfo.isBoldTextEnabled()) {
  // Use bold text
}

In MAUI, there is no built-in way to detect if the user has enabled bold fonts. You can create a method and consume the Native API to detect user preferences.

For Android, you can use the App Resources Config.

For iOS, you can use UIKit.UIAccessibility.IsBoldTextEnabled.

csharp

public bool PrefersBold()
{
#if ANDROID

    if (OperatingSystem.IsAndroidVersionAtLeast(31))
    {
        return false;
    }

    return Platform.AppContext.Resources.Configuration.FontWeightAdjustment >= Android.Graphics.Fonts.FontStyle.FontWeightBold;

#elif IOS

    return UIKit.UIAccessibility.IsBoldTextEnabled;

#endif
}

← Back to Engineering Support

1.4.12 — Text Spacing

Adjust text spacing

Android

Jetpack Compose

iOS

SwiftUI

Flutter

React Native

.NET MAUI

Xamarin

Support bold text

Android

Jetpack Compose

iOS

SwiftUI

Flutter

React Native

.NET MAUI

Xamarin