Getting to the bottom of line height in Figma | Figma Blog (opens in new tab)
Figma explains why it is changing text layout so that extra line height is distributed above and below letters and measured more modernly. The decision grew out of a historical review of typography, from metal type to digital fonts, where old physical constraints and platform inconsistencies shaped today’s behavior. The update is optional, and existing files remain unchanged unless users choose to update them. ## Figma’s New Approach - Figma will distribute extra line height above and below text rather than handling it through older conventions. - Line height will be measured in a more modern way. - The change is optional: - Existing files will not change automatically. - Users can update older text at their own pace. - Figma developed the approach through research and testing because its users employ text in many different contexts. ## The Early Centuries of Typesetting - Metal type separated typography into two roles: - Type designers created letterforms. - Typesetters arranged physical blocks into readable pages. - Font size referred to the height of the metal block, not necessarily the visible letters. - Two fonts with the same nominal size could have different letter heights and baseline positions. - Typesetters could place lines directly together, a practice called setting type solid. - To improve readability, they inserted thin strips of lead between lines. - This spacing was called “leading,” pronounced “ledding.” - For example, 16-point type with 4 points of leading produced a 20-point line height. - Choosing the right amount of leading depended on the font, font size, and line length. - The physical system imposed constraints: - Leading could be added but not removed. - Fonts generally arrived as fixed, unchangeable blocks. - Baselines and internal font proportions varied between typefaces. ## Digital Typography Introduces New Problems - Computers replaced physical type blocks with collections of numerical data stored in font files. - Fonts had to support different platforms and formats, including Windows, Macintosh, and OS/2. - Rendering differences, bugs, and platform-specific behavior made typography less consistent. - Digital typography also created new freedoms: - Text could extend beyond traditional font boxes. - Elements could overlap. - Typesetters could add, reduce, or completely remove leading. - Unlike metal type, digital fonts could define arbitrary default line heights, often making them taller than the nominal font size for improved readability. Figma’s changes attempt to preserve useful typographic principles while adapting them to the flexibility—and historical complications—of digital text layout.