‘Should line-height be defined in pixels or percentages within a design system?’

When determining how to specify line-height in a design system, choosing between pixels and percentages (or unitless values) is critical for maintaining consistency, scalability, and accessibility across different applications and devices.

Using pixels for line-height provides precise control over the vertical spacing between lines. This absolute measurement ensures consistent appearance across various browsers, but it may not adapt well to different user settings like zoom levels or font size adjustments. This rigidity can lead to less responsive designs, particularly on varied device sizes or screen resolutions.

On the other hand, specifying line-height in percentages (or using a unitless value relative to the font size, commonly the preferred method) offers enhanced flexibility and scalability. This approach automatically adjusts the line spacing relative to the size of the font, ensuring that text remains legible and properly spaced regardless of font size or user zoom settings. This adaptability makes your design system more responsive and accessible, enhancing user experience across diverse devices and viewports.

Ultimately, the choice between pixels and percentages for line-height in a design system hinges on the priorities of the project. For a more adaptable and user-friendly design, percentages or unitless values are generally preferred. They allow for greater flexibility in layout adjustments without sacrificing readability and ensure that your design remains robust across many different contexts.


Leave a Reply

Your email address will not be published. Required fields are marked *