Better Icon and Label Alignment(ishadeed.com) |
Better Icon and Label Alignment(ishadeed.com) |
[0] https://www.w3.org/TR/css-inline-3/#leading-trim
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
Or a negative text-indent, if you want arbitrary content rather than just a tick.
I think the lh unit is surely part of the puzzle, but something more is needed. It assumes that the ascent and descent are symmetrical, for one thing.
I think it would drive most of your fellow humans nuts. My hunch is that people read the bullets as sentence markers, not just a visual flourish.
Visual hierarchy is a thing and when you have 3 icons next to single lines, you by default expect the all to follow the same pattern, cratering the icon vertically next to multi line text breaks the established visual pattern.
Author even did some bad things such as expanding the circle radius way too outside the x-height so the emphasis lies strictly on the circle, when it should be on the line… but anyways.