Known issue — design-dev handoff

Layout measured using the baseline grid approach would have seemingly random spacing numbers when developers use redlining tools (InVision/Zeplin/Figma) to inspect the design. The design below was created using the baseline grid. The numbers show what you would get from a redlining tool:

I briefly mentioned the Space in Design Systems article above. It talks about how spacing values could be represented using CSS classes, which helps enforce consistency for both designers and developers. Unfortunately, by using the baseline grid approach, it is nearly impossible to represent the spacing numbers as a set of CSS classes because of the randomness that comes with the different combinations of types.

We also looked at a popular technique many people proposed to mitigate the randomness issue, which is to use ::before and ::after CSS pseudo-elements to “crop” the bounding box (which is essentially applying a correctional spacing to the line box). However, my code ninja boyfriend Chris Caruso told me:

Using ::before and ::after CSS pseudo-elements is not ideal because it is not consistent across different fonts, browsers, operating systems, and even screen resolutions. Targeting a single combination may lead to spacing issues in others. From the developer’s perspective, the technique does not follow good coding practices because it uses negative margins and applies extraneous elements to the DOM — both of which can lead to unintended side effects. Therefore, in production applications this technique is not worth the risk. 😑

What about localization?

I once did a localization study and looked at 8 writing scripts (Latin, Chinese, Cyrillic, Devanagari, Greek, Hangul, Kana and Thai) that our product supports. Then I realized that no matter which measuring approach you use, at the end of the day, it’s the bounding box spacing that the developer takes from the redlining tool and puts into CSS. Depending on the font you use for other non-English languages, even if the line height is the same, the visual height of the type can be taller or smaller than the latin letters. Their baselines can also shift. Therefore, no matter what measurement approach you use, localization will always change the spacing a little. However as shown in the example below, all languages’ text stayed relatively centered in the white space despite those minor changes.

(I still don’t know a lot about non-latin writing scripts, but want to learn more. Please let me know if any of the observations made above are not correct or can be improved. I only know English and Chinese. Shout out to my friends at work who helped me translate this line to the other languages!)