We were recently doing an accessibility course at Block, and one of the sections covered how vision-impaired users navigate their devices using screen magnification and increased font sizes. We learned that one of their biggest challenges revolves around dealing with whitespace. Ironically, the same whitespace designers introduce to improve readability and visual hierarchy can become problematic for screen magnification users if they’re forced to frequently scroll and pan due to excessive spacing.

This prompted me to rethink how I use padding in my layouts. For components containing text, I’ve started using min-height and min-width constraints instead of paddings. Why? Because using minimum size constraints allows text to reclaim some space that padding would otherwise reserve at larger text sizes.

Here’s a common example you’ll likely encounter in apps: a search bar. Notice how it grows vertically in size when the device font size is increased:

SearchBar(
  Modifier
    .padding(horizontal = 16.dp, vertical = 0.dp)
)

What happens if we switching from vertical padding to a minimum height? It results in a slightly more compact component without sacrificing legibility:

  SearchBar(
    Modifier
+     .heightIn(min = 56.dp)
-     .padding(horizontal = 16.dp, vertical = 16.dp)
+     .padding(horizontal = 16.dp, vertical = 0.dp)
  )

While the difference may seem minimal for single-line text, it becomes a lot more noticeable with multi-line content:

  MovieDetails(
    Modifier
+     .heightIn(min = 200.dp)
-     .padding(horizontal = 24.dp, vertical = 36.dp)
+     .padding(horizontal = 24.dp, vertical = 12.dp)
)

These savings aren’t huge, but they’re incremental and can add up across an entire screen.