---
title: "Animating font size in UILabels"
source: "/writing/animating-font-size-in-uilabels/"
---

Article

# Animating font size in UILabels

Sean Berry

August 21, 2017

I've noticed a loading screen design pattern where a placeholder gets swept up to the title position.

Sonos loading screen

Let's say you want to do that with a UILabel. We access a label's font size through its font, but Apple hasn't made the label.font [implicitly animatable](https://developer.apple.com/library/content/documentation/General/Conceptual/Devpedia-CocoaApp/Animation.html) so we can't simply go like this:

// This does nothing
UIView.animate(withDuration: 1.0) {
    let smallerFont = label.font.withSize(10)
    label.font = smallerFont
}

However, we can enlarge it by hitting the transform:

UIView.animate(withDuration: 1.0) {
    label.transform = CGAffineTransform(scaleX: 2.0, y: 2.0)
}

Pixellated result

Yikes. That looks pixellated when blown up because the small font rendering doesn't contain enough detailed information to look good at a higher resolution.

A better strategy:

-   Create the larger sized label first.
-   Scale it down to mimic the smaller label.
-   Animate it back to its normal scale.

var bounds = label.bounds
label.font = label.font.withSize(100)
bounds.size = label.intrinsicContentSize
label.bounds = boundslet scaleX = label.frame.size.width / bounds.size.width
let scaleY = label.frame.size.height / bounds.size.height
label.transform = CGAffineTransform(scaleX: scaleX, y: scaleY)UIView.animate(withDuration: 1.0) {
    self.label.transform = .identity
}

Enlarge an existing 'bigger' font

This way we get the benefit of a more detailed render.

We'll use a different strategy to shrink it:

-   Scale down the transform of the larger label.
-   Swap in the smaller font at the end.

let labelCopy = label.copyLabel()
labelCopy.font = label.font.withSize(20)var bounds = labelCopy.bounds
bounds.size = labelCopy.intrinsicContentSizelet scaleX = bounds.size.width / label.frame.size.width
let scaleY = bounds.size.height / label.frame.size.heightUIView.animate(withDuration: 1.0, animations: {
    self.label.transform = CGAffineTransform(scaleX: scaleX, y: scaleY)
}, completion: { done in
    self.label.font = labelCopy.font
    self.label.transform = .identity
    self.label.bounds = bounds
})

Shrinking and swapping

Not bad... but see the slight jitter at the end?

That happens because a scaled down label at the larger size doesn't look exactly the same as the smaller label. Pretty close, but not pixel perfect.

Some fonts change [all sorts of properties](http://www.brightlemon.com/blogs/typography-01-font-basics-what-are-x-height-leading-kerning-tracking-ascender-and-descender) at different sizes to make them more readable. The character spacing might be different. The way the glyphs are drawn might be different. The font creator will do whatever it takes to help their readers.

Now, this isn't that big of a deal. You could use the above animation and call it a day.

If you want extra credit though, throw in a cross-fade between the two labels. To see the code for this check out my GitHub project: [https://github.com/regularberry/AnimatedFontSize](https://github.com/regularberry/AnimatedFontSize)

Cross fading UIFont animation

_Sean works as an iOS developer at_ [_Livefront_](http://www.livefront.com) _and has animated many fonts in his_ [_algebra app_](http://www.regularberry.com) _._

-   Sean Berry

    Software Engineer

    Sean Berry

### Tags

[Digital Engineering](/insights/all/?topic=digital-engineering) [Mobile Apps](/insights/all/?topic=mobile-apps)

### Share

-   Copied

## View these next.

[See all](/insights/all/?type=writing)

-   [

    Article

    How To Sabotage Your Project Using Inconsistency

    Collin Flynn

    ](/writing/how-to-sabotage-your-project-using-inconsistency/)
-   [

    Article

    Unit Testing race conditions by creating chaos (Swift)

    Sean Berry

    ](/writing/unit-testing-race-conditions-by-creating-chaos-swift/)
-   [

    Article

    UIApplicationDelegate call sequence reference

    Sean Berry

    ](/writing/uiapplicationdelegate-call-sequence-reference/)