Introduction

Customizing UIButton typography can look simple until title text appears too high or too low after applying a custom font. Vertical alignment issues usually come from font metrics, content insets, and image-title layout interactions. A stable solution combines proper font setup, inset tuning, and constraint-aware sizing.

Understand Why Vertical Alignment Looks Wrong

A UIButton title uses UILabel internals and font metrics such as ascender, descender, and baseline offsets. Custom fonts often have different metrics than system fonts, so text can appear visually off-center even when constraints are correct.

Common causes:

• Font with unusual ascent and descent values.
• Mixed image and title layout with default edge insets.
• Fixed-height button that does not match text metrics.
• Dynamic type size changes without relayout.

Knowing root cause helps avoid random pixel adjustments.

Apply Custom Font Correctly

Always set font on titleLabel and ensure button has enough height.

1import UIKit
2
3let button = UIButton(type: .system)
4button.setTitle("Continue", for: .normal)
5button.titleLabel?.font = UIFont(name: "AvenirNext-DemiBold", size: 18)
6button.contentHorizontalAlignment = .center
7button.contentVerticalAlignment = .center

Setting only setTitle is not enough for typography control.

Use Content Insets for Optical Centering

If text still looks slightly high or low, adjust contentEdgeInsets and titleEdgeInsets deliberately.

button.contentEdgeInsets = UIEdgeInsets(top: 6, left: 14, bottom: 6, right: 14)
button.titleEdgeInsets = UIEdgeInsets(top: 1, left: 0, bottom: -1, right: 0)

Use small values and test across screen sizes. Large inset offsets usually indicate underlying layout issue.

Handle Buttons with Icons and Text

Icon plus text buttons require spacing and alignment management. In iOS fifteen and later, UIButton.Configuration is cleaner than manual insets.

1var config = UIButton.Configuration.filled()
2config.title = "Pay"
3config.image = UIImage(systemName: "creditcard")
4config.imagePadding = 8
5config.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16)
6
7let payButton = UIButton(configuration: config)
8payButton.titleLabel?.font = UIFont(name: "AvenirNext-DemiBold", size: 17)

Configuration API reduces many historical edge-inset pitfalls.

Constraint Strategy for Vertical Stability

Avoid ambiguous height behavior. Either:

• Set explicit button height that supports largest expected text.
• Or allow intrinsic content size and avoid strict conflicting constraints.

Example with Auto Layout:

1button.translatesAutoresizingMaskIntoConstraints = false
2NSLayoutConstraint.activate([
3    button.heightAnchor.constraint(greaterThanOrEqualToConstant: 44),
4    button.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
5    button.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
6])

Using minimum touch target height also improves accessibility.

Dynamic Type and Localization Considerations

If app supports dynamic type, custom fonts should scale using UIFontMetrics.

let base = UIFont(name: "AvenirNext-DemiBold", size: 17)!
button.titleLabel?.font = UIFontMetrics(forTextStyle: .headline).scaledFont(for: base)
button.titleLabel?.adjustsFontForContentSizeCategory = true

Also test long localized strings. Text expansion can reveal hidden clipping and alignment issues.

Debugging Alignment Quickly

When alignment looks off, inspect these first:

1. titleLabel font and line height.
2. contentEdgeInsets and titleEdgeInsets.
3. Button height versus font size.
4. Image placement rules.
5. Compression resistance and hugging priorities.

A simple debug trick is temporarily adding background colors to button and title label to visualize vertical center mismatch.

Accessibility and Visual Quality

Bold custom fonts can reduce readability if weight is too heavy at small sizes. Check contrast and legibility in both light and dark modes. Do not rely on font weight alone for state indication such as selected and disabled states.

Use additional cues such as color and icon changes so state remains understandable.

Reusable Styling Pattern

To keep consistency, create a helper extension for typography and insets.

1extension UIButton {
2    func applyPrimaryStyle() {
3        self.titleLabel?.font = UIFont(name: "AvenirNext-DemiBold", size: 17)
4        self.contentEdgeInsets = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16)
5        self.contentHorizontalAlignment = .center
6        self.contentVerticalAlignment = .center
7    }
8}

Reusable styling reduces drift across screens.

Common Pitfalls

• Assuming custom font metrics match system font metrics.
• Using large manual inset offsets without fixing layout root cause.
• Forgetting to test icon-plus-text button configurations.
• Applying fixed button heights that clip larger accessibility fonts.
• Styling buttons ad hoc instead of shared style tokens.

Summary

• Vertical alignment issues usually come from font metrics and layout interactions.
• Set custom fonts explicitly and tune insets with small controlled adjustments.
• Prefer UIButton.Configuration for modern icon and title layouts.
• Support dynamic type and localization when validating alignment.
• Centralize button styling to keep typography consistent across app.