This document was created to help local Framer users who struggle with the lack of Korean resources by translating content from the official blog into Korean and adding practical information. We hope it provides some assistance to Framer users.

Framer has launched a new feature called "Fit Text" which allows you to create dynamically sized headings to fit any container. This feature supports multiple lines, inline styles, and minimum/maximum widths while maintaining high performance.

Challenge: Lack of Native CSS Solutions

Initially, we explored existing libraries, but they all shared a common issue: text size had to be measured before rendering on the screen. However, since Framer sites are statically built, they must display correctly in all browsers even before JavaScript executes. Thus, this method was not viable.

Next, we tried the CSS property font-size: 100vw. While this works well when text fills the entire screen, it becomes complex when trying to fit text within a specific box (container). It requires calculating the size of all parent elements and dividing by %, creating a complicated formula with calc(). Although theoretically possible, it was impractical within component-level code since the size of parent elements cannot be known.

Solution: SVG + viewBox + foreignObject

The next approach was to leverage SVG's viewBox and foreignObject. Rendering text as a foreignObject inside an SVG allows for scaling effects without affecting accessibility or SEO.

However, there is one condition: the exact bounding box of the text must be calculated and reflected in the viewBox, and synchronized whenever the text changes. Otherwise, the text might get cut off or misaligned, making this approach unrealistic for general users' sites.

Automation: Framer's Approach

Framer addressed this by automating the process. By setting text in “Fit” mode, Framer measures the text size with the current font size, derives the bounding box, and generates an appropriate SVG and viewBox.

When users edit text, Framer recalculates and updates the viewBox, providing a seamless editing experience in pixel units during editing, and automatically resizing based on the viewBox post-editing. This process occurs smoothly without affecting canvas performance.

Result: Seamless Resizing

By the time a site is deployed, the viewBox calculations are complete, ensuring the text is displayed at the correct size even before JavaScript loads, allowing for a smooth resizing experience without flickering or adjustment issues.

Future Challenges: Container Queries

Framer plans to adopt container queries once browsers provide sufficient support. Instead of relying on viewport units, regular units like cqw and utilizing container-based queries ensure natural functionality at the component level without complicated CSS calc() operations.

Fit Text exemplifies how Framer automates a complex feature, allowing users to focus on website creation. We look forward to seeing creative outcomes with this feature.

This article is an adapted translation from Framer's official blog, ‘Advanced responsive typography: technical implementation of Fit Text’.