Scale text label by screen size

Question

Is there a way to scale text so that it takes up close to the same screen real estate no matter what the device size is? I've found that the text on an iPad sized device is too small in relation to the screen size when compared to the iPhone. Below is an example of what I'm looking for. Notice the text percentage size is similar in relation to the device screen size.

Example

enter image description here

Are you sure that's not just an image over Thom's face that is set to take up half the screen width? Modifying font size to take up half the screen width would require a lot more code than it's worth, probably. — Ian MacDonald, Mar 27 '15 at 19:55

score 31 · Answer 1 · edited May 23 '17 at 12:02

31

To set constraints on the label that you have, see this link: How do you make a background image scale to screen size in swift? . I know that you might not be using Swift (I'm using Objective-C), but the first answer shows how to do it in the storyboard. Do the same thing it says, but for the label. Then, see the image below to change the auto shrink options for the label from "Fixed Font Size" to "Minimum Font Scale" (see image below). Hope this helps!

Changing Font Size

edited May 23 '17 at 12:02

Community

1
1

answered Apr 02 '15 at 04:35

William Dayanayev

355
3
10

1

0.5 depends from what? – user25 Feb 26 '18 at 12:23
it doesn't do anything – user25 Feb 26 '18 at 12:37
This worked for me, but my label needed to have a fixed width for this to work. – WBuck Mar 13 '18 at 23:55

score 15 · Answer 2 · answered Feb 06 '18 at 15:47

1. Select your label and open attribute inspector for it

2. Click on + sign by Font, select width and height as "Regular", click Add Variation

3. Another Font field will appear, this will represent font for ipad/big screen/ illusion of big screen (scroll view)

4. Select your desired font for ipad

score 14 · Answer 3 · edited Jun 20 '20 at 09:12

I had my own fix and it's not one click, but I found it well worth it.

Step 1:

Test some font sizes for different screen sizes, recording the font size and the most relevant other dimension.

Here's what I mean...

I'd start with a normal iPad Screen and select a font size that worked.

Since I knew the entire height of the screen would determine what makes a font size comfortable or not, I'd record the font size along with the entire screen height.

So the font size was 50 with a height of 1024.

Then, I switched to the iPhone SE

This was pretty atrocious, so I fixed the font size:

After recording that the font size worked at 25 with a height of 568.

Step 2:

Bust out the calculator app and find a constant that relates the font sizes to the heights (in my case), giving or taking a bit.

Here's what I mean:

I knew 50 works with 1024 and that 25 works with 568.

Dividing 50/1024 gives you .048828125.

Multiplying that by 568 equals 27.734375, which would be a little fat of a font size for the SE.

Repeating that process but using the SE's values to do the division produced .0440140845, and checking that with the iPad's height produces a font size of 45, just a bit small for the mighty iPad screen.

So I split the quotients down the middle, resulting in a number around 0.46.

Step 3:

Connect the labels and change their font sizes programmatically using this number.

First, drag the labels into an outlet collection. I named my connection 'headerLabels' since they're all at the top of the screen.

Then, you can kinda steal my code, but just don't make too much money with it ;)

// Outlet collection of labels
@IBOutlet var headerLabels: [UILabel]!

// Who needs a short variable name when we can have a 
// painfully lengthy one to describe the number we calculated?
let relativeFontConstant:CGFloat = 0.046

override func viewDidLoad() {
    super.viewDidLoad()
    
    // Should be in the viewDidLoad so it can load the same time as
    // the view does.
    
    // apply a font size to all the labels.
    for label in headerLabels {
        // multiply the height we based it on of the entire view 
        // to the number we calculated
        label.font = label.font.withSize(self.view.frame.height * relativeFontConstant)
    }
}

If you've got any questions, comments, compliments, or insults let me know :)

I also do it programmatically, but it's not interesting, I mean we can do all autolayout properties for view's width/height just in storyboard but not for font size — user25, Feb 26 '18 at 12:21

score 6 · Answer 4 · answered Apr 01 '17 at 00:41

I was having the same issue where I needed the text to be scaled proportionally along with the screen size increase.

Adaptive sizing is quite limited as you can only set the font sizing for size classes. Having the font sizes for two width options, compact and regular was not a solution for me.

I have written a small lib which handles automatic font scaling for UILabel and UITextView for different screen sizes.

You can set the scaling globally or for a specific instance of UILabel and UITextView.

Find it here: AMXFontAutoScale

This repository is not updated from last 3 years.. Any other soluton? — Sourabh Sharma, Jun 26 '20 at 10:35

score 4 · Answer 5 · answered Dec 27 '18 at 15:26

I had decent behavior with the following code in my viewDidLoad function:

(Note that the screen bounds are in 'points' not 'pixels')

    // Set the clock font size according to the height.
    //  Design was done on iPhone XR with height of 896 points and font size of 98.
    if (UIScreen.main.bounds.height != 896). // Only need code if not on original design size.
    {
        let scaleFactor: Float = Float(UIScreen.main.bounds.height) / 896.0
        let fontSize = CGFloat(98.0 * scaleFactor)
        self.clock.font = self.clock.font.withSize(fontSize)
    }

This was using the "Helvetica Neue" font which is a fixed width font. It wasn't completely scaled up completely for some reason on larger devices, so still a bit smaller than the target on iPads, but close enough.

This solution massively helped – user578386 Jul 01 '19 at 13:03 — user578386, Jul 01 '19 at 13:03

score 4 · Answer 6 · answered Feb 19 '19 at 08:00

4

different screen sizes acoording to

// iphone 5s,SE screen width 320
// iphone 6,6s,7,etc width 375
// iphone 7 plus, 8 plus, xs max,etc width 414
if (self.view.frame.width == 320) {

    label.font = UIFont(name: label.font.fontName, size: 16)

} else if (self.view.frame.width == 375) {

    label.font = UIFont(name: label.font.fontName, size: 21)

} else if (self.view.frame.width == 414) {

    label.font = UIFont(name: label.font.fontName, size: 24)

}

answered Feb 19 '19 at 08:00

M Naveed Ashfaq

49
1
2

5

Bad approach, the right way is doing Autolayout constraints. – Luis Pena Feb 26 '20 at 00:19
2

@LuisPena interested in knowing how you can do this using AutoLayout approach, those three upvotes don't know this either I m sure. – vishal dharankar May 20 '20 at 18:51
@LuisPena what to hear from you how can we achieve this using auto layout – Ahmed Sahib Aug 12 '21 at 18:20

score 1 · Answer 7 · edited Dec 27 '18 at 15:27

1

There is an aspect ratio constraint available. Add this to your label. Constraints to left and top margins for anchoring the label in place should silence the compiler warnings.

As @VatsalManot mentioned, learn adaptive sizing for starters. Here's a good link:

http://www.raywenderlich.com/83276/beginning-adaptive-layout-tutorial

Hope this helps! :)

edited Dec 27 '18 at 15:27

shim

9,289
12
69
108

answered Mar 27 '15 at 20:20

GoGreen

2,251
1
17
29

score 1 · Answer 8 · answered Jul 22 '22 at 05:57

for those who want more than xCode editor has to offer this is my hack and its not future proof,

based on this post we can scale font programmatically

Warning!! SCALE FACTOR is not refined yet. you will need to work on it.

usage:

titleView.font = UIFont.appFont(ofSize: 24, weight: .bold)
contentView.font = UIFont.appFont(ofSize: 16)

code:

extension UIFont {
    class func appFont(
        ofSize size : CGFloat = UIFont.systemFontSize,
        weight : Weight = .regular,
        autoScale : Bool = true
    ) -> UIFont {
        return UIFont.systemFont(ofSize: autoScale ? size.dp : size, weight: weight)
    }
}

extension CGFloat {
    var dp: CGFloat {
        
        let width = UIScreen.main.bounds.width
        let device = UIScreen.main.traitCollection.userInterfaceIdiom
        
        if (device == .phone) {
            if (width <= 320) {
                // iPod(Gen7)
                // iPhone(5s, SEGen1)
                return self * 0.75
            } else if (width <= 375) {
                // iPhone(SEGen2 6, 6s, 7, 8, X, Xs, 11pro, 12mini, 13mini)
                return self * 0.95
            } else if (width <= 414) {
                // iPhone(6+, 6s+, 7+, 8+, XsMax, XR, 11, 11proMax, 12, 12pro, 13, 13pro)
                return self
            } else if (width <= 744) {
                // iPhone(12proMax, 13proMax)
                return self * 1.2
            }
        } else if (device == .pad) {
            if (width <= 744) {
                // ipad(miniGen6, )
                return self * 1.4
            } else if (width <= 768) {
                // ipad(Gen5, Gen6, Air, Air2, Pro9.7)
                return self * 1.45
            } else if (width <= 810) {
                // ipad(Gen9)
                return self * 1.5
            } else if (width <= 834) {
                // ipad(AirGen3, AirGen5, Pro10.5, Pro11Gen1, Pro11Gen3)
                return self * 1.55
            } else if (width <= 1024) {
                // ipad(Pro12.9Gen1, Pro12.9Gen2, Pro12.9Gen3, Pro12.9Gen5)
                return self * 1.85
            }
        }
        
        return self
    }
}

Scale text label by screen size

Example

8 Answers8

Step 1:

Step 2:

Step 3:

Linked