diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index d5a2804a1c..9c58880f3c 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -75,11 +75,16 @@
     --base-font-size-px: 14px;
     --base-line-height-unitless: 1.214;
     --base-maximum-block-height-em: 1.425em;
-    --base-inline-block-vertical-alignment-em: 0;
+    --line-fitted-vertical-align-offset-em: 0;
     --markdown-interelement-space-px: 5px;
     --markdown-interelement-doubled-space-px: calc(
         var(--markdown-interelement-space-px) * 2
     );
+    /* Certain elements need to be fitted perfectly to
+       the line height; the length here can be used to set
+       precise heights, and in the case of square elements,
+       a matching precise width as well. */
+    --length-line-fitted-block: calc(var(--base-line-height-unitless) * 1em);
 
     /* Legacy values */
     --legacy-body-line-height-unitless: calc(20 / 14);
diff --git a/web/styles/rendered_markdown.css b/web/styles/rendered_markdown.css
index a8b8894dc2..66bd4bab25 100644
--- a/web/styles/rendered_markdown.css
+++ b/web/styles/rendered_markdown.css
@@ -138,16 +138,23 @@
 
     /* Emoji; sized to be easily understood while not overwhelming text. */
     .emoji {
-        height: calc(20em / 14);
-        width: calc(20em / 14);
-        /* "Eyeballed" styles to compensate for inline-block emoji
-          positioning in messages.
-          By coordinating the emoji height and width above with the
-          `line-height` on messages in the future, these properties
-          should no longer be necessary: */
-        position: relative;
-        margin-top: -7px;
-        top: 3px;
+        /* The box for emoji is kept below a certain maximum, regardless
+           of more open line-heights. This prevents emoji from sizing
+           excessively larger than the surrounding text's content area. */
+        height: calc(
+            min(
+                var(--base-maximum-block-height-em),
+                var(--length-line-fitted-block)
+            )
+        );
+        width: calc(
+            min(
+                var(--base-maximum-block-height-em),
+                var(--length-line-fitted-block)
+            )
+        );
+        /* We set the alignment programmatically, as an em value. */
+        vertical-align: var(--line-fitted-vertical-align-offset-em);
     }
 
     /* Mentions and alert words */