--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -1226,17 +1226,18 @@ CssGridHighlighter.prototype = extend(Au
 
     // Draw the text for the grid area name.
     for (let rowNumber = rowStart; rowNumber < rowEnd; rowNumber++) {
       for (let columnNumber = columnStart; columnNumber < columnEnd; columnNumber++) {
         let row = fragment.rows.tracks[rowNumber - 1];
         let column = fragment.cols.tracks[columnNumber - 1];
 
         // Check if the font size is exceeds the bounds of the containing grid cell.
-        if (fontSize > column.breadth || fontSize > row.breadth) {
+        if (fontSize > (column.breadth * displayPixelRatio) ||
+            fontSize > (row.breadth * displayPixelRatio)) {
           fontSize = (column.breadth + row.breadth) / 2;
           this.ctx.font = fontSize + "px " + GRID_FONT_FAMILY;
         }
 
         let textWidth = this.ctx.measureText(area.name).width;
 
         // The width of the character 'm' approximates the height of the text.
         let textHeight = this.ctx.measureText("m").width;