diff --git a/assets/layout.scss b/assets/layout.scss
index 5634396ca3d46e3c7ef978066618e36060a16f39..60e767531005c85d2fd0e4bac640e5bbf26d9fde 100644
--- a/assets/layout.scss
+++ b/assets/layout.scss
@@ -352,6 +352,10 @@ th, td {
   font-weight: bold;
 }
 
+.overflow {
+  overflow: auto;
+}
+
 span {
   display: inline-block;
 }
diff --git a/layouts/partials/design/typography.html b/layouts/partials/design/typography.html
index 9f8cd7205bbfcccdb4e72e263f505e10c195563a..dd1984634a37a6147178f4914d1bb26b46363795 100644
--- a/layouts/partials/design/typography.html
+++ b/layouts/partials/design/typography.html
@@ -8,7 +8,7 @@
   <p class="pt-3">Briar’s typography system slightly differs from platform to platform. On the web, we use a slightly modified version of the <a class="underline" href="https://material.io/design/typography/the-type-system.html" target="_blank" rel="noopener">Material Design typography guidelines</a> using the <a class="underline" href="https://rsms.me" target="_blank" rel="noopener">Inter typeface by Rasmus Andersson</a> and <a class="underline" href="https://fonts.google.com/specimen/Roboto" target="_blank" rel="noopener">Roboto Mono</a> for code snippets and other cases where a monospace font might be required.</p>
 </div>
 
-<div class="row mono no-gutters">
+<div class="row mono overflow no-gutters">
  <table>
   <tr class="mono">
     <th>Scale Category</th>