how to make the label proportional to the screen size?

Question

I am a beginner, I am trying to do an autolayout. I am trying to make the label 'HRIS' and 'Please login to continue' to be proportional to the screensize (its superview), I can do it for the login button and the image leaf as the picture above, we can see that the login button and leaf image are proportional.

for the image leaf, I do equal width with 0,1 multiplier to the superview, and then I also add 'aspect ratio' to make it proportional.

but when I apply the same way to the label, it doesn't work, as we can see the label size still the same for iphone 4s and iphone 8, maybe it is because the instrinsict content size (the font size itself) that makes it like that. I tried to apply this way, but it seems the size is still the same

I want to make it little bit smaller for iphone 4s, I also can't modify using size classes since it is in the same class

so what I have to do to make label proportional to the superview (screen size / background) ?

Answer 1

You can do it by setting both proportional width of the label and allow it to scale down the point size.

Set the label width to proportional width like this. It is just a regular same width constraint that you edit.

Then allow your label to scale down the point size like this. This is a property of your label.

Answer 2

Set different font size using variations...

Answer 3

Simply set up a constraint for your label 's width to be equal the view 's width with your desired multiplier. In my example I used a multiplier of 0.5 :