GitLab Next

The vast majority of line-height SCSS mixins we have in typography.scss are unit-based, expressed in rems.

There could be a possibility that using unitless line-heights, as in line-height: 1 could prove more future-proof and less error-prone.

Quick intro to unitless line-height: Unitless line-height values are evaluated by multiplying the computed font-size with the value of line-height, so a font-size: 16px coupled with a line-height: 1.5 will mean a computed line-height of 24px.

The advantage of using unitless: when one needs to apply gl-font-base to an element and wants the line-height to be exactly the size of the font-size, one would only have to apply a gl-line-height-1 instead of looking up what the exact size is that of gl-font-base (16px) and then applying gl-line-height-normal.

Slack thread that generated the issue: https://gitlab.slack.com/archives/C0GQHHPGW/p1611059139075600

MR that generated the dilemma of why we don't have a gl-line-height-1 mixin: !1940 (comment 485749620)

Possible gotchas

• Check for expected emoji rendering on different OSs (Linux, Windows, MacOS)

Possible follow-ups

• add some unitless gl-line-height-* mixins -- possible, common values: 1, 1.1, 1.2, 1.5, 2
• find places where line-height is coupled with the same font-size, and replace with line-height: 1
• add a best practice regarding this in the Contributor's Guide
• replace all mixins from our codebase that are using rem or px based line-heights with unitless ones

Reference

http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/