--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -10,29 +10,33 @@ const { AutoRefreshHighlighter } = requi
 const {
   CanvasFrameAnonymousContentHelper,
   createNode,
   createSVGNode,
   moveInfobar,
 } = require("./utils/markup");
 const {
   getCurrentZoom,
+  getDisplayPixelRatio,
   setIgnoreLayoutChanges,
   getWindowDimensions,
   getMaxSurfaceSize,
 } = require("devtools/shared/layout/utils");
 const { stringifyGridFragments } = require("devtools/server/actors/utils/css-grid-utils");
 
 const CSS_GRID_ENABLED_PREF = "layout.css.grid.enabled";
 
 const DEFAULT_GRID_COLOR = "#4B0082";
 
 const COLUMNS = "cols";
 const ROWS = "rows";
 
+const GRID_FONT_SIZE = 10;
+const GRID_FONT_FAMILY = "sans-serif";
+
 const GRID_LINES_PROPERTIES = {
   "edge": {
     lineDash: [0, 0],
     alpha: 1,
   },
   "explicit": {
     lineDash: [5, 3],
     alpha: 0.75,
@@ -874,29 +878,31 @@ CssGridHighlighter.prototype = extend(Au
    *         The line position along the x-axis for a column grid line and
    *         y-axis for a row grid line.
    * @param  {Number} startPos
    *         The start position of the cross side of the grid line.
    * @param  {String} dimensionType
    *         The grid dimension type which is either the constant COLUMNS or ROWS.
    */
   renderGridLineNumber(lineNumber, linePos, startPos, dimensionType) {
-    let ratio = this.win.devicePixelRatio;
+    let devicePixelRatio = this.win.devicePixelRatio;
+    let displayPixelRatio = getDisplayPixelRatio(this.win);
 
-    linePos = Math.round(linePos * ratio);
-    startPos = Math.round(startPos * ratio);
+    linePos = Math.round(linePos * devicePixelRatio);
+    startPos = Math.round(startPos * devicePixelRatio);
 
     this.ctx.save();
 
+    let fontSize = (GRID_FONT_SIZE * displayPixelRatio);
+    this.ctx.font = fontSize + "px " + GRID_FONT_FAMILY;
+
     let textWidth = this.ctx.measureText(lineNumber).width;
-    // Guess the font height based on the measured width
-    let textHeight = textWidth * 2;
 
     if (dimensionType === COLUMNS) {
-      let yPos = Math.max(startPos, textHeight);
+      let yPos = Math.max(startPos, fontSize);
       this.ctx.fillText(lineNumber, linePos, yPos);
     } else {
       let xPos = Math.max(startPos, textWidth);
       this.ctx.fillText(lineNumber, xPos - textWidth, linePos);
     }
 
     this.ctx.restore();
   },

--- a/devtools/shared/layout/utils.js
+++ b/devtools/shared/layout/utils.js
@@ -628,16 +628,33 @@ function getCurrentZoom(node) {
     throw new Error("Unable to get the zoom from the given argument.");
   }
 
   return utilsFor(win).fullZoom;
 }
 exports.getCurrentZoom = getCurrentZoom;
 
 /**
+ * Get the display pixel ratio for a given window.
+ * The `devicePixelRatio` property is affected by the zoom (see bug 809788), so we have to
+ * divide by the zoom value in order to get just the display density, expressed as pixel
+ * ratio (the physical display pixel compares to a pixel on a “normal” density screen).
+ *
+ * @param {DOMNode|DOMWindow}
+ *        The node for which the zoom factor should be calculated, or its
+ *        owner window.
+ * @return {Number}
+ */
+function getDisplayPixelRatio(node) {
+  let win = getWindowFor(node);
+  return win.devicePixelRatio / utilsFor(win).fullZoom;
+}
+exports.getDisplayPixelRatio = getDisplayPixelRatio;
+
+/**
  * Returns the window's dimensions for the `window` given.
  *
  * @return {Object} An object with `width` and `height` properties, representing the
  * number of pixels for the document's size.
  */
 function getWindowDimensions(window) {
   // First we'll try without flushing layout, because it's way faster.
   let windowUtils = utilsFor(window);