Text Sizes in Framer

Text sizes control how big or small the text appears in your design. In Framer, there are different ways to set the size: fixed, relative, fit, and fill.

1. Fixed Size

Fixed size is like choosing a specific shoe size.

• Imagine: You pick a shoe size, like size 8. No matter where you wear them, they stay the same size.

• In Framer: When you set a text size to fixed, you choose an exact size for the text, like 16 pixels. The text will always be 16 pixels, no matter what.

2. Relative Size

Relative size is like saying you want your shoes to be a certain percentage of your height.

• Imagine: You decide your shoes should be one-tenth of your height. If you grow taller, your shoes get bigger too.

• In Framer: When you set a text size to relative, you’re making the size flexible. For example, you might set the text to be 10% of the width of its container. If the container changes size, the text size changes too.

3. Fit Size

Fit size is like wearing stretchy shoes that adjust to fit your feet perfectly.

• Imagine: Your shoes stretch or shrink to fit your feet exactly, no matter how big or small they are.

• In Framer: When you use fit size for text, the text adjusts its size to fit perfectly within its container. If the container is small, the text shrinks. If the container is big, the text grows.

4. Fill Size

Fill size is like inflating a balloon to fill the available space.

• Imagine: You blow up a balloon until it fills the room you’re in.

• In Framer: When you set text size to fill, the text expands or contracts to fill the entire space of its container. It ensures the text takes up all the available room without overflowing.

Why Use Different Text Sizes?

Using different text sizes helps your design look good and be functional on different devices and screen sizes.

• Fixed Size: Great for when you want your text to stay the same size everywhere, like a logo.

• Relative Size: Useful when you want text to scale with its container, making it flexible for different screen sizes.

• Fit Size: Perfect for making sure text fits neatly within a specific area, like buttons or small labels.

• Fill Size: Ideal for when you want text to occupy all the space available, like a big heading.

By understanding and using these different text sizing methods, you can create designs that look great and work well on any device, ensuring your text is always readable and appropriately sized.