duel-of-doves-leading-trim

leading-trim: the future of digital typesetting

by Luke Farrugia • 20 August 2020

Digital typesetting has always had its problems when thinking about how we space typography in CSS and design tools. In a standard text box, there’s almost always extra space above and below the actual text. Because of this, when you use a text box to measure and implement spacing, it ends up larger than you intended. When reading through the details of leading-trim, an emerging CSS solution to type spacing problems, I feel a sense of excitement and relief as we can start to see this long-standing issue being put to bed.

For a designer, laying type can be a pleasure, a visual and technical puzzle to solve. Taking into account, readability, scalability and hierarchy to ensure the message is being communicated in the best way possible. But when working in the digital space with design tools such as Figma and Sketch, the spacing of type has always been a battle, forcing us to resort to manual workarounds to account for and solve inbuilt text box padding. The transition from working in a design tool, with manual overrides in place, to collaborating with a developer in the CSS is where the real tension begins. The CSS text box spacing does not automatically adhere to the manually applied type styles without designer intervention. Causing spacing tweaks and updates to go back and forth from designer to developer until the type is spaced correctly, which can cause inconsistencies and break the space rules set by the design system.

This article, by Ethan Wang, digs in and details of the type spacing problem, touches on some typesetting history and outlines this emerging leading-trim solution. That aims to solve this type spacing problem once and for all—empowering both designers and developers to space digital typography consistently.

Catch up on leading-trim below (image source): 
https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202

duel-of-doves-leading-trim3

In the example above we can see how leading was split in half and put above and below each line since CSS1. 

join us

duel of doves is a curated community, created to encourage thought-provoking discussions through connecting and collaborating with like-minded people. A professional online home away from home, sans the office politics, where we can be ourselves and get sh*t done.

subscribe

Get the duel of dove’s wrap-up sent directly to your inbox.

Follow us on instagram