diff --git a/modules/canvaskit/canvaskit_bindings.cpp b/modules/canvaskit/canvaskit_bindings.cpp
index 6d193c5..186c308 100644
--- a/modules/canvaskit/canvaskit_bindings.cpp
+++ b/modules/canvaskit/canvaskit_bindings.cpp
@@ -1203,6 +1203,22 @@
                                                      glyphIDs, expectedCodePoints);
             return actualCodePoints;
         }))
+        .function("getMetrics", optional_override([](SkFont& self) -> JSObject {
+            SkFontMetrics fm;
+            self.getMetrics(&fm);
+
+            JSObject j = emscripten::val::object();
+            j.set("ascent",  fm.fAscent);
+            j.set("descent", fm.fDescent);
+            j.set("leading", fm.fLeading);
+            if (!(fm.fFlags & SkFontMetrics::kBoundsInvalid_Flag)) {
+                const float rect[] = {
+                    fm.fXMin, fm.fTop, fm.fXMax, fm.fBottom
+                };
+                j.set("bounds", MakeTypedArray(4, rect, "Float32Array"));
+            }
+            return j;
+        }))
         .function("getScaleX", &SkFont::getScaleX)
         .function("getSize", &SkFont::getSize)
         .function("getSkewX", &SkFont::getSkewX)
diff --git a/modules/canvaskit/externs.js b/modules/canvaskit/externs.js
index fc021de..bbec785 100644
--- a/modules/canvaskit/externs.js
+++ b/modules/canvaskit/externs.js
@@ -337,6 +337,7 @@
 
   Font: {
     // public API (from C++ bindings)
+    getMetrics: function() {},
     getScaleX: function() {},
     getSize: function() {},
     getSkewX: function() {},
diff --git a/modules/canvaskit/npm_build/extra.html b/modules/canvaskit/npm_build/extra.html
index 6a2bb69..b934f53 100644
--- a/modules/canvaskit/npm_build/extra.html
+++ b/modules/canvaskit/npm_build/extra.html
@@ -260,10 +260,35 @@
 
       canvas.drawLine(wrapTo, 0, wrapTo, 400, fontPaint);
 
-      {
-          let runs = paragraph.getShapedRuns();
+      const offset = function(array, dx, dy) {
+          array[0] += dx;
+          array[1] += dy;
+          array[2] += dx;
+          array[3] += dy;
+      }
 
-          fontPaint.setColor(CanvasKit.RED);
+      {
+          const p = new CanvasKit.Paint();
+          let runs = paragraph.getShapedRuns();
+          let fm = font.getMetrics();
+          let colors = [ [1,0,0,0.5], [0,1,0,0.5] ];
+
+          for (let i in runs) {
+              let r = runs[i];
+              p.setColor(colors[i & 1]);
+
+              let bounds = [
+                 r.positions[0],
+                 r.positions[1] + fm.ascent,
+                 r.positions[r.positions.length-2] + font.getGlyphWidths(r.glyphs.slice(-1))[0],
+                 r.positions[r.positions.length-1] + fm.descent
+              ];
+              offset(bounds, r.origin_x, r.origin_y);
+              canvas.drawRect(bounds, p);
+          }
+          p.delete();
+
+          fontPaint.setColor(CanvasKit.BLUE);
           for (let r of runs) {
               canvas.drawGlyphs(r.glyphs, r.positions, r.origin_x, r.origin_y, font, fontPaint);
           }
diff --git a/modules/canvaskit/npm_build/types/index.d.ts b/modules/canvaskit/npm_build/types/index.d.ts
index 397c93a..161ab64 100644
--- a/modules/canvaskit/npm_build/types/index.d.ts
+++ b/modules/canvaskit/npm_build/types/index.d.ts
@@ -1562,11 +1562,23 @@
     length(): number;
 }
 
+export interface FontMetrics {
+    ascent: number,     // suggested space above the baseline. < 0
+    descent: number,    // suggested space below the baseline. > 0
+    leading: number,    // suggested spacing between descent of previous line and ascent of next line.
+    bounds?: Rect,      // smallest rect containing all glyphs (relative to 0,0)
+}
+
 /**
  * See SkFont.h for more on this class.
  */
 export interface Font extends EmbindObject<Font> {
     /**
+     * Returns the FontMetrics for this font.
+     */
+    getMetrics(): FontMetrics;
+
+    /**
      * Retrieves the bounds for each glyph in glyphs.
      * If paint is not null, its stroking, PathEffect, and MaskFilter fields are respected.
      * These are returned as flattened rectangles.  For each glyph, there will be 4 floats for