Eli Schiff

Sketch Baselines Recommendation

  • Save

In @Sketch, the default behavior when holding the "option" button gives you the distance between two bounding boxes. (This is potentially useful for CSS, but not for doing anything with regard to baselines.) If one holds "option" + "ctrl" then the behavior is to give the distance between the baseline of the upper layer and the cap-height of the lower.

Base to cap-height necessarily outputs useless decimal values. On the other hand, baseline to baseline gives meaningful integer values.

A year ago I suggested to the Sketch team that baseline to baseline measurements be used. Here's how that could look.

On the bottom you can see the rendering overlays are much more simplified. They show only the relevant bounding box for text, and in particular, show the boxes for both the selected and highlighted elements, unlike before when only the selected had an overlay.

keyboard shortcuts: L or F like