diff --git a/site/css/fonts.css b/site/css/fonts.css
index 8a3600b..78171fc 100644
--- a/site/css/fonts.css
+++ b/site/css/fonts.css
@@ -143,20 +143,22 @@
 }
 
 body {
-    font-size: calc(var(--base-font-size) * 1);
+    font-size: var(--base-font-size);
 }
 
-.font-body-serif body {
+.font-hidpi body {
     font-family: "BodySerif", sans-serif;
+    line-height: 1.475;
 }
 
-.font-body-sans body {
+.font-lodpi body {
     font-family: "BodySans", serif;
 }
 
 h1 {
     font-family: "Heading";
     font-style: italic;
+    line-height: normal;
 }
 
 h2,
@@ -167,6 +169,7 @@ h6 {
     font-family: "Subheading";
     font-style: italic;
     font-weight: normal;
+    line-height: normal;
 }
 
 h1 {
diff --git a/templates/main.html b/templates/main.html
index 5c3cf00..ac13523 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -7,7 +7,7 @@
   <link rel="stylesheet" href="/css/index.css">
   <link rel="icon" type="image/png" href="/assets/favicon.png">
   <script>
-    const class_ = window.devicePixelRatio > 1 ? "font-body-serif" : "font-body-sans";
+    const class_ = `font-${window.devicePixelRatio >= 1.3 ? 'hidpi' : 'lodpi'}`;
     document.documentElement.className = class_;
   </script>
 </head>