Review our usage of rem-based line-height values
The vast majority of line-height
SCSS mixins we have in typography.scss are unit-based, expressed in rem
s.
There could be a possibility that using unitless line-height
s, 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 samefont-size
, and replace withline-height: 1
- add a best practice regarding this in the Contributor's Guide
- replace all mixins from our codebase that are using
rem
orpx
basedline-height
s with unitless ones
Reference
http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/