--- a/devtools/client/inspector/fonts/components/FontEditor.js
+++ b/devtools/client/inspector/fonts/components/FontEditor.js
@@ -53,40 +53,54 @@ class FontEditor extends PureComponent {
     } else if (delta <= 100) {
       step = 0.1;
     }
 
     return step.toString();
   }
 
   /**
-   * Get an array of FontPropertyValue components for of the given variable font axes.
-   * If an axis is defined in the fontEditor store, use its value, else use the default.
+   * Get a container with the rendered FontPropertyValue components with editing controls
+   * for of the given variable font axes. If no axes were given, return null.
+   * If an axis has a value in the fontEditor store (i.e.: it was declared in CSS or
+   * it was changed using the font editor), use its value, otherwise use the font axis
+   * default.
    *
    * @param  {Array} fontAxes
    *         Array of font axis instances
    * @param  {Object} editedAxes
    *         Object with axes and values edited by the user or predefined in the CSS
    *         declaration for font-variation-settings.
-   * @return {Array}
-  *          Array of FontPropertyValue components
+   * @return {DOMNode|null}
    */
   renderAxes(fontAxes = [], editedAxes) {
-    return fontAxes.map(axis => {
+    if (!fontAxes.length) {
+      return null;
+    }
+
+    const controls = fontAxes.map(axis => {
       return FontPropertyValue({
+        key: axis.tag,
         min: axis.minValue,
         max: axis.maxValue,
         value: editedAxes[axis.tag] || axis.defaultValue,
         step: this.getAxisStep(axis.minValue, axis.maxValue),
         label: axis.name,
         name: axis.tag,
         onChange: this.props.onPropertyChange,
         unit: null
       });
     });
+
+    return dom.div(
+      {
+        className: "font-axes-controls"
+      },
+      controls
+    );
   }
 
   renderFamilesNotUsed(familiesNotUsed = []) {
     if (!familiesNotUsed.length) {
       return null;
     }
 
     const familiesList = familiesNotUsed.map(family => {

--- a/devtools/client/themes/fonts.css
+++ b/devtools/client/themes/fonts.css
@@ -10,21 +10,24 @@
   height: 100%;
   overflow: auto;
 }
 
 #font-container {
   flex: auto;
 }
 
+#font-editor {
+  padding-bottom: .8em;
+}
+
 #font-editor summary {
   -moz-user-select: none;
   cursor: pointer;
   margin-bottom: .7em;
-  width: fit-content;
   width: -moz-fit-content;
 }
 
 #font-editor details .label-open,
 #font-editor details .label-close {
   display: none;
 }
 
@@ -136,29 +139,37 @@
   color: var(--theme-body-color-inactive);
   border-radius: 3px;
   border-style: solid;
   border-width: 1px;
   text-align: center;
   vertical-align: middle;
 }
 
+.font-axes-controls {
+  border-top: 1px solid var(--theme-splitter-color);
+  margin-top: .8em;
+  padding-top: .8em;
+}
+
 .font-control {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
-  padding: 5px 20px;
+  padding: 4px 18px;
 }
 
 .font-control-family {
   align-items: flex-start;
-  padding-top: 10px;
-  padding-bottom: 10px;
+  border-bottom: 1px solid var(--theme-splitter-color);
+  margin-bottom: .8em;
+  padding-top: .6em;
+  padding-bottom: .4em;
 }
 
 .font-control-box,
 .font-control-input {
   flex: 4;
   min-width: 100px;
 }
 
@@ -167,17 +178,17 @@
   flex-wrap: nowrap;
   align-items: center;
 }
 
 .font-control-label {
   display: inline-block;
   flex: 1;
   font-size: 12px;
-  min-width: 80px;
+  max-width: 70px;
   margin-right: 10px;
   -moz-user-select: none;
 }
 
 .font-family-unused {
   margin-bottom: .3em;
   color: var(--grey-50);
 }
@@ -188,16 +199,17 @@
 
 .font-value-input {
   margin-left: 10px;
   text-align: right;
   width: 60px;
 }
 
 /* Do not use browser "invalid" state */
+.font-value-slider:-moz-ui-invalid,
 .font-value-input:-moz-ui-invalid {
   box-shadow: none;
 }
 
 /* Do not show dotted line focus outline */
 .font-value-input:-moz-focusring {
   outline: none;
 }
@@ -295,17 +307,17 @@
     left center,  /* left circle */
     0.5em center, /* middle bar */
     right center; /* right circle */
 
   /* Animate the thumb position between states of the checkbox. */
   transition: background-position .1s ease-out;
 }
 
-.font-value-toggle:checked{
+.font-value-toggle:checked {
   --bg: var(--blue-55);
   --thumb-color: white;
   --thumb-position: 100% 50%;
 }
 
 .font-origin {
   margin-top: .2em;
   color: var(--grey-50);