diff --git a/src/css/common.css b/src/css/common.css
index 58628c709..7f563609d 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -81,8 +81,6 @@ button {
     color: var(--button-ink);
     display: inline-flex;
     fill: var(--button-ink);
-    font-family: Metropolis, sans-serif;
-    font-weight: 600;
     font-size: 14px;
     justify-content: center;
     letter-spacing: 0.5px;
@@ -148,7 +146,6 @@ input[type="checkbox"] {
     }
 .fieldset-header {
     color: var(--fieldset-header-ink);
-    font-family: Metropolis, sans-serif;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: 0.5px;
@@ -204,6 +201,15 @@ input[type="checkbox"] {
     width: 1em;
     }
 
+/* high dpi devices */
+:root.hidpi button {
+    font-family: Metropolis, sans-serif;
+    font-weight: 600;
+    }
+:root.hidpi .fieldset-header {
+    font-family: Metropolis, sans-serif;
+    }
+
 /* touch-screen devices */
 :root.mobile body {
     font-size: 16px;
diff --git a/src/css/dashboard.css b/src/css/dashboard.css
index 7a939c8c1..cc4e7bce0 100644
--- a/src/css/dashboard.css
+++ b/src/css/dashboard.css
@@ -32,8 +32,6 @@ html, body {
     border-top: 3px solid transparent;
     color: var(--dashboard-tab-ink);
     fill: var(--dashboard-tab-ink);
-    font-family: Metropolis, sans-serif;
-    font-weight: 600;
     letter-spacing: 0.5px;
     padding: 0.5em 1.4em calc(0.5em - 3px);
     text-decoration: none;
@@ -79,6 +77,12 @@ body:not(.canUpdateShortcuts) .tabButton[data-pane="shortcuts.html"] {
     display: none;
     }
 
+/* high dpi devices */
+:root.hidpi .tabButton {
+    font-family: Metropolis, sans-serif;
+    font-weight: 600;
+    }
+
 /* hover-able devices */
 :root.desktop .tabButton {
     cursor: default;
diff --git a/src/css/themes/default.css b/src/css/themes/default.css
index 3e8cb2e6d..97262f627 100644
--- a/src/css/themes/default.css
+++ b/src/css/themes/default.css
@@ -142,8 +142,8 @@
 
 /* Default dark theme starts here */
 
-:root.darkTheme {
+:root.dark {
 }
 
-:root.darkTheme.colorBlind {
+:root.dark.colorBlind {
 }
diff --git a/src/js/udom.js b/src/js/udom.js
index 92b5ab65a..805d1dd77 100644
--- a/src/js/udom.js
+++ b/src/js/udom.js
@@ -106,8 +106,11 @@ DOMListFactory.nodeFromSelector = function(selector) {
     ) {
         root.classList.add('desktop');
     }
+    if ( window.matchMedia('(min-resolution: 150dpi)').matches ) {
+        root.classList.add('hidpi');
+    }
     if ( window.matchMedia('(prefers-color-scheme: dark)').matches ) {
-        root.classList.add('darkTheme');
+        root.classList.add('dark');
     }
 }