---
title: "Line Balance — Free Framer component · Best of Framer"
description: "Free Framer component · by KHZ ART · Text. Line Balance fixes all of that in one component."
canonical: "https://framer.elliotli.dev/component/line-balance"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Line Balance

# Line Balance

Balanced line breaks, no widows

[View on Framer](https://framer.com/marketplace/components/line-balance/?via=elliot-li)

![Line Balance preview image 1](https://framer.elliotli.dev/og/component/line-balance/0537de1c8a6145c6/1600x1200.jpg)

## Summary

Line Balance fixes all of that in one component.

## Description

A headline is the first thing people read and the first thing that breaks. The browser drops the last word onto its own line, leaves one line long and the next one short, and in Japanese it starts a line with 、 or ）.

Line Balance fixes all of that in one component. Type your text, pick a tag, and the line breaks are handled.

No Widow: the last two words are joined so a single word never falls alone. Measured over 90 headlines in Chromium: 24.4% had a widow, 1.1% after.

Balanced measure: text-wrap balance evens out the line lengths. Standard deviation of line width fell from 109px to 25px in the same test - the words are untouched, only the folding changes.

Kinsoku: closing brackets, punctuation, small kana and long vowel marks never start a line; opening brackets never end one; ... and -- are never split. CSS line-break alone still lets these through.

Auto Phrase folds Japanese at phrase boundaries where the browser supports it. Plus hanging punctuation, a measure limit in ch, and h1/h2/h3/p.

Zero dependencies, nothing loaded from outside your site, no animation - the canvas and the static export show exactly what the page shows.

Built by KHZ ART, a Tokyo studio that sets type on the web.

## Rank history [How rankings work →](/terms#rankings)

-   All · #5853

## Details

- **Author**: KHZ ART
- **Published**: 2026-09-09
- **Updated**: 2026-10-23
- **Added**: 2026-09-09
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing