This document aims to assist domestic users learning Framer who face difficulties due to the lack of Korean materials by translating the content of the official blog into Korean and adding practical information. We hope it will be of some help to those using Framer.

What are Text Style Breakpoints?

To ensure a website looks good on various devices, the font size and spacing should adjust according to screen size. Framer offers a very simple way to set this up: Text Style Breakpoints.

How to Create Text Style Breakpoints

1. Open the Assets tab on the left and navigate to the Styles section

2. Select the desired text style (e.g., H1, Body M, etc.)

3. Click the Add Breakpoints button under the Edit Style modal in the Breakpoints section

Three Breakpoints Provided by Default

• Desktop (L) Min width: 1200

• Tablet (M) Min width: 810

• Mobile (S)

Attributes of Breakpoints

• Font Size

• Line Height

• Letter Spacing

• Paragraph Spacing

Note: You can adjust attributes for each breakpoint, allowing you to set the size of H1 to 56px on desktop, and reduce it to 32px on mobile.

Why Is This Feature Important?

Text is one of the most frequently used elements in design. Since text can lose readability or become too large, causing layout issues depending on screen size, it's crucial to set appropriate breakpoints for screen sizes.

Advantages of Setting Breakpoints

• Automatically adjust font size to match responsive UI

• Maintain consistent style as pre-designed by the designer

This article is an adapted translation of the Framer official documentation ‘Setting Text Styles breakpoints’.