This document aims to help Korean users learn Framer by addressing the challenges caused by a lack of Korean resources. It translates content from the official blog and adds practical information to assist users in their work. We hope it provides some help to Framer users.

What are Text Style Breakpoints?

To make a website viewable on various devices, text size and spacing must also be adjusted according to screen size. Framer offers a simple feature for this: Text Style Breakpoints.

How to Create Text Style Breakpoints

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

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

3. Click the Add Breakpoints button in the Breakpoints section at the bottom of the Edit Style modal

Three Default Breakpoints Provided

• Desktop (L) Min width: 1200

• Tablet (M) Min width: 810

• Mobile (S)

Attributes of Breakpoints

• Font Size (text size)

• Line Height (line spacing)

• Letter Spacing (character spacing)

• Paragraph Spacing (paragraph spacing)

Note: Since you can adjust properties for each breakpoint, you can set the H1 size 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. Setting breakpoints suitable for the screen size is crucial, as text readability often decreases or becomes too large, disrupting the layout.

Benefits of Setting Breakpoints

• Automatically adjusts text size to fit a responsive UI

• Consistently maintains designer's pre-planned styles

This article is adapted and translated from Framer's official document ‘Setting Text Styles breakpoints’.